onboarding-kit 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +89 -2
- package/dist/adapters/nest.d.ts +15 -0
- package/dist/adapters/nest.js +53 -0
- package/dist/adapters/next.d.ts +23 -0
- package/dist/adapters/next.js +41 -0
- package/dist/adapters/node.d.ts +10 -0
- package/dist/adapters/node.js +33 -0
- package/dist/cli/index.d.ts +5 -0
- package/dist/cli/index.js +272 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.js +57 -0
- package/dist/load.d.ts +19 -0
- package/dist/load.js +59 -0
- package/dist/render/assets.d.ts +4 -0
- package/dist/render/assets.js +381 -0
- package/dist/render/copy.d.ts +132 -0
- package/dist/render/copy.js +290 -0
- package/dist/render/html.d.ts +12 -0
- package/dist/render/html.js +74 -0
- package/dist/render/index.d.ts +5 -0
- package/dist/render/index.js +167 -0
- package/dist/render/slides.d.ts +19 -0
- package/dist/render/slides.js +232 -0
- package/dist/template.d.ts +9 -0
- package/dist/template.js +88 -0
- package/dist/types.d.ts +150 -0
- package/dist/types.js +6 -0
- package/dist/validate.d.ts +17 -0
- package/dist/validate.js +224 -0
- package/package.json +69 -4
package/dist/load.js
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DEFAULT_FILE = void 0;
|
|
4
|
+
exports.resolveFile = resolveFile;
|
|
5
|
+
exports.resolveEnabled = resolveEnabled;
|
|
6
|
+
exports.loadOnboarding = loadOnboarding;
|
|
7
|
+
exports.isBlank = isBlank;
|
|
8
|
+
exports.filled = filled;
|
|
9
|
+
const promises_1 = require("node:fs/promises");
|
|
10
|
+
const node_path_1 = require("node:path");
|
|
11
|
+
exports.DEFAULT_FILE = "onboarding.json";
|
|
12
|
+
function resolveFile(file) {
|
|
13
|
+
return (0, node_path_1.resolve)(process.cwd(), file ?? exports.DEFAULT_FILE);
|
|
14
|
+
}
|
|
15
|
+
function resolveEnabled(options = {}) {
|
|
16
|
+
return options.enabled ?? process.env.NODE_ENV !== "production";
|
|
17
|
+
}
|
|
18
|
+
async function loadOnboarding(file) {
|
|
19
|
+
const path = resolveFile(file);
|
|
20
|
+
let raw;
|
|
21
|
+
try {
|
|
22
|
+
raw = await (0, promises_1.readFile)(path, "utf8");
|
|
23
|
+
}
|
|
24
|
+
catch {
|
|
25
|
+
return { ok: false, file: path, reason: "missing", message: `Arquivo não encontrado: ${path}` };
|
|
26
|
+
}
|
|
27
|
+
try {
|
|
28
|
+
return { ok: true, file: path, data: JSON.parse(raw) };
|
|
29
|
+
}
|
|
30
|
+
catch (err) {
|
|
31
|
+
return {
|
|
32
|
+
ok: false,
|
|
33
|
+
file: path,
|
|
34
|
+
reason: "invalid-json",
|
|
35
|
+
message: `JSON inválido em ${path}: ${err.message}`,
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
/** true quando o valor não tem nenhum texto preenchido (strings vazias, arrays/objetos vazios). */
|
|
40
|
+
function isBlank(value) {
|
|
41
|
+
if (value === null || value === undefined)
|
|
42
|
+
return true;
|
|
43
|
+
if (typeof value === "string")
|
|
44
|
+
return value.trim() === "";
|
|
45
|
+
if (typeof value === "boolean" || typeof value === "number")
|
|
46
|
+
return true;
|
|
47
|
+
if (Array.isArray(value))
|
|
48
|
+
return value.every(isBlank);
|
|
49
|
+
if (typeof value === "object") {
|
|
50
|
+
return Object.entries(value)
|
|
51
|
+
.filter(([key]) => !key.startsWith("_"))
|
|
52
|
+
.every(([, v]) => isBlank(v));
|
|
53
|
+
}
|
|
54
|
+
return true;
|
|
55
|
+
}
|
|
56
|
+
/** Remove itens-modelo em branco de um array. */
|
|
57
|
+
function filled(items) {
|
|
58
|
+
return Array.isArray(items) ? items.filter((item) => !isBlank(item)) : [];
|
|
59
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js";
|
|
2
|
+
export declare const FONTS = "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap\">";
|
|
3
|
+
export declare const CSS = "\n:root{--bg:#faf9f6;--surface:#fff;--surface-2:#f3f1ec;--text:#1b1a18;--muted:#68645c;--border:#e6e3dc;--track:#e8e5de;--shadow:0 1px 2px rgb(30 25 15/.04),0 10px 30px rgb(30 25 15/.07);--al:47%;--as:72%;--on-accent:#fff;--code-bg:#f1efe9;--term-bg:#161514;--term-text:#efece5;color-scheme:light}\n@media (prefers-color-scheme:dark){:root:not([data-theme=\"light\"]){--bg:#111110;--surface:#1a1918;--surface-2:#232220;--text:#f2f0eb;--muted:#a19d94;--border:#2c2a28;--track:#2a2826;--shadow:0 1px 2px rgb(0 0 0/.3),0 10px 30px rgb(0 0 0/.35);--al:70%;--as:78%;--on-accent:#111110;--code-bg:#262422;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--bg:#111110;--surface:#1a1918;--surface-2:#232220;--text:#f2f0eb;--muted:#a19d94;--border:#2c2a28;--track:#2a2826;--shadow:0 1px 2px rgb(0 0 0/.3),0 10px 30px rgb(0 0 0/.35);--al:70%;--as:78%;--on-accent:#111110;--code-bg:#262422;color-scheme:dark}\n*{box-sizing:border-box}\nhtml,body{height:100%;margin:0}\nbody{background:var(--bg);color:var(--text);font:16px/1.6 \"Plus Jakarta Sans\",system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}\nbody.solo{overflow:auto}\nbutton{font:inherit;color:inherit}\ncode,pre{font-family:\"JetBrains Mono\",ui-monospace,SFMono-Regular,Menlo,monospace}\ncode{font-size:.85em;background:var(--code-bg);padding:.12em .42em;border-radius:6px}\npre{margin:12px 0 0;background:var(--code-bg);border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:.82rem;line-height:1.6}\npre code{background:none;padding:0;font-size:inherit}\n:focus-visible{outline:2px solid hsl(var(--h,255) var(--as) var(--al));outline-offset:2px}\n\n/* \u2500\u2500 estrutura \u2500\u2500 */\n.deck{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}\n.topbar{display:flex;align-items:center;gap:18px;padding:16px 24px;z-index:3}\n.brand{font-weight:800;letter-spacing:-.01em;white-space:nowrap;max-width:20ch;overflow:hidden;text-overflow:ellipsis}\n.segments{flex:1;display:flex;gap:5px;align-items:center;min-width:0;height:20px}\n.seg{flex:var(--w) 1 0;min-width:6px;height:6px;border:0;padding:0;border-radius:99px;background:var(--track);cursor:pointer;overflow:hidden;position:relative;transition:height .2s}\n.seg:hover,.seg.is-current{height:9px}\n.seg>span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:hsl(var(--h) var(--as) var(--al));transition:width .5s cubic-bezier(.2,.7,.2,1)}\n.icon-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--muted);transition:color .2s,transform .2s}\n.icon-btn:hover{color:var(--text);transform:translateY(-1px)}\n.icon-btn svg{width:18px;height:18px}\n.stage{position:relative;overflow:hidden}\n\n/* \u2500\u2500 slides \u2500\u2500 */\n.slide{--accent:hsl(var(--h) var(--as) var(--al));--accent-soft:hsl(var(--h) 85% 55% / .13);position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transform:translateX(56px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility .45s}\n.slide.is-before{transform:translateX(-56px)}\n.slide.is-active{opacity:1;visibility:visible;transform:none}\n.slide::before,.slide::after{content:\"\";position:absolute;border-radius:50%;pointer-events:none}\n.slide::before{width:72vmax;height:72vmax;right:-30vmax;top:-38vmax;background:radial-gradient(circle,hsl(var(--h) 90% 62% / .17),transparent 62%)}\n.slide::after{width:50vmax;height:50vmax;left:-24vmax;bottom:-30vmax;background:radial-gradient(circle,hsl(calc(var(--h) + 50) 90% 62% / .10),transparent 62%)}\n.slide-inner{position:relative;z-index:1;margin:auto;width:100%;max-width:1080px;max-height:100%;overflow-y:auto;padding:24px 40px 32px;scrollbar-width:thin;scrollbar-color:transparent transparent}\n.slide-inner:hover{scrollbar-color:var(--border) transparent}\n.slide-inner::-webkit-scrollbar{width:8px}.slide-inner::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}.slide-inner:hover::-webkit-scrollbar-thumb{background:var(--border)}.slide-inner::-webkit-scrollbar-track{background:transparent}\n.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}\n.kicker .num{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:9px;background:var(--accent-soft);letter-spacing:0;font-size:.8rem}\n.title{font-size:clamp(2rem,1.2rem + 2.8vw,3.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;margin:0 0 14px;max-width:20ch;text-wrap:balance}\n.title .cont{font-size:.4em;font-weight:700;letter-spacing:0;color:var(--muted);vertical-align:middle;margin-left:6px}\n.lede{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--muted);max-width:58ch;margin:0 0 30px;text-wrap:pretty}\n.statement{font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem);line-height:1.32;font-weight:600;letter-spacing:-.02em;max-width:34ch;margin:0 0 32px;text-wrap:pretty}\n.statement.small{font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);max-width:40ch;margin:22px 0 0}\n.mini-label,.label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}\n\n/* entrada dos elementos */\n.slide.is-active .reveal>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}\n.reveal>*:nth-child(2){animation-delay:.06s!important}.reveal>*:nth-child(3){animation-delay:.12s!important}.reveal>*:nth-child(4){animation-delay:.18s!important}.reveal>*:nth-child(5){animation-delay:.24s!important}.reveal>*:nth-child(6){animation-delay:.3s!important}.reveal>*:nth-child(7){animation-delay:.36s!important}.reveal>*:nth-child(8){animation-delay:.42s!important}\n@keyframes rise{from{opacity:0;transform:translateY(16px)}}\n\n/* \u2500\u2500 blocos \u2500\u2500 */\n.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}\n.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}\n.stack-list,.rules,.tasks,.modules,.quiz{display:grid;gap:14px}\n.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}\n.card h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.015em;line-height:1.3}\n.card p{margin:0;color:var(--muted)}\n.card p.strong{color:var(--text);font-size:1.08rem;font-weight:600}\n.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}\n.card-top h3{margin:0}\n.badge{flex:none;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}\n.badge-strong{background:var(--accent);color:var(--on-accent)}\n.big-card{padding:28px}\n.big-card p{color:var(--text);font-size:1.12rem;line-height:1.55}\n.emoji{display:block;font-size:1.9rem;line-height:1;margin-bottom:14px}\n.evidence{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}\n.ev{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:500 .72rem/1.4 \"JetBrains Mono\",ui-monospace,monospace;padding:4px 9px;border-radius:8px;background:var(--surface-2);color:var(--muted);text-decoration:none;border:1px solid var(--border)}\n.ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\na.ev:hover{color:var(--accent);border-color:var(--accent)}\n.ev-lg{font-size:.92rem;padding:9px 14px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}\n\n/* pessoas e jornadas */\n.actor{display:flex;gap:16px;align-items:flex-start}\n.avatar,.logo{flex:none;display:grid;place-items:center;font-weight:800;color:#fff;letter-spacing:-.02em}\n.avatar{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,hsl(var(--ah) 72% 60%),hsl(calc(var(--ah) + 45) 72% 48%))}\n.flow{margin-bottom:28px}\n.flow h3{font-size:1.15rem;margin:0 0 14px}\n.chain{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}\n.chain li{display:flex;align-items:center;gap:10px}\n.chain li:not(:last-child)::after{content:\"\u2192\";color:var(--accent);font-weight:800;font-size:1.1rem}\n.step{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:.95rem;line-height:1.35}\n.step b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:.8rem}\n\n/* vocabul\u00E1rio */\n.flips{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}\n.flip{perspective:1000px;border:0;padding:0;background:none;cursor:pointer;text-align:left;min-height:170px}\n.flip-inner{position:relative;display:block;width:100%;height:100%;min-height:170px;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}\n.flip.is-flipped .flip-inner{transform:rotateY(180deg)}\n.face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:20px;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:auto}\n.front{background:var(--surface)}\n.front strong{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}\n.front small{color:var(--muted);font-size:.76rem;font-weight:600}\n.back{background:var(--accent);color:var(--on-accent);border-color:transparent;transform:rotateY(180deg);font-size:.95rem;line-height:1.5;justify-content:center}\n.back code{background:rgb(255 255 255/.2);color:inherit}\n.flip:hover .front{border-color:var(--accent)}\n.quiz{gap:12px}\n.quiz-q{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px 20px;box-shadow:var(--shadow)}\n.quiz-q .q{font-weight:700;margin:0 0 10px;font-size:1.04rem}\n.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}\n.opt{text-align:left;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2);cursor:pointer;line-height:1.4;font-size:.92rem;transition:border-color .2s,background .2s}\n.opt:hover:not(:disabled){border-color:var(--accent)}\n.opt:disabled{cursor:default}\n.opt.is-right{border-color:hsl(150 60% 42%);background:hsl(150 60% 42% / .14)}\n.opt.is-wrong{border-color:hsl(0 72% 56%);background:hsl(0 72% 56% / .12)}\n.feedback{margin:0;font-weight:700;font-size:.92rem}\n.feedback:not(:empty){margin-top:10px}\n.score{font-weight:800;color:var(--accent);font-size:1.1rem;min-height:1.6em;margin:18px 0 0}\n\n/* regras, stack, m\u00F3dulos */\n.rule{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}\n.rule-num{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--accent)}\n.tech-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}\n.tech-head strong{display:block;font-size:1.06rem;line-height:1.25}\n.tech-head small{color:var(--muted);font-size:.78rem}\n.logo{width:46px;height:46px;border-radius:14px;font-size:.95rem;background:linear-gradient(135deg,hsl(var(--th) 68% 56%),hsl(calc(var(--th) + 35) 68% 44%))}\n.diagram{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow);overflow:auto;max-height:58vh}\n.diagram pre.mermaid{width:100%;background:none;padding:0;margin:0;font-family:inherit;text-align:center;white-space:pre-wrap}\n.diagram svg{display:block;margin:0 auto;width:100%;height:auto;max-height:calc(58vh - 44px)}\n.module{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:18px;align-items:center;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}\n.module strong{display:block;margin-bottom:4px}\n.module code{background:var(--accent-soft);color:var(--accent);font-size:.78rem}\n.module p{margin:0;color:var(--muted)}\n\n/* m\u00E3os \u00E0 obra */\n.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}\n.pills li{padding:8px 16px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:.92rem}\n.pills li::before{content:\"\u2713\";color:var(--accent);margin-right:8px;font-weight:800}\n.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:10px}\n.steps li{counter-increment:s;display:flex;gap:16px;align-items:center;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}\n.steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.9rem}\n.terminal{background:var(--term-bg);color:var(--term-text);border-radius:20px;padding:6px 6px 10px;box-shadow:var(--shadow);border:1px solid var(--border)}\n.term-bar{display:flex;gap:7px;padding:10px 14px}\n.term-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}\n.cmd{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid rgb(255 255 255/.07)}\n.cmd code{background:none;color:inherit;font-size:.92rem;padding:0;word-break:break-all}\n.cmd code::before{content:\"$ \";color:hsl(var(--h) 75% 66%)}\n.cmd p{margin:4px 0 0;color:rgb(255 255 255/.55);font-size:.86rem}\n.cmd p code{background:rgb(255 255 255/.08);padding:.1em .4em}.cmd p code::before{content:none}\n.copy{border:1px solid rgb(255 255 255/.16);background:transparent;color:inherit;border-radius:9px;padding:6px 12px;font-size:.78rem;font-weight:600;cursor:pointer}\n.copy:hover{background:rgb(255 255 255/.08)}\n.env code{font-size:.84rem;background:var(--accent-soft);color:var(--accent)}\n\n/* tour */\n.route{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:r}\n.route li{counter-increment:r;display:flex;align-items:center;gap:8px}\n.route li::before{content:counter(r);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:800}\n.route code{background:var(--surface);border:1px solid var(--border)}\n.tour-step{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;margin-top:8px}\n.bignum{font-size:clamp(5rem,3rem + 7vw,10rem);font-weight:800;line-height:.82;letter-spacing:-.06em;color:var(--accent);opacity:.22}\n.stops{display:flex;gap:6px;margin-top:32px}\n.stops i{width:28px;height:6px;border-radius:99px;background:var(--track);transition:background .3s}\n.stops i.on{background:var(--accent)}\n\n/* cuidados, decis\u00F5es, miss\u00E3o */\n.gotcha{display:grid;grid-template-columns:auto 1fr;gap:16px;border-left:4px solid var(--accent)}\n.gotcha .emoji{margin:0}\n.split{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:14px}\n.split p{color:var(--text)}\n.task{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow);transition:opacity .25s,border-color .25s}\n.task:hover{border-color:var(--accent)}\n.task input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:1px 0 0;border-radius:9px;border:2px solid var(--border);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}\n.task input:checked{background:var(--accent);border-color:var(--accent)}\n.task input:checked::after{content:\"\u2713\";color:var(--on-accent);font-weight:800;font-size:.9rem}\n.task strong{display:block;font-size:1.05rem}\n.task-desc{display:block;color:var(--muted);margin-top:2px}\n.task:has(input:checked){opacity:.6}\n.task:has(input:checked) strong{text-decoration:line-through}\n\n/* boas-vindas e final */\n.welcome .hi{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);font-weight:700;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:10px}\n.wave{display:inline-block;font-size:1.6em;transform-origin:70% 70%}\n.slide.is-active .wave{animation:wave 2s ease-in-out .4s 1}\n@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}\n.welcome .title{font-size:clamp(2.4rem,min(1.4rem + 4.6vw,9vh),5.2rem);max-width:16ch}\n.welcome .lede{margin-bottom:24px}\n.grad{background:linear-gradient(110deg,hsl(var(--h) 85% var(--al)),hsl(calc(var(--h) + 70) 85% var(--al)));-webkit-background-clip:text;background-clip:text;color:transparent}\n.tagline{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:600;margin:0 0 14px;max-width:44ch;text-wrap:balance}\n.cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:16px;border:0;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 10px 28px hsl(var(--h) 80% 50% / .35);transition:transform .2s,box-shadow .2s}\n.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px hsl(var(--h) 80% 50% / .42)}\n.cta .arrow{transition:transform .2s}.cta:hover .arrow{transform:translateX(3px)}\n.journey{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}\n.journey button{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--surface);border:1px solid var(--border);cursor:pointer;font-size:.86rem;font-weight:600;transition:border-color .2s,transform .2s}\n.journey button:hover{border-color:hsl(var(--ch) var(--as) var(--al));transform:translateY(-1px)}\n.journey .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.72rem;font-weight:800;background:hsl(var(--ch) 85% 55% / .15);color:hsl(var(--ch) var(--as) var(--al))}\n.journey-wrap{margin-top:clamp(20px,4vh,44px)}\n.meta{margin-top:20px}\n.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:26px;color:var(--muted);font-size:.84rem}\n.meta a{color:inherit}\n.finale{text-align:center}\n.finale .title,.finale .lede{margin-left:auto;margin-right:auto}\n.party{display:block;font-size:clamp(3.5rem,2.5rem + 4vw,6rem);line-height:1;margin-bottom:16px}\n.slide.is-active .party{animation:pop .8s cubic-bezier(.2,1.6,.4,1) both}\n@keyframes pop{from{transform:scale(.3) rotate(-20deg);opacity:0}}\n.recap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0 auto 22px;max-width:760px}\n.recap li{padding:6px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:.86rem;font-weight:600}\n.recap li::before{content:\"\u2713 \";color:hsl(var(--ch) var(--as) var(--al));font-weight:800}\n.task-count{color:var(--muted);font-weight:600;margin:0 0 26px}\n.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}\n.ghost{padding:15px 22px;border-radius:16px;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer}\n.ghost:hover{border-color:var(--accent)}\n\n/* \u2500\u2500 controles \u2500\u2500 */\n.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 24px 20px;z-index:3}\n.controls [data-prev]{justify-self:start}\n.controls [data-next]{justify-self:end}\n.nav-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,opacity .2s}\n.nav-btn:hover:not(:disabled){transform:translateY(-1px)}\n.nav-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}\n.nav-btn:disabled{opacity:0;visibility:hidden}\n.where{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.4}\n.where strong{color:var(--text);font-size:.9rem}\n.hint.is-hidden{display:none}\n\n/* \u00EDndice */\n.overview{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;padding:28px 24px 56px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}\n.overview.is-open{opacity:1;visibility:visible;pointer-events:auto}\n.overview-inner{max-width:1040px;margin:0 auto}\n.overview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}\n.overview-head h2{margin:0;font-size:1.6rem;letter-spacing:-.02em}\n.ov-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}\n.ov-chapter{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}\n.ov-chapter h3{display:flex;gap:10px;align-items:center;margin:0 0 8px;font-size:1rem}\n.ov-chapter h3 .n{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;font-size:.78rem;background:hsl(var(--ch) 85% 55% / .15);color:hsl(var(--ch) var(--as) var(--al))}\n.ov-chapter button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:10px;border:0;background:none;cursor:pointer;color:var(--muted);font-size:.9rem;line-height:1.35}\n.ov-chapter button:hover,.ov-chapter button.is-current{background:var(--surface-2);color:var(--text)}\n.ov-chapter button.is-current{font-weight:700}\n\n/* aviso de retomada */\n.toast{position:fixed;left:50%;bottom:96px;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px);padding:12px 14px 12px 18px;border-radius:16px;background:var(--text);color:var(--bg);box-shadow:0 12px 40px rgb(0 0 0/.25);font-weight:600;font-size:.92rem;transform:translate(-50%,20px);opacity:0;visibility:hidden;transition:.35s cubic-bezier(.2,.7,.2,1)}\n.toast.is-open{transform:translate(-50%,0);opacity:1;visibility:visible}\n.toast button{border:0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;background:rgb(127 127 127/.25);color:inherit}\n.toast button.yes{background:var(--bg);color:var(--text)}\n\n/* confete */\n.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}\n.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;animation:fall linear forwards}\n@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}\n\n/* p\u00E1ginas de aviso */\n.solo-wrap{min-height:100%;display:grid;place-items:center;padding:32px 16px;--h:255;--accent:hsl(var(--h) var(--as) var(--al));--accent-soft:hsl(var(--h) 85% 55% / .13)}\n.solo-card{max-width:640px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px;box-shadow:var(--shadow)}\n.solo-card h1{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);letter-spacing:-.03em;line-height:1.15;margin:0 0 12px}\n.solo-card p{color:var(--muted);margin:0 0 20px}\n.prompt{display:flex;gap:10px;align-items:flex-start}\n.prompt pre{flex:1;white-space:pre-wrap;margin:0}\n.prompt .copy{color:var(--text);border-color:var(--border)}\n\n/* \u2500\u2500 telas pequenas \u2500\u2500 */\n@media (max-width:760px){\n .topbar{padding:12px 16px;gap:10px}\n .brand{display:none}\n .slide-inner{padding:12px 16px 28px}\n .controls{padding:10px 16px 14px;gap:8px}\n .nav-btn{padding:11px 14px}\n .nav-btn .txt,.hint{display:none}\n .rule,.tour-step{grid-template-columns:1fr;gap:6px}\n .module{grid-template-columns:1fr;gap:6px}\n .bignum{font-size:4rem}\n .journey-wrap{margin-top:32px}\n .solo-card{padding:24px}\n}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\n";
|
|
4
|
+
export declare const JS = "\n(function(){\n var root=document.documentElement;\n var KEY='onboarding-kit:'+location.pathname+':';\n function sget(k){try{return localStorage.getItem(KEY+k)}catch(e){return null}}\n function sset(k,v){try{localStorage.setItem(KEY+k,v)}catch(e){}}\n function fill(t,o){return t.replace(/\\{(\\w+)\\}/g,function(_,k){return o[k]})}\n\n var theme=sget('theme'); if(theme) root.setAttribute('data-theme',theme);\n function isDark(){var t=root.getAttribute('data-theme');return t?t==='dark':matchMedia('(prefers-color-scheme: dark)').matches}\n\n var slides=[].slice.call(document.querySelectorAll('.slide'));\n var n=slides.length,cur=-1,celebrated=false;\n var segs=[].slice.call(document.querySelectorAll('.seg'));\n var $=function(id){return document.getElementById(id)};\n var prevBtn=document.querySelector('[data-prev]'),nextBtn=document.querySelector('[data-next]');\n var overview=$('ok-overview'),toast=$('ok-toast'),hint=$('ok-hint');\n\n function go(i){\n if(!n) return;\n i=Math.max(0,Math.min(n-1,i|0)); if(i===cur) return;\n slides.forEach(function(s,j){var on=j===i;s.classList.toggle('is-active',on);s.classList.toggle('is-before',j<i);s.setAttribute('aria-hidden',on?'false':'true');if('inert' in s)s.inert=!on});\n cur=i;\n var s=slides[i],inner=s.querySelector('.slide-inner'); if(inner) inner.scrollTop=0;\n segs.forEach(function(g){var st=+g.dataset.start,c=+g.dataset.count,p=i<st?0:i>=st+c?1:(i-st+1)/c;g.firstElementChild.style.width=(p*100)+'%';g.classList.toggle('is-current',i>=st&&i<st+c)});\n $('ok-chapter').textContent=s.dataset.chapterName;\n $('ok-count').textContent=(i+1)+' / '+n;\n prevBtn.disabled=i===0; nextBtn.disabled=i===n-1;\n [].forEach.call(document.querySelectorAll('.ov-chapter [data-go]'),function(b){b.classList.toggle('is-current',+b.dataset.go===i)});\n try{history.replaceState(null,'','#/'+(i+1))}catch(e){}\n sset('slide',String(i));\n if(s.dataset.kind==='finale'&&!celebrated){celebrated=true;confetti()}\n }\n function step(d){go(cur+d);if(hint)hint.classList.add('is-hidden');closeToast()}\n function openOverview(open){if(!overview)return;overview.classList.toggle('is-open',open);overview.setAttribute('aria-hidden',open?'false':'true');if(open){var c=overview.querySelector('.is-current')||overview.querySelector('button');c&&c.focus()}}\n function closeToast(){if(toast)toast.classList.remove('is-open')}\n\n document.addEventListener('click',function(e){\n var el=e.target.closest('button,[data-go]'); if(!el) return;\n if(el.hasAttribute('data-next')) return step(1);\n if(el.hasAttribute('data-prev')) return step(-1);\n if(el.hasAttribute('data-go')){openOverview(false);closeToast();return go(+el.dataset.go)}\n if(el.hasAttribute('data-overview')) return openOverview(true);\n if(el.hasAttribute('data-close')) return openOverview(false);\n if(el.hasAttribute('data-theme-toggle')){var nt=isDark()?'light':'dark';root.setAttribute('data-theme',nt);sset('theme',nt);return}\n if(el.hasAttribute('data-resume')){closeToast();return go(+el.dataset.resume)}\n if(el.hasAttribute('data-dismiss')) return closeToast();\n if(el.hasAttribute('data-copy')){\n var txt=el.dataset.copy,orig=el.textContent;\n if(navigator.clipboard) navigator.clipboard.writeText(txt).then(function(){el.textContent=el.dataset.done||'\u2713';setTimeout(function(){el.textContent=orig},1600)});\n return;\n }\n if(el.classList.contains('flip')){var f=el.classList.toggle('is-flipped');el.setAttribute('aria-pressed',f?'true':'false');return}\n if(el.classList.contains('opt')){\n var q=el.closest('[data-quiz]'); if(!q||q.dataset.done) return;\n var right=el.dataset.correct==='1'; q.dataset.done=right?'right':'wrong';\n [].forEach.call(q.querySelectorAll('.opt'),function(o){o.disabled=true;if(o.dataset.correct==='1')o.classList.add('is-right')});\n if(!right) el.classList.add('is-wrong');\n q.querySelector('.feedback').textContent=right?q.dataset.right:q.dataset.wrong;\n var slide=q.closest('.slide'),all=slide.querySelectorAll('[data-quiz]'),done=slide.querySelectorAll('[data-quiz][data-done]'),ok=slide.querySelectorAll('[data-quiz][data-done=\"right\"]');\n var score=slide.querySelector('[data-quiz-score]');\n if(score&&done.length===all.length) score.textContent=fill(score.dataset.template,{right:ok.length,total:all.length});\n }\n });\n\n document.addEventListener('keydown',function(e){\n if(e.metaKey||e.ctrlKey||e.altKey||e.target.closest('input,textarea,select')) return;\n var k=e.key;\n if(overview&&overview.classList.contains('is-open')){if(k==='Escape'||k==='o'){e.preventDefault();openOverview(false)}return}\n if(k===' '&&e.target.closest('button,a,label')) return;\n if(k==='ArrowRight'||k==='PageDown'||(k===' '&&!e.shiftKey)){e.preventDefault();step(1)}\n else if(k==='ArrowLeft'||k==='PageUp'||(k===' '&&e.shiftKey)){e.preventDefault();step(-1)}\n else if(k==='Home'){e.preventDefault();go(0)}\n else if(k==='End'){e.preventDefault();go(n-1)}\n else if(k==='o'){e.preventDefault();openOverview(true)}\n });\n\n var stage=$('ok-stage'),sx=0,sy=0;\n if(stage){\n stage.addEventListener('touchstart',function(e){sx=e.touches[0].clientX;sy=e.touches[0].clientY},{passive:true});\n stage.addEventListener('touchend',function(e){var dx=e.changedTouches[0].clientX-sx,dy=e.changedTouches[0].clientY-sy;if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)*1.5)step(dx<0?1:-1)},{passive:true});\n }\n\n // tarefas da primeira miss\u00E3o\n var tasks={};try{tasks=JSON.parse(sget('tasks')||'{}')}catch(e){}\n var boxes=[].slice.call(document.querySelectorAll('[data-task]'));\n function countTasks(){var el=document.querySelector('[data-task-count]');if(!el)return;var d=boxes.filter(function(b){return b.checked}).length;el.textContent=fill(el.dataset.template,{done:d,total:boxes.length})}\n boxes.forEach(function(b){b.checked=!!tasks[b.dataset.task];b.addEventListener('change',function(){tasks[b.dataset.task]=b.checked;sset('tasks',JSON.stringify(tasks));countTasks()})});\n countTasks();\n\n function confetti(){\n if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n var box=document.createElement('div');box.className='confetti';box.setAttribute('aria-hidden','true');\n for(var i=0;i<120;i++){var p=document.createElement('i');p.style.left=(Math.random()*100)+'%';p.style.background='hsl('+Math.floor(Math.random()*360)+' 85% 60%)';p.style.setProperty('--dx',(Math.random()*240-120)+'px');p.style.setProperty('--r',(Math.random()*900-450)+'deg');p.style.animationDuration=(2.4+Math.random()*2.2)+'s';p.style.animationDelay=(Math.random()*.7)+'s';box.appendChild(p)}\n document.body.appendChild(box);setTimeout(function(){box.remove()},6000);\n }\n\n if(n){\n var m=/^#\\/(\\d+)$/.exec(location.hash),saved=parseInt(sget('slide')||'0',10)||0;\n if(m){go(+m[1]-1)}else{go(0);if(saved>0&&saved<n&&toast){toast.querySelector('span').textContent=fill(toast.dataset.template,{n:saved+1});toast.querySelector('[data-resume]').dataset.resume=saved;toast.classList.add('is-open');setTimeout(closeToast,9000)}}\n window.addEventListener('hashchange',function(){var h=/^#\\/(\\d+)$/.exec(location.hash);if(h)go(+h[1]-1)});\n }\n\n window.__okMermaid=function(){\n if(!window.mermaid) return;\n mermaid.initialize({startOnLoad:false,theme:isDark()?'dark':'neutral',securityLevel:'strict',fontFamily:'Plus Jakarta Sans, system-ui, sans-serif'});\n mermaid.run({querySelector:'pre.mermaid'});\n };\n})();\n";
|
|
@@ -0,0 +1,381 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.JS = exports.CSS = exports.FONTS = exports.MERMAID_URL = void 0;
|
|
4
|
+
exports.MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js";
|
|
5
|
+
exports.FONTS = '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap">';
|
|
6
|
+
const DARK = `--bg:#111110;--surface:#1a1918;--surface-2:#232220;--text:#f2f0eb;--muted:#a19d94;--border:#2c2a28;--track:#2a2826;--shadow:0 1px 2px rgb(0 0 0/.3),0 10px 30px rgb(0 0 0/.35);--al:70%;--as:78%;--on-accent:#111110;--code-bg:#262422;color-scheme:dark`;
|
|
7
|
+
exports.CSS = `
|
|
8
|
+
:root{--bg:#faf9f6;--surface:#fff;--surface-2:#f3f1ec;--text:#1b1a18;--muted:#68645c;--border:#e6e3dc;--track:#e8e5de;--shadow:0 1px 2px rgb(30 25 15/.04),0 10px 30px rgb(30 25 15/.07);--al:47%;--as:72%;--on-accent:#fff;--code-bg:#f1efe9;--term-bg:#161514;--term-text:#efece5;color-scheme:light}
|
|
9
|
+
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){${DARK}}}
|
|
10
|
+
:root[data-theme="dark"]{${DARK}}
|
|
11
|
+
*{box-sizing:border-box}
|
|
12
|
+
html,body{height:100%;margin:0}
|
|
13
|
+
body{background:var(--bg);color:var(--text);font:16px/1.6 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
|
|
14
|
+
body.solo{overflow:auto}
|
|
15
|
+
button{font:inherit;color:inherit}
|
|
16
|
+
code,pre{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
|
|
17
|
+
code{font-size:.85em;background:var(--code-bg);padding:.12em .42em;border-radius:6px}
|
|
18
|
+
pre{margin:12px 0 0;background:var(--code-bg);border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:.82rem;line-height:1.6}
|
|
19
|
+
pre code{background:none;padding:0;font-size:inherit}
|
|
20
|
+
:focus-visible{outline:2px solid hsl(var(--h,255) var(--as) var(--al));outline-offset:2px}
|
|
21
|
+
|
|
22
|
+
/* ── estrutura ── */
|
|
23
|
+
.deck{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
|
|
24
|
+
.topbar{display:flex;align-items:center;gap:18px;padding:16px 24px;z-index:3}
|
|
25
|
+
.brand{font-weight:800;letter-spacing:-.01em;white-space:nowrap;max-width:20ch;overflow:hidden;text-overflow:ellipsis}
|
|
26
|
+
.segments{flex:1;display:flex;gap:5px;align-items:center;min-width:0;height:20px}
|
|
27
|
+
.seg{flex:var(--w) 1 0;min-width:6px;height:6px;border:0;padding:0;border-radius:99px;background:var(--track);cursor:pointer;overflow:hidden;position:relative;transition:height .2s}
|
|
28
|
+
.seg:hover,.seg.is-current{height:9px}
|
|
29
|
+
.seg>span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:hsl(var(--h) var(--as) var(--al));transition:width .5s cubic-bezier(.2,.7,.2,1)}
|
|
30
|
+
.icon-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--muted);transition:color .2s,transform .2s}
|
|
31
|
+
.icon-btn:hover{color:var(--text);transform:translateY(-1px)}
|
|
32
|
+
.icon-btn svg{width:18px;height:18px}
|
|
33
|
+
.stage{position:relative;overflow:hidden}
|
|
34
|
+
|
|
35
|
+
/* ── slides ── */
|
|
36
|
+
.slide{--accent:hsl(var(--h) var(--as) var(--al));--accent-soft:hsl(var(--h) 85% 55% / .13);position:absolute;inset:0;display:flex;opacity:0;visibility:hidden;transform:translateX(56px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility .45s}
|
|
37
|
+
.slide.is-before{transform:translateX(-56px)}
|
|
38
|
+
.slide.is-active{opacity:1;visibility:visible;transform:none}
|
|
39
|
+
.slide::before,.slide::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
|
|
40
|
+
.slide::before{width:72vmax;height:72vmax;right:-30vmax;top:-38vmax;background:radial-gradient(circle,hsl(var(--h) 90% 62% / .17),transparent 62%)}
|
|
41
|
+
.slide::after{width:50vmax;height:50vmax;left:-24vmax;bottom:-30vmax;background:radial-gradient(circle,hsl(calc(var(--h) + 50) 90% 62% / .10),transparent 62%)}
|
|
42
|
+
.slide-inner{position:relative;z-index:1;margin:auto;width:100%;max-width:1080px;max-height:100%;overflow-y:auto;padding:24px 40px 32px;scrollbar-width:thin;scrollbar-color:transparent transparent}
|
|
43
|
+
.slide-inner:hover{scrollbar-color:var(--border) transparent}
|
|
44
|
+
.slide-inner::-webkit-scrollbar{width:8px}.slide-inner::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}.slide-inner:hover::-webkit-scrollbar-thumb{background:var(--border)}.slide-inner::-webkit-scrollbar-track{background:transparent}
|
|
45
|
+
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
|
|
46
|
+
.kicker .num{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:9px;background:var(--accent-soft);letter-spacing:0;font-size:.8rem}
|
|
47
|
+
.title{font-size:clamp(2rem,1.2rem + 2.8vw,3.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;margin:0 0 14px;max-width:20ch;text-wrap:balance}
|
|
48
|
+
.title .cont{font-size:.4em;font-weight:700;letter-spacing:0;color:var(--muted);vertical-align:middle;margin-left:6px}
|
|
49
|
+
.lede{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--muted);max-width:58ch;margin:0 0 30px;text-wrap:pretty}
|
|
50
|
+
.statement{font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem);line-height:1.32;font-weight:600;letter-spacing:-.02em;max-width:34ch;margin:0 0 32px;text-wrap:pretty}
|
|
51
|
+
.statement.small{font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);max-width:40ch;margin:22px 0 0}
|
|
52
|
+
.mini-label,.label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
|
|
53
|
+
|
|
54
|
+
/* entrada dos elementos */
|
|
55
|
+
.slide.is-active .reveal>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
|
|
56
|
+
.reveal>*:nth-child(2){animation-delay:.06s!important}.reveal>*:nth-child(3){animation-delay:.12s!important}.reveal>*:nth-child(4){animation-delay:.18s!important}.reveal>*:nth-child(5){animation-delay:.24s!important}.reveal>*:nth-child(6){animation-delay:.3s!important}.reveal>*:nth-child(7){animation-delay:.36s!important}.reveal>*:nth-child(8){animation-delay:.42s!important}
|
|
57
|
+
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
|
|
58
|
+
|
|
59
|
+
/* ── blocos ── */
|
|
60
|
+
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
|
|
61
|
+
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
|
|
62
|
+
.stack-list,.rules,.tasks,.modules,.quiz{display:grid;gap:14px}
|
|
63
|
+
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
|
|
64
|
+
.card h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.015em;line-height:1.3}
|
|
65
|
+
.card p{margin:0;color:var(--muted)}
|
|
66
|
+
.card p.strong{color:var(--text);font-size:1.08rem;font-weight:600}
|
|
67
|
+
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
|
|
68
|
+
.card-top h3{margin:0}
|
|
69
|
+
.badge{flex:none;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
|
|
70
|
+
.badge-strong{background:var(--accent);color:var(--on-accent)}
|
|
71
|
+
.big-card{padding:28px}
|
|
72
|
+
.big-card p{color:var(--text);font-size:1.12rem;line-height:1.55}
|
|
73
|
+
.emoji{display:block;font-size:1.9rem;line-height:1;margin-bottom:14px}
|
|
74
|
+
.evidence{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
|
|
75
|
+
.ev{display:inline-flex;align-items:center;gap:6px;max-width:100%;font:500 .72rem/1.4 "JetBrains Mono",ui-monospace,monospace;padding:4px 9px;border-radius:8px;background:var(--surface-2);color:var(--muted);text-decoration:none;border:1px solid var(--border)}
|
|
76
|
+
.ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
77
|
+
a.ev:hover{color:var(--accent);border-color:var(--accent)}
|
|
78
|
+
.ev-lg{font-size:.92rem;padding:9px 14px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
|
|
79
|
+
|
|
80
|
+
/* pessoas e jornadas */
|
|
81
|
+
.actor{display:flex;gap:16px;align-items:flex-start}
|
|
82
|
+
.avatar,.logo{flex:none;display:grid;place-items:center;font-weight:800;color:#fff;letter-spacing:-.02em}
|
|
83
|
+
.avatar{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,hsl(var(--ah) 72% 60%),hsl(calc(var(--ah) + 45) 72% 48%))}
|
|
84
|
+
.flow{margin-bottom:28px}
|
|
85
|
+
.flow h3{font-size:1.15rem;margin:0 0 14px}
|
|
86
|
+
.chain{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
|
|
87
|
+
.chain li{display:flex;align-items:center;gap:10px}
|
|
88
|
+
.chain li:not(:last-child)::after{content:"→";color:var(--accent);font-weight:800;font-size:1.1rem}
|
|
89
|
+
.step{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:.95rem;line-height:1.35}
|
|
90
|
+
.step b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:.8rem}
|
|
91
|
+
|
|
92
|
+
/* vocabulário */
|
|
93
|
+
.flips{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
|
|
94
|
+
.flip{perspective:1000px;border:0;padding:0;background:none;cursor:pointer;text-align:left;min-height:170px}
|
|
95
|
+
.flip-inner{position:relative;display:block;width:100%;height:100%;min-height:170px;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
|
|
96
|
+
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
|
|
97
|
+
.face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:20px;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:auto}
|
|
98
|
+
.front{background:var(--surface)}
|
|
99
|
+
.front strong{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
|
|
100
|
+
.front small{color:var(--muted);font-size:.76rem;font-weight:600}
|
|
101
|
+
.back{background:var(--accent);color:var(--on-accent);border-color:transparent;transform:rotateY(180deg);font-size:.95rem;line-height:1.5;justify-content:center}
|
|
102
|
+
.back code{background:rgb(255 255 255/.2);color:inherit}
|
|
103
|
+
.flip:hover .front{border-color:var(--accent)}
|
|
104
|
+
.quiz{gap:12px}
|
|
105
|
+
.quiz-q{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px 20px;box-shadow:var(--shadow)}
|
|
106
|
+
.quiz-q .q{font-weight:700;margin:0 0 10px;font-size:1.04rem}
|
|
107
|
+
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
|
|
108
|
+
.opt{text-align:left;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2);cursor:pointer;line-height:1.4;font-size:.92rem;transition:border-color .2s,background .2s}
|
|
109
|
+
.opt:hover:not(:disabled){border-color:var(--accent)}
|
|
110
|
+
.opt:disabled{cursor:default}
|
|
111
|
+
.opt.is-right{border-color:hsl(150 60% 42%);background:hsl(150 60% 42% / .14)}
|
|
112
|
+
.opt.is-wrong{border-color:hsl(0 72% 56%);background:hsl(0 72% 56% / .12)}
|
|
113
|
+
.feedback{margin:0;font-weight:700;font-size:.92rem}
|
|
114
|
+
.feedback:not(:empty){margin-top:10px}
|
|
115
|
+
.score{font-weight:800;color:var(--accent);font-size:1.1rem;min-height:1.6em;margin:18px 0 0}
|
|
116
|
+
|
|
117
|
+
/* regras, stack, módulos */
|
|
118
|
+
.rule{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
|
|
119
|
+
.rule-num{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--accent)}
|
|
120
|
+
.tech-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
|
|
121
|
+
.tech-head strong{display:block;font-size:1.06rem;line-height:1.25}
|
|
122
|
+
.tech-head small{color:var(--muted);font-size:.78rem}
|
|
123
|
+
.logo{width:46px;height:46px;border-radius:14px;font-size:.95rem;background:linear-gradient(135deg,hsl(var(--th) 68% 56%),hsl(calc(var(--th) + 35) 68% 44%))}
|
|
124
|
+
.diagram{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow);overflow:auto;max-height:58vh}
|
|
125
|
+
.diagram pre.mermaid{width:100%;background:none;padding:0;margin:0;font-family:inherit;text-align:center;white-space:pre-wrap}
|
|
126
|
+
.diagram svg{display:block;margin:0 auto;width:100%;height:auto;max-height:calc(58vh - 44px)}
|
|
127
|
+
.module{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:18px;align-items:center;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
|
|
128
|
+
.module strong{display:block;margin-bottom:4px}
|
|
129
|
+
.module code{background:var(--accent-soft);color:var(--accent);font-size:.78rem}
|
|
130
|
+
.module p{margin:0;color:var(--muted)}
|
|
131
|
+
|
|
132
|
+
/* mãos à obra */
|
|
133
|
+
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
|
|
134
|
+
.pills li{padding:8px 16px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-weight:600;font-size:.92rem}
|
|
135
|
+
.pills li::before{content:"✓";color:var(--accent);margin-right:8px;font-weight:800}
|
|
136
|
+
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:10px}
|
|
137
|
+
.steps li{counter-increment:s;display:flex;gap:16px;align-items:center;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
|
|
138
|
+
.steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.9rem}
|
|
139
|
+
.terminal{background:var(--term-bg);color:var(--term-text);border-radius:20px;padding:6px 6px 10px;box-shadow:var(--shadow);border:1px solid var(--border)}
|
|
140
|
+
.term-bar{display:flex;gap:7px;padding:10px 14px}
|
|
141
|
+
.term-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
|
|
142
|
+
.cmd{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid rgb(255 255 255/.07)}
|
|
143
|
+
.cmd code{background:none;color:inherit;font-size:.92rem;padding:0;word-break:break-all}
|
|
144
|
+
.cmd code::before{content:"$ ";color:hsl(var(--h) 75% 66%)}
|
|
145
|
+
.cmd p{margin:4px 0 0;color:rgb(255 255 255/.55);font-size:.86rem}
|
|
146
|
+
.cmd p code{background:rgb(255 255 255/.08);padding:.1em .4em}.cmd p code::before{content:none}
|
|
147
|
+
.copy{border:1px solid rgb(255 255 255/.16);background:transparent;color:inherit;border-radius:9px;padding:6px 12px;font-size:.78rem;font-weight:600;cursor:pointer}
|
|
148
|
+
.copy:hover{background:rgb(255 255 255/.08)}
|
|
149
|
+
.env code{font-size:.84rem;background:var(--accent-soft);color:var(--accent)}
|
|
150
|
+
|
|
151
|
+
/* tour */
|
|
152
|
+
.route{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:r}
|
|
153
|
+
.route li{counter-increment:r;display:flex;align-items:center;gap:8px}
|
|
154
|
+
.route li::before{content:counter(r);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.75rem;font-weight:800}
|
|
155
|
+
.route code{background:var(--surface);border:1px solid var(--border)}
|
|
156
|
+
.tour-step{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;margin-top:8px}
|
|
157
|
+
.bignum{font-size:clamp(5rem,3rem + 7vw,10rem);font-weight:800;line-height:.82;letter-spacing:-.06em;color:var(--accent);opacity:.22}
|
|
158
|
+
.stops{display:flex;gap:6px;margin-top:32px}
|
|
159
|
+
.stops i{width:28px;height:6px;border-radius:99px;background:var(--track);transition:background .3s}
|
|
160
|
+
.stops i.on{background:var(--accent)}
|
|
161
|
+
|
|
162
|
+
/* cuidados, decisões, missão */
|
|
163
|
+
.gotcha{display:grid;grid-template-columns:auto 1fr;gap:16px;border-left:4px solid var(--accent)}
|
|
164
|
+
.gotcha .emoji{margin:0}
|
|
165
|
+
.split{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:14px}
|
|
166
|
+
.split p{color:var(--text)}
|
|
167
|
+
.task{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow);transition:opacity .25s,border-color .25s}
|
|
168
|
+
.task:hover{border-color:var(--accent)}
|
|
169
|
+
.task input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:1px 0 0;border-radius:9px;border:2px solid var(--border);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
|
|
170
|
+
.task input:checked{background:var(--accent);border-color:var(--accent)}
|
|
171
|
+
.task input:checked::after{content:"✓";color:var(--on-accent);font-weight:800;font-size:.9rem}
|
|
172
|
+
.task strong{display:block;font-size:1.05rem}
|
|
173
|
+
.task-desc{display:block;color:var(--muted);margin-top:2px}
|
|
174
|
+
.task:has(input:checked){opacity:.6}
|
|
175
|
+
.task:has(input:checked) strong{text-decoration:line-through}
|
|
176
|
+
|
|
177
|
+
/* boas-vindas e final */
|
|
178
|
+
.welcome .hi{font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);font-weight:700;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:10px}
|
|
179
|
+
.wave{display:inline-block;font-size:1.6em;transform-origin:70% 70%}
|
|
180
|
+
.slide.is-active .wave{animation:wave 2s ease-in-out .4s 1}
|
|
181
|
+
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
|
|
182
|
+
.welcome .title{font-size:clamp(2.4rem,min(1.4rem + 4.6vw,9vh),5.2rem);max-width:16ch}
|
|
183
|
+
.welcome .lede{margin-bottom:24px}
|
|
184
|
+
.grad{background:linear-gradient(110deg,hsl(var(--h) 85% var(--al)),hsl(calc(var(--h) + 70) 85% var(--al)));-webkit-background-clip:text;background-clip:text;color:transparent}
|
|
185
|
+
.tagline{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);font-weight:600;margin:0 0 14px;max-width:44ch;text-wrap:balance}
|
|
186
|
+
.cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:16px;border:0;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 10px 28px hsl(var(--h) 80% 50% / .35);transition:transform .2s,box-shadow .2s}
|
|
187
|
+
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px hsl(var(--h) 80% 50% / .42)}
|
|
188
|
+
.cta .arrow{transition:transform .2s}.cta:hover .arrow{transform:translateX(3px)}
|
|
189
|
+
.journey{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
|
|
190
|
+
.journey button{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--surface);border:1px solid var(--border);cursor:pointer;font-size:.86rem;font-weight:600;transition:border-color .2s,transform .2s}
|
|
191
|
+
.journey button:hover{border-color:hsl(var(--ch) var(--as) var(--al));transform:translateY(-1px)}
|
|
192
|
+
.journey .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.72rem;font-weight:800;background:hsl(var(--ch) 85% 55% / .15);color:hsl(var(--ch) var(--as) var(--al))}
|
|
193
|
+
.journey-wrap{margin-top:clamp(20px,4vh,44px)}
|
|
194
|
+
.meta{margin-top:20px}
|
|
195
|
+
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:26px;color:var(--muted);font-size:.84rem}
|
|
196
|
+
.meta a{color:inherit}
|
|
197
|
+
.finale{text-align:center}
|
|
198
|
+
.finale .title,.finale .lede{margin-left:auto;margin-right:auto}
|
|
199
|
+
.party{display:block;font-size:clamp(3.5rem,2.5rem + 4vw,6rem);line-height:1;margin-bottom:16px}
|
|
200
|
+
.slide.is-active .party{animation:pop .8s cubic-bezier(.2,1.6,.4,1) both}
|
|
201
|
+
@keyframes pop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
|
|
202
|
+
.recap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0 auto 22px;max-width:760px}
|
|
203
|
+
.recap li{padding:6px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:.86rem;font-weight:600}
|
|
204
|
+
.recap li::before{content:"✓ ";color:hsl(var(--ch) var(--as) var(--al));font-weight:800}
|
|
205
|
+
.task-count{color:var(--muted);font-weight:600;margin:0 0 26px}
|
|
206
|
+
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
|
|
207
|
+
.ghost{padding:15px 22px;border-radius:16px;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer}
|
|
208
|
+
.ghost:hover{border-color:var(--accent)}
|
|
209
|
+
|
|
210
|
+
/* ── controles ── */
|
|
211
|
+
.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 24px 20px;z-index:3}
|
|
212
|
+
.controls [data-prev]{justify-self:start}
|
|
213
|
+
.controls [data-next]{justify-self:end}
|
|
214
|
+
.nav-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,opacity .2s}
|
|
215
|
+
.nav-btn:hover:not(:disabled){transform:translateY(-1px)}
|
|
216
|
+
.nav-btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
|
|
217
|
+
.nav-btn:disabled{opacity:0;visibility:hidden}
|
|
218
|
+
.where{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.4}
|
|
219
|
+
.where strong{color:var(--text);font-size:.9rem}
|
|
220
|
+
.hint.is-hidden{display:none}
|
|
221
|
+
|
|
222
|
+
/* índice */
|
|
223
|
+
.overview{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;padding:28px 24px 56px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
|
|
224
|
+
.overview.is-open{opacity:1;visibility:visible;pointer-events:auto}
|
|
225
|
+
.overview-inner{max-width:1040px;margin:0 auto}
|
|
226
|
+
.overview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
|
|
227
|
+
.overview-head h2{margin:0;font-size:1.6rem;letter-spacing:-.02em}
|
|
228
|
+
.ov-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
|
|
229
|
+
.ov-chapter{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
|
|
230
|
+
.ov-chapter h3{display:flex;gap:10px;align-items:center;margin:0 0 8px;font-size:1rem}
|
|
231
|
+
.ov-chapter h3 .n{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;font-size:.78rem;background:hsl(var(--ch) 85% 55% / .15);color:hsl(var(--ch) var(--as) var(--al))}
|
|
232
|
+
.ov-chapter button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:10px;border:0;background:none;cursor:pointer;color:var(--muted);font-size:.9rem;line-height:1.35}
|
|
233
|
+
.ov-chapter button:hover,.ov-chapter button.is-current{background:var(--surface-2);color:var(--text)}
|
|
234
|
+
.ov-chapter button.is-current{font-weight:700}
|
|
235
|
+
|
|
236
|
+
/* aviso de retomada */
|
|
237
|
+
.toast{position:fixed;left:50%;bottom:96px;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px);padding:12px 14px 12px 18px;border-radius:16px;background:var(--text);color:var(--bg);box-shadow:0 12px 40px rgb(0 0 0/.25);font-weight:600;font-size:.92rem;transform:translate(-50%,20px);opacity:0;visibility:hidden;transition:.35s cubic-bezier(.2,.7,.2,1)}
|
|
238
|
+
.toast.is-open{transform:translate(-50%,0);opacity:1;visibility:visible}
|
|
239
|
+
.toast button{border:0;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;background:rgb(127 127 127/.25);color:inherit}
|
|
240
|
+
.toast button.yes{background:var(--bg);color:var(--text)}
|
|
241
|
+
|
|
242
|
+
/* confete */
|
|
243
|
+
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
|
|
244
|
+
.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;animation:fall linear forwards}
|
|
245
|
+
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}
|
|
246
|
+
|
|
247
|
+
/* páginas de aviso */
|
|
248
|
+
.solo-wrap{min-height:100%;display:grid;place-items:center;padding:32px 16px;--h:255;--accent:hsl(var(--h) var(--as) var(--al));--accent-soft:hsl(var(--h) 85% 55% / .13)}
|
|
249
|
+
.solo-card{max-width:640px;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px;box-shadow:var(--shadow)}
|
|
250
|
+
.solo-card h1{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);letter-spacing:-.03em;line-height:1.15;margin:0 0 12px}
|
|
251
|
+
.solo-card p{color:var(--muted);margin:0 0 20px}
|
|
252
|
+
.prompt{display:flex;gap:10px;align-items:flex-start}
|
|
253
|
+
.prompt pre{flex:1;white-space:pre-wrap;margin:0}
|
|
254
|
+
.prompt .copy{color:var(--text);border-color:var(--border)}
|
|
255
|
+
|
|
256
|
+
/* ── telas pequenas ── */
|
|
257
|
+
@media (max-width:760px){
|
|
258
|
+
.topbar{padding:12px 16px;gap:10px}
|
|
259
|
+
.brand{display:none}
|
|
260
|
+
.slide-inner{padding:12px 16px 28px}
|
|
261
|
+
.controls{padding:10px 16px 14px;gap:8px}
|
|
262
|
+
.nav-btn{padding:11px 14px}
|
|
263
|
+
.nav-btn .txt,.hint{display:none}
|
|
264
|
+
.rule,.tour-step{grid-template-columns:1fr;gap:6px}
|
|
265
|
+
.module{grid-template-columns:1fr;gap:6px}
|
|
266
|
+
.bignum{font-size:4rem}
|
|
267
|
+
.journey-wrap{margin-top:32px}
|
|
268
|
+
.solo-card{padding:24px}
|
|
269
|
+
}
|
|
270
|
+
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
|
|
271
|
+
`;
|
|
272
|
+
exports.JS = `
|
|
273
|
+
(function(){
|
|
274
|
+
var root=document.documentElement;
|
|
275
|
+
var KEY='onboarding-kit:'+location.pathname+':';
|
|
276
|
+
function sget(k){try{return localStorage.getItem(KEY+k)}catch(e){return null}}
|
|
277
|
+
function sset(k,v){try{localStorage.setItem(KEY+k,v)}catch(e){}}
|
|
278
|
+
function fill(t,o){return t.replace(/\\{(\\w+)\\}/g,function(_,k){return o[k]})}
|
|
279
|
+
|
|
280
|
+
var theme=sget('theme'); if(theme) root.setAttribute('data-theme',theme);
|
|
281
|
+
function isDark(){var t=root.getAttribute('data-theme');return t?t==='dark':matchMedia('(prefers-color-scheme: dark)').matches}
|
|
282
|
+
|
|
283
|
+
var slides=[].slice.call(document.querySelectorAll('.slide'));
|
|
284
|
+
var n=slides.length,cur=-1,celebrated=false;
|
|
285
|
+
var segs=[].slice.call(document.querySelectorAll('.seg'));
|
|
286
|
+
var $=function(id){return document.getElementById(id)};
|
|
287
|
+
var prevBtn=document.querySelector('[data-prev]'),nextBtn=document.querySelector('[data-next]');
|
|
288
|
+
var overview=$('ok-overview'),toast=$('ok-toast'),hint=$('ok-hint');
|
|
289
|
+
|
|
290
|
+
function go(i){
|
|
291
|
+
if(!n) return;
|
|
292
|
+
i=Math.max(0,Math.min(n-1,i|0)); if(i===cur) return;
|
|
293
|
+
slides.forEach(function(s,j){var on=j===i;s.classList.toggle('is-active',on);s.classList.toggle('is-before',j<i);s.setAttribute('aria-hidden',on?'false':'true');if('inert' in s)s.inert=!on});
|
|
294
|
+
cur=i;
|
|
295
|
+
var s=slides[i],inner=s.querySelector('.slide-inner'); if(inner) inner.scrollTop=0;
|
|
296
|
+
segs.forEach(function(g){var st=+g.dataset.start,c=+g.dataset.count,p=i<st?0:i>=st+c?1:(i-st+1)/c;g.firstElementChild.style.width=(p*100)+'%';g.classList.toggle('is-current',i>=st&&i<st+c)});
|
|
297
|
+
$('ok-chapter').textContent=s.dataset.chapterName;
|
|
298
|
+
$('ok-count').textContent=(i+1)+' / '+n;
|
|
299
|
+
prevBtn.disabled=i===0; nextBtn.disabled=i===n-1;
|
|
300
|
+
[].forEach.call(document.querySelectorAll('.ov-chapter [data-go]'),function(b){b.classList.toggle('is-current',+b.dataset.go===i)});
|
|
301
|
+
try{history.replaceState(null,'','#/'+(i+1))}catch(e){}
|
|
302
|
+
sset('slide',String(i));
|
|
303
|
+
if(s.dataset.kind==='finale'&&!celebrated){celebrated=true;confetti()}
|
|
304
|
+
}
|
|
305
|
+
function step(d){go(cur+d);if(hint)hint.classList.add('is-hidden');closeToast()}
|
|
306
|
+
function openOverview(open){if(!overview)return;overview.classList.toggle('is-open',open);overview.setAttribute('aria-hidden',open?'false':'true');if(open){var c=overview.querySelector('.is-current')||overview.querySelector('button');c&&c.focus()}}
|
|
307
|
+
function closeToast(){if(toast)toast.classList.remove('is-open')}
|
|
308
|
+
|
|
309
|
+
document.addEventListener('click',function(e){
|
|
310
|
+
var el=e.target.closest('button,[data-go]'); if(!el) return;
|
|
311
|
+
if(el.hasAttribute('data-next')) return step(1);
|
|
312
|
+
if(el.hasAttribute('data-prev')) return step(-1);
|
|
313
|
+
if(el.hasAttribute('data-go')){openOverview(false);closeToast();return go(+el.dataset.go)}
|
|
314
|
+
if(el.hasAttribute('data-overview')) return openOverview(true);
|
|
315
|
+
if(el.hasAttribute('data-close')) return openOverview(false);
|
|
316
|
+
if(el.hasAttribute('data-theme-toggle')){var nt=isDark()?'light':'dark';root.setAttribute('data-theme',nt);sset('theme',nt);return}
|
|
317
|
+
if(el.hasAttribute('data-resume')){closeToast();return go(+el.dataset.resume)}
|
|
318
|
+
if(el.hasAttribute('data-dismiss')) return closeToast();
|
|
319
|
+
if(el.hasAttribute('data-copy')){
|
|
320
|
+
var txt=el.dataset.copy,orig=el.textContent;
|
|
321
|
+
if(navigator.clipboard) navigator.clipboard.writeText(txt).then(function(){el.textContent=el.dataset.done||'✓';setTimeout(function(){el.textContent=orig},1600)});
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
if(el.classList.contains('flip')){var f=el.classList.toggle('is-flipped');el.setAttribute('aria-pressed',f?'true':'false');return}
|
|
325
|
+
if(el.classList.contains('opt')){
|
|
326
|
+
var q=el.closest('[data-quiz]'); if(!q||q.dataset.done) return;
|
|
327
|
+
var right=el.dataset.correct==='1'; q.dataset.done=right?'right':'wrong';
|
|
328
|
+
[].forEach.call(q.querySelectorAll('.opt'),function(o){o.disabled=true;if(o.dataset.correct==='1')o.classList.add('is-right')});
|
|
329
|
+
if(!right) el.classList.add('is-wrong');
|
|
330
|
+
q.querySelector('.feedback').textContent=right?q.dataset.right:q.dataset.wrong;
|
|
331
|
+
var slide=q.closest('.slide'),all=slide.querySelectorAll('[data-quiz]'),done=slide.querySelectorAll('[data-quiz][data-done]'),ok=slide.querySelectorAll('[data-quiz][data-done="right"]');
|
|
332
|
+
var score=slide.querySelector('[data-quiz-score]');
|
|
333
|
+
if(score&&done.length===all.length) score.textContent=fill(score.dataset.template,{right:ok.length,total:all.length});
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
|
|
337
|
+
document.addEventListener('keydown',function(e){
|
|
338
|
+
if(e.metaKey||e.ctrlKey||e.altKey||e.target.closest('input,textarea,select')) return;
|
|
339
|
+
var k=e.key;
|
|
340
|
+
if(overview&&overview.classList.contains('is-open')){if(k==='Escape'||k==='o'){e.preventDefault();openOverview(false)}return}
|
|
341
|
+
if(k===' '&&e.target.closest('button,a,label')) return;
|
|
342
|
+
if(k==='ArrowRight'||k==='PageDown'||(k===' '&&!e.shiftKey)){e.preventDefault();step(1)}
|
|
343
|
+
else if(k==='ArrowLeft'||k==='PageUp'||(k===' '&&e.shiftKey)){e.preventDefault();step(-1)}
|
|
344
|
+
else if(k==='Home'){e.preventDefault();go(0)}
|
|
345
|
+
else if(k==='End'){e.preventDefault();go(n-1)}
|
|
346
|
+
else if(k==='o'){e.preventDefault();openOverview(true)}
|
|
347
|
+
});
|
|
348
|
+
|
|
349
|
+
var stage=$('ok-stage'),sx=0,sy=0;
|
|
350
|
+
if(stage){
|
|
351
|
+
stage.addEventListener('touchstart',function(e){sx=e.touches[0].clientX;sy=e.touches[0].clientY},{passive:true});
|
|
352
|
+
stage.addEventListener('touchend',function(e){var dx=e.changedTouches[0].clientX-sx,dy=e.changedTouches[0].clientY-sy;if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)*1.5)step(dx<0?1:-1)},{passive:true});
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// tarefas da primeira missão
|
|
356
|
+
var tasks={};try{tasks=JSON.parse(sget('tasks')||'{}')}catch(e){}
|
|
357
|
+
var boxes=[].slice.call(document.querySelectorAll('[data-task]'));
|
|
358
|
+
function countTasks(){var el=document.querySelector('[data-task-count]');if(!el)return;var d=boxes.filter(function(b){return b.checked}).length;el.textContent=fill(el.dataset.template,{done:d,total:boxes.length})}
|
|
359
|
+
boxes.forEach(function(b){b.checked=!!tasks[b.dataset.task];b.addEventListener('change',function(){tasks[b.dataset.task]=b.checked;sset('tasks',JSON.stringify(tasks));countTasks()})});
|
|
360
|
+
countTasks();
|
|
361
|
+
|
|
362
|
+
function confetti(){
|
|
363
|
+
if(matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
364
|
+
var box=document.createElement('div');box.className='confetti';box.setAttribute('aria-hidden','true');
|
|
365
|
+
for(var i=0;i<120;i++){var p=document.createElement('i');p.style.left=(Math.random()*100)+'%';p.style.background='hsl('+Math.floor(Math.random()*360)+' 85% 60%)';p.style.setProperty('--dx',(Math.random()*240-120)+'px');p.style.setProperty('--r',(Math.random()*900-450)+'deg');p.style.animationDuration=(2.4+Math.random()*2.2)+'s';p.style.animationDelay=(Math.random()*.7)+'s';box.appendChild(p)}
|
|
366
|
+
document.body.appendChild(box);setTimeout(function(){box.remove()},6000);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
if(n){
|
|
370
|
+
var m=/^#\\/(\\d+)$/.exec(location.hash),saved=parseInt(sget('slide')||'0',10)||0;
|
|
371
|
+
if(m){go(+m[1]-1)}else{go(0);if(saved>0&&saved<n&&toast){toast.querySelector('span').textContent=fill(toast.dataset.template,{n:saved+1});toast.querySelector('[data-resume]').dataset.resume=saved;toast.classList.add('is-open');setTimeout(closeToast,9000)}}
|
|
372
|
+
window.addEventListener('hashchange',function(){var h=/^#\\/(\\d+)$/.exec(location.hash);if(h)go(+h[1]-1)});
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
window.__okMermaid=function(){
|
|
376
|
+
if(!window.mermaid) return;
|
|
377
|
+
mermaid.initialize({startOnLoad:false,theme:isDark()?'dark':'neutral',securityLevel:'strict',fontFamily:'Plus Jakarta Sans, system-ui, sans-serif'});
|
|
378
|
+
mermaid.run({querySelector:'pre.mermaid'});
|
|
379
|
+
};
|
|
380
|
+
})();
|
|
381
|
+
`;
|