/* ═══════════════════════════════════════════════════════════════════════ ajuda.revon.com.br — documentação do Revon OS Tokens: Design System v5 da Revon, pele Fria (fonte: app/globals.css). Tema: segue o navegador; o alternador carimba data-theme no . ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dia"] { color-scheme: light; --bg: #F7F8FA; --panel: #FFFFFF; --panel-2: #EEF0F4; --line: #E4E7ED; --line-2: rgba(18,21,36,.06); --tx: #121524; --mut: #59606E; --faint: #8A909C; --acc: #F04E23; --acc-ink: #D43E19; --acc-soft: #FEE9E6; --pos: #1F9D63; --pos-ink: #15803D; --pos-soft: #E4F5EC; --wrn-ink: #92600A; --wrn-soft: #FDF3DE; --shadow: 0 1px 3px rgba(18,21,36,.05), 0 6px 16px rgba(18,21,36,.07); } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #080B11; --panel: #181D2E; --panel-2: #212739; --line: rgba(251,238,232,.13); --line-2: rgba(251,238,232,.07); --tx: #FBEEE8; --mut: #9EA4B7; --faint: #6E7488; --acc: #FF6F06; --acc-ink: #FF8533; --acc-soft: rgba(255,111,6,.16); --pos: #37D39B; --pos-ink: #37D39B; --pos-soft: rgba(55,211,155,.16); --wrn-ink: #E8B863; --wrn-soft: rgba(232,184,99,.14); --shadow: 0 2px 10px rgba(0,0,0,.5); } } :root[data-theme="noite"] { color-scheme: dark; --bg: #080B11; --panel: #181D2E; --panel-2: #212739; --line: rgba(251,238,232,.13); --line-2: rgba(251,238,232,.07); --tx: #FBEEE8; --mut: #9EA4B7; --faint: #6E7488; --acc: #FF6F06; --acc-ink: #FF8533; --acc-soft: rgba(255,111,6,.16); --pos: #37D39B; --pos-ink: #37D39B; --pos-soft: rgba(55,211,155,.16); --wrn-ink: #E8B863; --wrn-soft: rgba(232,184,99,.14); --shadow: 0 2px 10px rgba(0,0,0,.5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; background: var(--bg); color: var(--tx); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── Topo ───────────────────────────────────────────────────────────── */ .topo { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .topo-in { max-width: 84rem; margin: 0 auto; padding: .65rem 1.25rem; display: flex; align-items: center; gap: 1rem; } .marca { display: flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.015em; color: var(--tx); text-decoration: none; white-space: nowrap; } .marca-sinal { width: 1.35rem; height: 1.35rem; border-radius: 6px; flex: none; background: linear-gradient(180deg, #FF6F06 0%, #F04E23 100%); } .marca small { display: block; font-size: .68rem; font-weight: 600; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; line-height: 1; } .busca-caixa { margin-left: auto; position: relative; flex: 1; max-width: 22rem; } .busca-caixa input { width: 100%; font: inherit; font-size: .88rem; color: var(--tx); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: .42rem .9rem .42rem 2.1rem; } .busca-caixa input::placeholder { color: var(--faint); } .busca-caixa svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: .9rem; height: .9rem; color: var(--faint); pointer-events: none; } .busca-res { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; max-height: 22rem; overflow-y: auto; } .busca-res[hidden] { display: none; } .busca-res a { display: block; padding: .55rem .85rem; text-decoration: none; color: var(--tx); border-bottom: 1px solid var(--line-2); font-size: .9rem; } .busca-res a:last-child { border-bottom: 0; } .busca-res a:hover, .busca-res a:focus-visible { background: var(--acc-soft); color: var(--acc-ink); } .busca-res .r-rota { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: var(--faint); margin-top: .1rem; } .busca-res .vazio { padding: .8rem .85rem; color: var(--faint); font-size: .88rem; } /* ── Estrutura ──────────────────────────────────────────────────────── */ .corpo { max-width: 92rem; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: 2.5rem; align-items: start; } .lateral { position: sticky; top: 4rem; padding: 2rem 0 3rem; max-height: calc(100vh - 4rem); overflow-y: auto; } .lat-grupo { margin-bottom: 1.5rem; } .lat-titulo { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem; border-radius: 6px; } .lat-titulo::-webkit-details-marker { display: none; } .lat-titulo::before { content: "›"; font-size: .95rem; line-height: 1; transition: transform .15s ease; display: inline-block; color: var(--faint); } details[open] > .lat-titulo::before { transform: rotate(90deg); } .lat-titulo:hover { background: var(--panel-2); color: var(--mut); } details[open] > .lat-titulo { color: var(--tx); } .lat-conta { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .7; letter-spacing: 0; } .lat-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .lat-lista a { display: flex; align-items: center; gap: .45rem; justify-content: space-between; padding: .3rem .55rem; border-radius: 7px; text-decoration: none; color: var(--mut); font-size: .89rem; border-left: 2px solid transparent; } .lat-lista a:hover { background: var(--panel-2); color: var(--tx); } .lat-lista a[aria-current="page"] { background: var(--acc-soft); color: var(--acc-ink); font-weight: 650; border-left-color: var(--acc); } .lat-lista .ponto { width: .4rem; height: .4rem; border-radius: 99px; flex: none; } .p-ar { background: var(--pos); } .p-obra { background: var(--acc); } .p-plan { background: var(--faint); } main { padding: 2rem 0 5rem; min-width: 0; } /* ── Cabeçalho de página ────────────────────────────────────────────── */ .trilha { font-size: .8rem; color: var(--faint); margin-bottom: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .trilha a { color: var(--mut); text-decoration: none; } .trilha a:hover { color: var(--acc-ink); } h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; } .subtitulo { margin: 0; color: var(--mut); font-size: 1.05rem; max-width: 60ch; } .selos { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin: .9rem 0 0; } .selo { font-size: .69rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 99px; white-space: nowrap; } .s-ar { background: var(--pos-soft); color: var(--pos-ink); } .s-obra { background: var(--acc-soft); color: var(--acc-ink); } .s-plan { background: var(--panel-2); color: var(--faint); } .s-cadeira { background: var(--panel-2); color: var(--mut); } a.abrir { display: inline-flex; align-items: center; gap: .35rem; font-family: ui-monospace, Menlo, monospace; font-size: .78rem; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: .2rem .5rem; text-decoration: none; color: var(--tx); } a.abrir:hover { border-color: var(--acc); color: var(--acc-ink); } a.abrir svg { width: .7rem; height: .7rem; opacity: .6; } /* ── Blocos ─────────────────────────────────────────────────────────── */ section.bloco { margin-top: 2.75rem; scroll-margin-top: 5rem; } h2 { margin: 0 0 .2rem; font-size: 1.32rem; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; display: flex; align-items: baseline; gap: .55rem; } h2 .n { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--acc-ink); font-weight: 700; flex: none; } .bloco > p { max-width: 64ch; } p { margin: .55rem 0; } /* ── Print anotado ──────────────────────────────────────────────────── */ .print { position: relative; margin: 1rem 0 0; } .print img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); } .marcador { position: absolute; transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; border-radius: 99px; background: linear-gradient(180deg, #FF6F06 0%, #F04E23 100%); color: #fff; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; display: grid; place-items: center; text-decoration: none; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.3); transition: transform .15s ease; } :root[data-theme="noite"] .marcador { box-shadow: 0 0 0 3px rgba(8,11,17,.9), 0 2px 6px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="dia"]) .marcador { box-shadow: 0 0 0 3px rgba(8,11,17,.9), 0 2px 6px rgba(0,0,0,.6); } } .marcador:hover, .marcador:focus-visible { transform: translate(-50%, -50%) scale(1.25); } .print-nota { margin-top: .5rem; font-size: .82rem; color: var(--faint); } /* ── Zonas numeradas ────────────────────────────────────────────────── */ .zonas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .zonas li { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); gap: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .95rem; box-shadow: var(--shadow); scroll-margin-top: 5rem; } .zonas .z-n { width: 1.6rem; height: 1.6rem; border-radius: 99px; background: linear-gradient(180deg, #FF6F06 0%, #F04E23 100%); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .zonas li > div > b { display: block; margin-bottom: .1rem; } .zonas p { margin: 0; font-size: .93rem; color: var(--mut); } .zonas li:target { border-color: var(--acc); } .zonas ul { margin: .5rem 0 0; padding-left: 1.05rem; display: grid; gap: .3rem; } .zonas ul li { display: list-item; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; font-size: .93rem; color: var(--mut); } .zonas ul li b { color: var(--tx); font-weight: 650; } .print-mini { margin-top: .8rem; max-width: 22rem; } .print-mini img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); } /* ── Passo a passo ──────────────────────────────────────────────────── */ .passos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; } .passos li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: 1rem; padding-bottom: 1.4rem; position: relative; } .passos li:not(:last-child)::before { content: ""; position: absolute; left: .97rem; top: 2.2rem; bottom: .2rem; width: 2px; background: var(--line); } .passos .p-n { width: 2rem; height: 2rem; border-radius: 99px; z-index: 1; background: var(--panel); border: 2px solid var(--acc); color: var(--acc-ink); font-size: .85rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .passos li > div > b { display: block; margin-bottom: .15rem; } .passos p { margin: 0; color: var(--mut); font-size: .95rem; } .passos .fala { margin-top: .5rem; padding: .5rem .75rem; border-left: 2px solid var(--acc); background: var(--panel); border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--tx); } /* ── Caixas ─────────────────────────────────────────────────────────── */ .duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; margin-top: 1rem; } .caixa { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; box-shadow: var(--shadow); } .caixa h3 { margin: 0 0 .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .caixa.sim h3 { color: var(--pos-ink); } .caixa.nao h3 { color: var(--acc-ink); } .caixa ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; } .caixa li { font-size: .93rem; color: var(--mut); } .caixa li b { color: var(--tx); font-weight: 650; } .cena { margin-top: 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 0 12px 12px 0; padding: 1.1rem 1.25rem; box-shadow: var(--shadow); } .cena p:first-child { margin-top: 0; } .cena p:last-child { margin-bottom: 0; } /* problemas */ .problemas { display: grid; gap: .6rem; margin-top: 1rem; } .prob { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1.05rem; box-shadow: var(--shadow); } .prob > b { display: block; color: var(--wrn-ink); font-size: .95rem; margin-bottom: .2rem; } .prob p { margin: 0; font-size: .93rem; color: var(--mut); } /* vizinhas */ .vizinhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin-top: 1rem; } .viz { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .95rem; text-decoration: none; box-shadow: var(--shadow); color: var(--tx); } .viz:hover { border-color: var(--acc); } .viz small { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: .15rem; } .viz span { font-weight: 650; font-size: .95rem; } .viz em { display: block; font-style: normal; font-size: .85rem; color: var(--mut); margin-top: .1rem; } /* ── Navegação pé ───────────────────────────────────────────────────── */ .pe-nav { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; gap: .8rem; justify-content: space-between; flex-wrap: wrap; } .pe-nav a { flex: 1; min-width: 12rem; text-decoration: none; color: var(--tx); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem .95rem; box-shadow: var(--shadow); } .pe-nav a:hover { border-color: var(--acc); } .pe-nav small { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: .15rem; } .pe-nav .fim { text-align: right; } /* ── Home ───────────────────────────────────────────────────────────── */ .portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; margin-top: 1.5rem; } .porta { display: block; text-decoration: none; color: var(--tx); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.25rem; box-shadow: var(--shadow); } .porta:hover { border-color: var(--acc); } .porta b { display: block; font-size: 1.05rem; margin-bottom: .2rem; letter-spacing: -.01em; } .porta p { margin: 0; font-size: .92rem; color: var(--mut); } .grupo-rotulo { color: var(--faint); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin: 1.5rem 0 .2rem; } .cadeiras { display: grid; gap: .6rem; margin-top: 1rem; } .cad { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--tx); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1.05rem; box-shadow: var(--shadow); } .cad:hover { border-color: var(--acc); } .cad-n { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--faint); margin-left: auto; white-space: nowrap; } .cad b { display: block; } .cad em { font-style: normal; font-size: .89rem; color: var(--mut); } /* estado vazio (páginas ainda não escritas) */ .emobra { margin-top: 1.5rem; background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); border-radius: 12px; padding: 1.1rem 1.25rem; } .emobra b { display: block; color: var(--acc-ink); margin-bottom: .25rem; } .emobra p { margin: 0; font-size: .93rem; color: var(--mut); } footer.pe { margin-top: 3rem; padding: 1.25rem 0 3rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--faint); } :where(a, button, input):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, html { transition: none !important; scroll-behavior: auto !important; } } @media (max-width: 62rem) { .corpo { grid-template-columns: 1fr; gap: 0; } .lateral { position: static; max-height: none; padding: 1.25rem 0 0; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .marca small { display: none; } } @media (max-width: 40rem) { .topo-in { flex-wrap: wrap; } .busca-caixa { max-width: none; margin-left: 0; order: 3; width: 100%; } } /* ── Sumário da página (direita) — "onde eu estou nesta leitura" ───────── */ .sumario { position: sticky; top: 4rem; padding: 2.4rem 0 3rem; } .sumario-titulo { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin: 0 0 .6rem; } .sumario ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .sumario a { display: block; padding: .26rem .6rem; border-radius: 6px; text-decoration: none; color: var(--mut); font-size: .84rem; border-left: 2px solid var(--line); line-height: 1.35; } .sumario a:hover { color: var(--tx); background: var(--panel-2); } .sumario a.aqui { color: var(--acc-ink); font-weight: 650; border-left-color: var(--acc); background: var(--acc-soft); } /* ── Como chegar aqui ─────────────────────────────────────────────────── */ .caminho { margin-top: 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1.05rem; box-shadow: var(--shadow); } .caminho-titulo { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; } .caminho-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; } .caminho-passo { display: inline-flex; align-items: center; gap: .35rem; background: var(--panel-2); border-radius: 7px; padding: .22rem .55rem; font-size: .87rem; color: var(--tx); } .caminho-passo b { font-weight: 650; } .caminho-seta { color: var(--faint); font-size: .9rem; } /* ── Onde esta tela fica no fluxo ─────────────────────────────────────── */ .fluxo { margin-top: 1rem; } .fluxo-trilho { display: flex; gap: .3rem; overflow-x: auto; padding: .2rem .1rem .6rem; scrollbar-width: thin; } .fluxo-etapa { flex: none; text-decoration: none; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); padding: .4rem .65rem; font-size: .8rem; color: var(--mut); white-space: nowrap; display: flex; align-items: center; gap: .4rem; } .fluxo-etapa:hover { border-color: var(--acc); color: var(--tx); } .fluxo-etapa .n { font-variant-numeric: tabular-nums; font-size: .68rem; color: var(--faint); font-weight: 700; } .fluxo-etapa.aqui { background: linear-gradient(180deg, #FF6F06 0%, #F04E23 100%); border-color: transparent; color: #fff; font-weight: 650; } .fluxo-etapa.aqui .n { color: rgba(255,255,255,.75); } .fluxo-nota { margin: 0; font-size: .84rem; color: var(--faint); } @media (max-width: 78rem) { .corpo { grid-template-columns: 15rem minmax(0, 1fr); } .sumario { display: none; } } @media (max-width: 62rem) { .corpo { grid-template-columns: 1fr; gap: 0; } }