:root { color-scheme: light; --paper: #f5f7f8; --surface: #ffffff; --ink: #1b2a33; --muted: #5b6b75; --line: #d8e0e5; --accent: #254d66; --accent-soft: #e3edf3; --on-accent: #ffffff; --field: #fff1a8; --field-ink: #5a4a00; --auto: #2f6b4f; --auto-soft: #e2f1e8; --staff: #7a4b12; --staff-soft: #f6ead8; --warn: #8e1b1b; --warn-soft: #fde8e6; --frame-ground: #e9eef1; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --paper: #0f171c; --surface: #16222a; --ink: #e3eaee; --muted: #9aabb6; --line: #2a3a44; --accent: #8cc0de; --accent-soft: #1d3342; --on-accent: #0f171c; --field: #4a4210; --field-ink: #fff1a8; --auto: #8fd4b0; --auto-soft: #16342a; --staff: #e8bf86; --staff-soft: #3a2a14; --warn: #ffb4ab; --warn-soft: #3d1a17; --frame-ground: #0b1115; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } img { max-width: 100%; } [hidden] { display: none !important; } /* Bilíngue: o par EN/PT existe no HTML; a classe no escolhe qual aparece. */ .i18n > [lang="pt-BR"] { display: none; } html.pt .i18n > [lang="pt-BR"] { display: inline; } html.pt .i18n > [lang="en"] { display: none; } html.pt div.i18n > [lang="pt-BR"], html.pt p.i18n > [lang="pt-BR"] { display: block; } .wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 20px 64px; } header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); } .eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .brand-name { font: 600 20px/1.2 var(--serif); } .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); } .lang button { border: 0; background: transparent; color: var(--muted); font: 600 13px var(--sans); padding: 6px 14px; border-radius: 999px; cursor: pointer; } .lang button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } h1 { font: 600 clamp(26px, 4vw, 34px)/1.15 var(--serif); margin: 0 0 8px; text-wrap: balance; } h2 { font: 600 21px/1.25 var(--serif); margin: 28px 0 8px; text-wrap: balance; } p { max-width: 72ch; } .lead { color: var(--muted); font-size: 16px; margin-top: 0; } .muted { color: var(--muted); font-size: 13px; } .home { margin-top: 32px; } .topics { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .topics a { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); height: 100%; } .topics a:hover { border-color: var(--accent); } .topics strong { font: 600 18px var(--serif); color: var(--accent); } .topics span { color: var(--muted); } .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; } nav.list { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .group-title { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .group a { display: grid; grid-template-columns: 1fr auto; gap: 8px; text-decoration: none; color: var(--ink); padding: 7px 10px; border-radius: 8px; font-size: 14px; } .group a:hover { background: var(--accent-soft); } .group a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .group a .n { color: var(--muted); font: 500 12px var(--mono); font-variant-numeric: tabular-nums; } main { min-width: 0; } .tbl { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-top: 16px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } th { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .n { text-align: right; white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; } .email-head { display: flex; flex-direction: column; gap: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; } .chip.auto { background: var(--auto-soft); color: var(--auto); } .chip.staff { background: var(--staff-soft); color: var(--staff); } .subject { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; } .subject small { display: block; font: 500 12px var(--sans); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } /* Sem linhas entre as células: com 7 itens a última fileira fica incompleta, e qualquer linha (fundo do grid ou sombra) desenhava um buraco ali. */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 20px 0 0; } .fact { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .fact dt { font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .fact dd { margin: 0; } .num { font: 600 24px/1.1 var(--serif); font-variant-numeric: tabular-nums; } .fields { display: flex; flex-wrap: wrap; gap: 6px; } .field { font: 500 13px var(--mono); background: var(--field); color: var(--field-ink); padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .note { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); } .mk { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--line); } .preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; } .preview-bar h2 { font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); } .seg button { border: 0; background: transparent; color: var(--muted); font: 600 12px var(--sans); padding: 6px 12px; cursor: pointer; } .seg button + button { border-left: 1px solid var(--line); } .seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } .frame-wrap { margin-top: 12px; background: var(--frame-ground); border: 1px solid var(--line); border-radius: 12px; padding: 16px; overflow-x: auto; } .frame-wrap iframe { display: block; margin: 0 auto; border: 0; background: #fff; width: 640px; max-width: 100%; height: 640px; border-radius: 6px; overflow: hidden; } .frame-wrap.phone iframe { width: 375px; } @media (max-width: 860px) { .layout { grid-template-columns: 1fr; gap: 20px; } nav.list { position: static; max-height: none; order: 2; border-top: 1px solid var(--line); padding-top: 16px; } } /* Login (servido pela função, functions/_middleware.js) */ .narrow { max-width: 420px; } form.login { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } form.login label { font: 600 13px var(--sans); color: var(--muted); margin-top: 8px; } form.login input { font: 16px var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); } form.login button { margin-top: 16px; font: 600 15px var(--sans); padding: 11px 14px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); cursor: pointer; } .header-actions { display: flex; align-items: center; gap: 12px; } .signout { font-size: 13px; color: var(--muted); } /* Editar: ação à vista, logo abaixo do assunto */ .edit-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .btn-edit { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--sans); padding: 9px 14px; border-radius: 8px; background: var(--accent); color: var(--on-accent); text-decoration: none; } .btn-edit:hover { filter: brightness(1.1); } .fixed { font: 600 13px var(--sans); padding: 8px 12px; border-radius: 8px; background: var(--staff-soft); color: var(--staff); } .edit-note { margin: 6px 0 0; } .langs { margin-top: 28px; } .langs th[scope="row"] { font: 600 14px var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: nowrap; }