/* ========================================================================== 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 */ } /* ---------- Tema: E-commerce (vitrine · berinjela, etiqueta amarela, violeta) ---------- */ [data-secao="ecommerce"] { --paper: #f7f4ee; --ink: #1c1622; --ink-soft: #5d5566; --hair: #ded8cf; --wash: #ebe6dd; --night: #17131f; --night-2: #211b2c; --chalk: #f3eee6; --chalk-soft: #b3a9b9; --line-dark: rgba(243, 238, 230, 0.18); --etiqueta: #ffcf3f; --lilas: #b69cff; --violeta: #6a3fc4; --violeta-tint: #e6ddf7; --accent-dark: var(--etiqueta); --accent-dark-2: var(--lilas); --accent-light: var(--violeta); --accent-tint: var(--violeta-tint); --alert: #e0453a; /* séries de gráfico validadas (contraste e daltonismo) */ --s1: #6a3fc4; --s2: #b86e00; /* sobre o claro */ --s1-dark: #8f6de0; --s2-dark: #b8870a; /* sobre o escuro */ } /* ---------- Tema: FHE (paleta C · oceano: petróleo, turquesa, coral) ---------- */ [data-secao="fhe"] { --paper: #eef4f3; --ink: #0c1f24; --ink-soft: #4d6a6f; --hair: #cfdedc; --wash: #dfeceb; --night: #0a2a33; --night-2: #0f3440; --chalk: #e7f2f1; --chalk-soft: #95b3b3; --line-dark: rgba(231, 242, 241, 0.18); --turquesa: #2ec4b6; --coral: #ff7a59; --petroleo: #07766d; --petroleo-tint: #d3ecea; --accent-dark: var(--turquesa); --accent-dark-2: var(--coral); --accent-light: var(--petroleo); --accent-tint: var(--petroleo-tint); --alert: #d24d2f; /* séries de gráfico validadas (contraste e daltonismo) */ --s1: #08958a; --s2: #d24d2f; /* sobre o claro */ --s1-dark: #139d91; --s2-dark: #e0603f; /* sobre o escuro */ } /* ---------- Tema: Home (grafite, papel e latão; a cor fica com as seções) ---------- */ [data-secao="home"] { --paper: #f4f2ed; --ink: #141414; --ink-soft: #5a5953; --hair: #d9d6ce; --wash: #e8e5dd; --night: #141414; --night-2: #1d1d1c; --chalk: #f1eee7; --chalk-soft: #a7a39a; --line-dark: rgba(241, 238, 231, 0.16); --latao: #d8c08a; --latao-escuro: #6d5520; --latao-tint: #ece2c9; --accent-dark: var(--latao); --accent-dark-2: var(--chalk); --accent-light: var(--latao-escuro); --accent-tint: var(--latao-tint); --alert: #b3261e; --s1: #6d5520; --s2: #5a5953; --s1-dark: #d8c08a; --s2-dark: #a7a39a; } /* ---------- Tema: Autor (andreyandrade.com — tinta de caneta e lacre; a mão que assina) ---------- */ [data-secao="autor"] { --paper: #f6f3ec; --ink: #1a1f33; --ink-soft: #555a6e; --hair: #dcd8ce; --wash: #ebe7dd; --night: #16213f; --night-2: #1e2a4d; --chalk: #f4f1ea; --chalk-soft: #aab0c4; --line-dark: rgba(244, 241, 234, 0.18); --tinta: #1d2a5c; --lacre: #a8432b; --lacre-claro: #e8a48f; --lacre-tint: #f1dcd4; --accent-dark: var(--lacre-claro); --accent-dark-2: var(--chalk); --accent-light: var(--lacre); --accent-tint: var(--lacre-tint); --alert: #b3261e; --s1: #a8432b; --s2: #1d2a5c; --s1-dark: #e8a48f; --s2-dark: #aab0c4; } /* ---------- 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: 26px 34px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(18px, 2.4vw, 32px); row-gap: 8px; align-content: start; } /* número grande à frente, texto ao lado (o layout de "Como trabalhamos" da home) */ .principles li::before { content: counter(p); grid-row: 1 / 3; font: italic 400 clamp(84px, 9vw, 132px)/.8 var(--display); color: var(--accent-light); min-width: .6em; } .principles li > * { grid-column: 2; } .principles h3 { align-self: end; } .principles p { margin: 0; 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; } /* ========================================================================== Componentes de vitrine (usados pela seção E-commerce; valem em qualquer tema) ========================================================================== */ /* Cupom fiscal: tabela ou lista com cara de nota, borda serrilhada embaixo */ .receipt { position: relative; background: #fffdf8; color: var(--ink); border: 1px solid var(--hair); border-bottom: 0; padding: 18px 20px 26px; font: 14px/1.55 var(--mono); max-width: 34rem; box-shadow: 0 1px 0 rgba(0,0,0,.03); } .receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -10px; height: 10px; background: radial-gradient(circle at 6px 0, transparent 6px, #fffdf8 6.5px) 0 0 / 12px 10px repeat-x; filter: drop-shadow(0 1px 0 var(--hair)); } .receipt h4 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--ink-soft); } .receipt .line { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--hair); padding: 4px 0; } .receipt .line.bad span:last-child { color: var(--alert); font-weight: 700; } .receipt .line.ok span:last-child { color: var(--accent-light); font-weight: 700; } .receipt .total { display: flex; justify-content: space-between; border-top: 2px dashed var(--ink); margin-top: 8px; padding-top: 8px; font-weight: 700; } .receipt small { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 12px; text-align: center; } /* Etiqueta de preço: número em destaque com o furo do barbante */ .price-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 22px; } .price-tag { position: relative; background: var(--accent-dark); color: #17131f; border-radius: 6px 14px 14px 6px; padding: 14px 16px 14px 34px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); } .price-tag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); } .price-tag { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; } .price-tag b { display: block; font: 400 clamp(40px, 4vw, 54px)/.9 var(--display); letter-spacing: -.01em; } .price-tag span { display: block; margin: 0; font: 13px/1.35 var(--sans); } .price-tag.alt { background: var(--accent-tint); } .price-tag.bad { background: color-mix(in srgb, var(--alert) 22%, var(--paper)); } /* Código de barras: divisor decorativo entre seções */ .barcode { height: 34px; margin-top: clamp(56px, 7vw, 96px); opacity: .55; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 19px); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* Vitrine: grade de "produtos" (cartões com área de ilustração) */ .vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 24px; } .vitrine > * { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: #fffdf8; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; } .vitrine > a:hover { border-color: var(--accent-light); } .vitrine .foto { background: var(--wash); aspect-ratio: 16 / 10; display: grid; place-items: center; border-bottom: 1px solid var(--hair); } .vitrine .foto svg { width: 100%; height: 100%; } .vitrine .info { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; } .vitrine .info small { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .vitrine .info b { font: 400 24px/1.1 var(--display); } .vitrine .info b em { color: var(--accent-light); } .vitrine .info span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); } /* ---------- marca oficial: selo branco sobre preto (A2 · picote) ---------- */ .brand-chip { display: inline-flex; align-items: center; gap: 7px; background: #141414; color: #f1eee7 !important; border-radius: 9px; padding: 4px 11px 4px 7px; text-decoration: none; font: 400 21px/1 var(--display); letter-spacing: -.005em; vertical-align: middle; box-shadow: 0 0 0 1px rgba(241,238,231,.2); } .brand-chip svg { width: 15px; height: 19px; flex: none; } a.brand-chip > span { padding-top: 1px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } .brand-chip i { font-style: normal; color: #d8c08a; } .bar b a.brand-chip:hover, .brand-chip:hover { color: #fff !important; background: #000; }