/* ========================================================================== Sistema editorial Stickybit — Caderno de pesquisa e Telemetria Uma tipografia, uma estrutura, um conjunto de componentes. Cada seção só troca as cores, pelo atributo data-secao no . ========================================================================== */ :root { --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --display: "Instrument Serif", "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --gutter: clamp(16px, 3.5vw, 56px); color-scheme: light; } /* ---------- Tema: Caderno de pesquisa (verde-noite, lima, índigo) ---------- */ [data-secao="caderno"] { --paper: #f1f2ee; --ink: #111413; --ink-soft: #565c58; --hair: #d3d7cf; --wash: #e2e6de; --night: #0e1311; --night-2: #161c19; --chalk: #ecebe4; --chalk-soft: #a9ada5; --line-dark: rgba(236, 235, 228, 0.22); /* nomes históricos, usados pelo CSS próprio de cada entrada */ --lime: #c8f54a; --coral: #ff6a45; --blue: #3b30e6; --blue-tint: #dddcf7; /* papéis */ --accent-dark: var(--lime); /* destaque sobre o escuro */ --accent-dark-2: var(--coral); --accent-light: var(--blue); /* destaque e link sobre o claro */ --accent-tint: var(--blue-tint); --alert: var(--coral); --s1: var(--blue); --s2: var(--coral); --s1-dark: var(--lime); --s2-dark: var(--coral); } /* ---------- Tema: Telemetria (paleta A · painel de instrumentos) ---------- */ [data-secao="telemetria"] { --paper: #f2f4f7; --ink: #0f1726; --ink-soft: #52607a; --hair: #d5dbe5; --wash: #e4e9f0; --night: #0b1320; --night-2: #111c2e; --chalk: #e6ecf5; --chalk-soft: #93a1b8; --line-dark: rgba(230, 236, 245, 0.18); --amber: #ffb020; --cyan: #3fd0c9; --cobalt: #1f5fbf; --cobalt-tint: #dbe6f7; --signal: #e8553a; --accent-dark: var(--amber); --accent-dark-2: var(--cyan); --accent-light: var(--cobalt); --accent-tint: var(--cobalt-tint); --alert: var(--signal); /* séries de gráfico validadas (contraste e daltonismo) */ --s1: #1f5fbf; --s2: #d97a00; /* sobre o claro */ --s1-dark: #c8820c; --s2-dark: #1fa39d; /* sobre o escuro */ } /* ---------- Tema: Pós-quântico (paleta B · mineral quente) ---------- */ [data-secao="pos-quantico"] { --paper: #f3f1ec; --ink: #1b1a19; --ink-soft: #5f5a52; --hair: #dcd7cc; --wash: #e7e2d8; --night: #1a1a1c; --night-2: #242426; --chalk: #efece6; --chalk-soft: #a8a39a; --line-dark: rgba(239, 236, 230, 0.18); --sinal: #ff6a2b; --ceu: #7fb3e6; --ferrugem: #c2410c; --ferrugem-tint: #f6ddd0; --aco: #1f6fae; --accent-dark: var(--sinal); --accent-dark-2: var(--ceu); --accent-light: var(--ferrugem); --accent-tint: var(--ferrugem-tint); --alert: #d7263d; /* séries de gráfico validadas (contraste e daltonismo) */ --s1: #c2410c; --s2: #1f6fae; /* sobre o claro */ --s1-dark: #e0561f; --s2-dark: #3f8fd0; /* sobre o escuro */ } /* ---------- Base ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--sans); padding-bottom: 64px; -webkit-font-smoothing: antialiased; } .wrap { max-width: calc(1240px + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); } p { margin: 0; } a { color: inherit; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; } code { font: 0.86em var(--mono); background: var(--wash); padding: 1px 5px; border-radius: 4px; } .kicker { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } h1 { font: 400 clamp(50px, 7vw, 112px)/0.92 var(--display); letter-spacing: -0.02em; margin: 14px 0 0; text-wrap: balance; } h2 { font: 400 clamp(38px, 5vw, 68px)/1 var(--display); letter-spacing: -0.015em; margin: 8px 0 0; text-wrap: balance; } h3 { font: 600 19px/1.25 var(--sans); margin: 0; } .prose { max-width: 40rem; display: grid; gap: 1em; margin-top: 16px; } .prose strong { font-weight: 600; } .prose a, .ed-link { color: var(--accent-light); text-decoration-thickness: 1px; } .prose a:hover, .ed-link:hover { text-decoration-thickness: 2px; } section.band { margin-top: clamp(64px, 8vw, 112px); } .with-fig { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; } @media (max-width: 900px) { .with-fig { grid-template-columns: 1fr; } } figure { margin: 0; } figure svg { width: 100%; height: auto; display: block; } figcaption { font: 13px/1.5 var(--sans); color: var(--ink-soft); margin-top: 12px; } .note { margin-top: 20px; font: 14px/1.5 var(--sans); color: var(--ink-soft); max-width: 46rem; border-left: 2px solid var(--accent-light); padding-left: 14px; } /* ---------- Topo escuro (hero) ---------- */ .hero { background: var(--night); color: var(--chalk); padding-top: env(safe-area-inset-top, 0px); } .bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-block: 22px; border-bottom: 1px solid var(--line-dark); } .bar b { font: 600 17px var(--sans); } .bar b a { text-decoration: none; } .bar b a:hover { color: var(--accent-dark); } .bar .sep { color: var(--chalk-soft); font-weight: 400; } .bar span.meta { font: 12px var(--mono); color: var(--chalk-soft); } /* pílula de volta para a seção ("← Caderno", "← Telemetria") */ .sec-link, .cad-link { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font: 600 14px var(--sans); color: var(--accent-dark); text-decoration: none; border: 1px solid var(--accent-dark); border-radius: 999px; padding: 4px 14px; vertical-align: 2px; } .bar b a.sec-link:hover, .bar b a.cad-link:hover { background: var(--accent-dark); color: var(--night); } .lang-link { font: 500 12px var(--mono); color: var(--chalk-soft); text-decoration: none; margin-left: 14px; border-bottom: 1px solid transparent; } .lang-link:hover { color: var(--chalk); border-bottom-color: var(--chalk-soft); } .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(44px, 6vw, 80px) clamp(56px, 7vw, 96px); align-items: center; } .hero .kicker { color: var(--accent-dark); } .hero h1 em { color: var(--accent-dark); } .hero .deck { font: 400 clamp(18px, 1.6vw, 21px)/1.55 var(--sans); color: var(--chalk-soft); max-width: 34rem; margin-top: 22px; } .hero .deck b { color: var(--chalk); font-weight: 600; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } } /* ---------- Espécime (painel interativo no topo) ---------- */ .lab { background: var(--night-2); border: 1px solid var(--line-dark); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); } .lab-title { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-soft); } .lab-title b { color: var(--chalk); font-weight: 500; } .lab-foot { margin-top: 14px; font: 12px/1.5 var(--sans); color: var(--chalk-soft); } .tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .tile { border-top: 1px solid var(--line-dark); padding-top: 8px; } .tile b { display: block; font: 400 34px/1 var(--display); color: var(--chalk); font-variant-numeric: tabular-nums; } .tile b.hi { color: var(--accent-dark); } .tile span { display: block; margin-top: 4px; font: 12px/1.35 var(--sans); color: var(--chalk-soft); } .tile.bad b { color: var(--alert); } @media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .choice { display: grid; gap: 6px; margin-top: 14px; } .choice button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left; font: 500 14px/1.35 var(--sans); color: var(--chalk-soft); background: transparent; border: 1px solid var(--line-dark); border-radius: 10px; padding: 9px 12px; cursor: pointer; } .choice button i { font: italic 400 20px/1 var(--display); color: var(--chalk-soft); } .choice button[aria-pressed="true"] { border-color: var(--accent-dark); color: var(--chalk); background: color-mix(in srgb, var(--accent-dark) 9%, transparent); } .choice button[aria-pressed="true"] i { color: var(--accent-dark); } .range { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 13px var(--sans); color: var(--chalk-soft); } .range input { width: 100%; accent-color: var(--accent-dark); } .range output { font: 500 14px var(--mono); color: var(--chalk); min-width: 3.5em; text-align: right; } .btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--sans); border-radius: 999px; padding: 10px 20px; border: 1px solid var(--accent-dark); color: var(--accent-dark); background: transparent; text-decoration: none; cursor: pointer; } .btn.fill { background: var(--accent-dark); color: var(--night); } .btn:hover { background: var(--accent-dark); color: var(--night); } /* ---------- Listas numeradas, riscos, palavras ---------- */ .principles { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); counter-reset: p; } .principles li { counter-increment: p; border-top: 1px solid var(--ink); padding-block: 14px 26px; display: grid; gap: 6px; align-content: start; } .principles li::before { content: counter(p); font: italic 400 44px/1 var(--display); color: var(--accent-light); } .principles p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); } @media (max-width: 700px) { .principles { grid-template-columns: 1fr; } } .risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: 26px; } .risks div { border-top: 1px solid var(--ink); padding-block: 14px 24px; display: grid; gap: 6px; align-content: start; } .risks p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); } @media (max-width: 700px) { .risks { grid-template-columns: 1fr; } } .words { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); } .words div { border-top: 1px solid var(--hair); padding-block: 12px 18px; } .words b { display: block; font: 600 15px var(--sans); } .words p { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px; } @media (max-width: 800px) { .words { grid-template-columns: 1fr; } } /* ---------- Tabelas ---------- */ table.data { width: 100%; border-collapse: collapse; margin-top: 28px; font: 15px/1.4 var(--sans); } table.data th, table.data td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; } table.data th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border-bottom-color: var(--ink); } table.data td.n { font: 14px var(--mono); white-space: nowrap; } .tscroll { overflow-x: auto; } .tscroll table { min-width: 640px; } /* ---------- "Ver também" (cartões para páginas vizinhas) ---------- */ .see-also { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; } .see-also a { display: grid; gap: 6px; text-decoration: none; border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--paper) 70%, white); } .see-also a:hover { border-color: var(--accent-light); } .see-also b { font: 400 26px/1.05 var(--display); } .see-also b em { color: var(--accent-light); } .see-also span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); } .see-also small { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Rodapé da página ---------- */ .back { margin-top: 72px; font: 600 15px var(--sans); } .back a { color: var(--accent-light); } .sources { font: 14px/1.6 var(--sans); color: var(--ink-soft); margin-top: 40px; border-top: 1px solid var(--hair); padding-top: 18px; } .sources ul { margin: 8px 0 0; padding-left: 1.1em; }