/* ========================================================================== Voodoo.js documentation The same design system as site/index.html, site/components.html and site/playground.html: one accent, flat surfaces, no gradients and no decorative layers. The documentation used to ship its own six-hue brand palette on a near-black canvas, which is why it read as a different product from the rest of the site. Token names are English. The theme attribute stays `data-tema`, with the values `claro` and `escuro`, because that is the contract docs.js already implements across all 44 pages. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens Three states, in the shape the rest of the site uses: light is the base, the system preference wins unless the reader picked a theme, and an explicit choice wins over the system in both directions. -------------------------------------------------------------------------- */ :root { --ink: #16141c; --ink-soft: #57526a; --ink-faint: #8b8598; --bg: #ffffff; --bg-soft: #faf9fb; --bg-code: #f6f5f8; --line: #e7e4ec; --accent: #5b2ee5; --accent-soft: #f1ecfe; --accent-ink: #ffffff; --fill: #e9e6f0; /* Only overlays use this: the mobile drawer's backdrop. */ --scrim: rgba(22, 20, 28, 0.45); /* Syntax highlighting. The same four hues the landing page uses, so a snippet looks identical whichever page a reader lands on. */ --code-tag: #8250df; --code-attr: #0550ae; --code-str: #0a7b56; --code-key: #cf222e; --code-muted: var(--ink-faint); --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Metrics */ --top-h: 3.75rem; --nav-w: 17.5rem; --toc-w: 15rem; --measure: 46rem; --radius: 10px; --radius-sm: 7px; color-scheme: light; } @media (prefers-color-scheme: dark) { html:root:not([data-tema="claro"]) { --ink: #f2f0f6; --ink-soft: #b3adc2; --ink-faint: #837d93; --bg: #131118; --bg-soft: #191722; --bg-code: #1d1a26; --line: #2b2735; --accent: #a688ff; --accent-soft: #221c3a; --accent-ink: #16141c; --fill: #2f2b3d; --scrim: rgba(0, 0, 0, 0.6); --code-tag: #d2a8ff; --code-attr: #79c0ff; --code-str: #7ee2b8; --code-key: #ff7b72; color-scheme: dark; } } html:root[data-tema="escuro"] { --ink: #f2f0f6; --ink-soft: #b3adc2; --ink-faint: #837d93; --bg: #131118; --bg-soft: #191722; --bg-code: #1d1a26; --line: #2b2735; --accent: #a688ff; --accent-soft: #221c3a; --accent-ink: #16141c; --fill: #2f2b3d; --scrim: rgba(0, 0, 0, 0.6); --code-tag: #d2a8ff; --code-attr: #79c0ff; --code-str: #7ee2b8; --code-key: #ff7b72; color-scheme: dark; } /* -------------------------------------------------------------------------- 1b. The library's own tokens Every page here can run a live example, and the library paints its built-in UI from --v-*. Left unmapped those keep the library's default palette, so a demo comes out white while the page around it is dark — the white result pane this file used to show on the documentation home page. !important is required rather than lazy: V.palette() writes :root:not([data-theme="light"]), which outranks any plain selector we can write. html:root also outranks the plain :root the library injects into later, which would otherwise win on source order. --v-surface-3 has no default at all in the library: the progress track, the skeleton fill and the switch rail paint with it, and unmapped they render as empty boxes. -------------------------------------------------------------------------- */ html:root { --v-surface: var(--bg) !important; --v-surface-2: var(--bg-soft) !important; --v-surface-3: var(--fill) !important; --v-border: var(--line) !important; --v-text: var(--ink) !important; --v-text-muted: var(--ink-faint) !important; --v-primary: var(--accent) !important; --v-radius: var(--radius); --v-radius-sm: var(--radius-sm); --v-font-sans: var(--font); } /* The command palette and dialogs land on top of the sticky header. */ .v-command, .v-modal, .v-drawer { z-index: 200; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 1.5rem); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-soft); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } img, svg { max-width: 100%; } button { font: inherit; color: inherit; } /* -------------------------------------------------------------------------- 3. Skip link -------------------------------------------------------------------------- */ .pular-para-conteudo { position: absolute; left: 0.75rem; top: -4rem; z-index: 200; padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: top 0.15s ease; } .pular-para-conteudo:focus { top: 0.75rem; text-decoration: none; } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- */ .doc-topo { position: sticky; top: 0; z-index: 60; height: var(--top-h); display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; background: var(--bg); border-bottom: 1px solid var(--line); } .doc-topo__marca { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 680; font-size: 1.03rem; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; } .doc-topo__marca:hover { text-decoration: none; } .doc-topo__marca svg { width: 1.5rem; height: 1.5rem; flex: none; } .doc-topo__etiqueta { padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.03em; text-transform: uppercase; } /* Site navigation. The documentation used to be an island: nothing here linked back to the home page, the playground, the components or the examples. */ .doc-topo__site { display: flex; align-items: center; gap: 2px; min-width: 0; } .doc-topo__site a { padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; } .doc-topo__site a:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; } .doc-topo__espaco { flex: 1; } .doc-topo__acoes { display: flex; align-items: center; gap: 0.4rem; } .doc-botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .doc-botao-icone:hover { border-color: var(--ink-faint); color: var(--ink); } .doc-botao-icone svg { width: 1.1rem; height: 1.1rem; } .doc-topo__menu-btn { display: none; } /* Search */ .doc-busca { position: relative; flex: 0 1 20rem; min-width: 0; } .doc-busca__campo { width: 100%; height: 2.15rem; padding: 0 0.75rem 0 2.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink); font: inherit; font-size: 0.9rem; } .doc-busca__campo::placeholder { color: var(--ink-faint); } .doc-busca__campo:focus { border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--accent-soft); } .doc-busca__lupa { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--ink-faint); pointer-events: none; } .doc-busca__resultados { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; max-height: min(28rem, 70vh); overflow-y: auto; margin: 0; padding: 0.35rem; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .doc-busca__resultados[hidden] { display: none; } .doc-busca__resultados li + li { margin-top: 0.15rem; } .doc-busca__link { display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); color: var(--ink); } .doc-busca__link:hover, .doc-busca__link:focus-visible, .doc-busca__link[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; } .doc-busca__titulo { display: block; font-weight: 600; font-size: 0.9rem; } .doc-busca__caminho { display: block; font-size: 0.75rem; color: var(--accent); } .doc-busca__trecho { display: -webkit-box; font-size: 0.8rem; color: var(--ink-soft); overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .doc-busca__marca { background: transparent; color: var(--accent); font-weight: 700; } .doc-busca__vazio { padding: 0.75rem 0.6rem; color: var(--ink-soft); font-size: 0.9rem; } /* -------------------------------------------------------------------------- 5. Page structure -------------------------------------------------------------------------- */ .doc-layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--toc-w); gap: 0; max-width: 96rem; margin: 0 auto; align-items: start; } /* Sidebar */ .doc-menu { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1rem 4rem; border-right: 1px solid var(--line); font-size: 0.9rem; } .doc-menu__grupo + .doc-menu__grupo { margin-top: 1.5rem; } .doc-menu__titulo { margin: 0 0 0.5rem; padding: 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } .doc-menu__lista { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); } .doc-menu__link { display: block; padding: 0.32rem 0.6rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); line-height: 1.45; } .doc-menu__link:hover { color: var(--ink); text-decoration: none; } .doc-menu__link[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .doc-menu__numero { display: inline-block; min-width: 1.5rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.8rem; } /* The site links repeat inside the drawer, where the header cannot show them. Hidden on the desktop layout, where the header has room. */ .doc-menu__site { display: none; margin: 0 0 1.5rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); } .doc-menu__site a { display: block; padding: 0.32rem 0.6rem; color: var(--ink-soft); } .doc-menu__site a:hover { color: var(--ink); text-decoration: none; } .doc-menu__fechar { display: none; } /* Content */ .doc-conteudo { min-width: 0; padding: 2.5rem 2.5rem 5rem; } .doc-artigo { max-width: var(--measure); } /* On this page */ .doc-indice { position: sticky; top: var(--top-h); max-height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 2.5rem 1rem 4rem 0; font-size: 0.85rem; } .doc-indice__titulo { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } .doc-indice__lista { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); } .doc-indice__link { display: block; padding: 0.25rem 0 0.25rem 0.75rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-faint); line-height: 1.45; } .doc-indice__link:hover { color: var(--ink); text-decoration: none; } .doc-indice__link--n3 { padding-left: 1.5rem; font-size: 0.8rem; } .doc-indice__link[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .doc-indice:empty { display: none; } /* -------------------------------------------------------------------------- 6. Article typography -------------------------------------------------------------------------- */ .doc-artigo > :first-child { margin-top: 0; } .doc-migalha { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); } .doc-artigo h1 { margin: 0 0 0.75rem; font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; } .doc-resumo { margin: 0 0 2.25rem; font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); } .doc-artigo h2 { margin: 3rem 0 1rem; padding-top: 1.75rem; font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 660; border-top: 1px solid var(--line); } .doc-artigo h3 { margin: 2rem 0 0.75rem; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 660; } .doc-artigo h4 { margin: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 660; color: var(--ink-soft); } .doc-artigo p { margin: 0 0 1.1rem; } .doc-artigo ul, .doc-artigo ol { margin: 0 0 1.1rem; padding-left: 1.35rem; } .doc-artigo li { margin-bottom: 0.4rem; } .doc-artigo li > ul, .doc-artigo li > ol { margin-top: 0.4rem; } .doc-artigo strong { color: var(--ink); font-weight: 660; } .doc-artigo hr { height: 1px; margin: 2.5rem 0; border: 0; background: var(--line); } .doc-artigo blockquote { margin: 1.25rem 0; padding: 0.1rem 1rem; border-left: 2px solid var(--line); color: var(--ink-soft); } /* Heading anchors */ .doc-ancora { margin-left: 0.4rem; color: var(--ink-faint); opacity: 0; font-weight: 400; text-decoration: none; } h2:hover .doc-ancora, h3:hover .doc-ancora, .doc-ancora:focus-visible { opacity: 1; } /* Inline code */ .doc-artigo :not(pre) > code { padding: 0.12em 0.36em; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-code); color: var(--ink); font-family: var(--mono); font-size: 0.86em; word-break: break-word; } /* -------------------------------------------------------------------------- 7. Code blocks -------------------------------------------------------------------------- */ .doc-bloco-codigo { position: relative; margin: 0 0 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-code); overflow: hidden; } .doc-bloco-codigo__rotulo { position: absolute; top: 0.5rem; left: 0.85rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); pointer-events: none; } .doc-bloco-codigo pre { margin: 0; padding: 2rem 1rem 1rem; overflow-x: auto; background: transparent; } .doc-bloco-codigo code { display: block; font-family: var(--mono); font-size: 0.845rem; line-height: 1.65; color: var(--ink); tab-size: 2; white-space: pre; } .doc-copiar { position: absolute; top: 0.45rem; right: 0.45rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink-soft); font-size: 0.72rem; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .doc-bloco-codigo:hover .doc-copiar, .doc-copiar:focus-visible { opacity: 1; } .doc-copiar:hover { color: var(--ink); border-color: var(--ink-faint); } .doc-copiar[data-estado="ok"] { opacity: 1; color: var(--accent); border-color: var(--accent); } .doc-copiar svg { width: 0.85rem; height: 0.85rem; } /* Syntax highlighting */ .tk-comentario { color: var(--code-muted); font-style: italic; } .tk-tag { color: var(--code-tag); } .tk-seletor { color: var(--code-tag); } .tk-funcao { color: var(--code-tag); } .tk-atributo { color: var(--code-attr); } .tk-propriedade { color: var(--code-attr); } .tk-magia { color: var(--code-attr); font-weight: 600; } .tk-texto { color: var(--code-str); } .tk-interp { color: var(--code-str); font-weight: 600; } .tk-palavra { color: var(--code-key); } .tk-numero { color: var(--code-key); } .tk-directive { color: var(--code-key); font-weight: 600; } .tk-pontuacao { color: var(--code-muted); } /* -------------------------------------------------------------------------- 8. Live example -------------------------------------------------------------------------- */ .doc-exemplo { margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); } .doc-exemplo__cabecalho { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); } .doc-exemplo__cabecalho b { color: var(--accent); font-weight: 700; } .doc-exemplo__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .doc-exemplo__codigo { min-width: 0; border-right: 1px solid var(--line); } .doc-exemplo__codigo .doc-bloco-codigo { margin: 0; border: 0; border-radius: 0; height: 100%; } /* The result pane. This used to be a hardcoded surface that stayed pale in dark mode; it is a theme token now, and the iframe inside it is handed the same palette by docs.js. */ .doc-exemplo__palco { min-width: 0; background: var(--bg); } .doc-exemplo__palco iframe { display: block; width: 100%; min-height: 8rem; border: 0; background: transparent; color-scheme: normal; } .doc-exemplo--empilhado .doc-exemplo__corpo { grid-template-columns: minmax(0, 1fr); } .doc-exemplo--empilhado .doc-exemplo__codigo { border-right: 0; border-bottom: 1px solid var(--line); } /* -------------------------------------------------------------------------- 9. Tables -------------------------------------------------------------------------- */ .doc-tabela { margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .doc-tabela table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.9rem; } .doc-tabela th, .doc-tabela td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .doc-tabela thead th { background: var(--bg-soft); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .doc-tabela tbody tr:last-child td { border-bottom: 0; } .doc-tabela td code { white-space: nowrap; } /* -------------------------------------------------------------------------- 10. Callouts One accent. The variants differ by the label they carry, not by a second and third hue, which is what made the old sheet read as decorated. -------------------------------------------------------------------------- */ .doc-aviso { margin: 0 0 1.35rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 0.95rem; } .doc-aviso > :last-child { margin-bottom: 0; } .doc-aviso__rotulo { display: block; margin-bottom: 0.25rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } .doc-aviso--atencao, .doc-aviso--perigo, .doc-aviso--dica { border-left-color: var(--accent); } .doc-aviso--roadmap { border-left-color: var(--line); } .doc-aviso--roadmap .doc-aviso__rotulo { color: var(--ink-faint); } /* -------------------------------------------------------------------------- 11. Cards, steps and keys -------------------------------------------------------------------------- */ .doc-artigo kbd { display: inline-block; min-width: 1.6em; padding: 0.1em 0.4em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-soft); color: var(--ink); font-family: var(--mono); font-size: 0.78em; line-height: 1.5; text-align: center; white-space: nowrap; } .doc-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.85rem; margin: 0 0 1.75rem; padding: 0; list-style: none; } .doc-cartao { display: block; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); color: var(--ink); transition: border-color 0.15s ease; } .doc-cartao:hover { border-color: var(--accent); text-decoration: none; } .doc-cartao b { display: block; margin-bottom: 0.2rem; font-size: 1rem; font-weight: 660; } .doc-cartao span { display: block; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); } .doc-cartao em { display: block; margin-bottom: 0.35rem; font-style: normal; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } /* Numbered steps */ .doc-passos { counter-reset: passo; margin: 0 0 1.75rem; padding: 0; list-style: none; } .doc-passos > li { counter-increment: passo; position: relative; padding-left: 2.5rem; margin-bottom: 1.25rem; } .doc-passos > li::before { content: counter(passo); position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-size: 0.85rem; font-weight: 700; line-height: 1; } /* -------------------------------------------------------------------------- 12. Footer and page-to-page navigation -------------------------------------------------------------------------- */ .doc-paginacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; max-width: var(--measure); margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .doc-paginacao__link { display: block; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color 0.15s ease; } .doc-paginacao__link:hover { border-color: var(--accent); text-decoration: none; } .doc-paginacao__link--proxima { grid-column: 2; text-align: right; } .doc-paginacao__rotulo { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .doc-paginacao__titulo { display: block; font-weight: 660; color: var(--accent); } .doc-rodape { max-width: var(--measure); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-faint); } .doc-rodape p { margin: 0 0 0.4rem; } /* -------------------------------------------------------------------------- 13. Documentation home page -------------------------------------------------------------------------- */ .doc-capa { max-width: 60rem; } .doc-capa__titulo { margin: 0 0 0.75rem; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; } /* This was a three-stop gradient clipped to the text. Flat accent now. */ .doc-capa__titulo em { font-style: normal; color: var(--accent); } .doc-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0 0 2.5rem; padding: 0; list-style: none; } .doc-numeros li { margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); } .doc-numeros b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .doc-numeros span { font-size: 0.82rem; color: var(--ink-soft); } /* This was a gradient wash over a surface. Flat now. */ .doc-trilha { margin: 0 0 2rem; padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); } .doc-trilha h2 { margin: 0 0 0.35rem !important; padding-top: 0 !important; border-top: 0 !important; font-size: 1.15rem; } /* -------------------------------------------------------------------------- 14. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .doc-layout { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .doc-indice { display: none; } } @media (max-width: 1080px) { /* The site links move into the drawer, where there is room for them. */ .doc-topo__site { display: none; } .doc-menu__site { display: block; } } @media (max-width: 900px) { :root { --measure: 100%; } .doc-topo { padding: 0 0.75rem; gap: 0.5rem; } .doc-topo__etiqueta { display: none; } .doc-topo__menu-btn { display: inline-flex; } .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-conteudo { padding: 1.75rem 1rem 4rem; } /* The sidebar becomes a drawer */ .doc-menu { position: fixed; top: 0; left: 0; z-index: 80; width: min(20rem, 86vw); height: 100dvh; padding-top: 1rem; background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform 0.22s ease; visibility: hidden; } .doc-menu[data-aberto="sim"] { transform: none; visibility: visible; } .doc-menu__fechar { display: inline-flex; position: absolute; top: 0.75rem; right: 0.75rem; } .doc-menu__site { margin-top: 2.25rem; } .doc-menu__site + .doc-menu__grupo { margin-top: 0; } .doc-menu__grupo:first-of-type { margin-top: 2rem; } .doc-vidro { position: fixed; inset: 0; z-index: 70; background: var(--scrim); } .doc-vidro[hidden] { display: none; } .doc-exemplo__corpo { grid-template-columns: minmax(0, 1fr); } .doc-exemplo__codigo { border-right: 0; border-bottom: 1px solid var(--line); } .doc-paginacao { grid-template-columns: minmax(0, 1fr); } .doc-paginacao__link--proxima { grid-column: 1; } } @media (max-width: 600px) { body { font-size: 15.5px; } .doc-topo__marca span { display: none; } .doc-busca { flex: 1 1 auto; } .doc-bloco-codigo pre { padding: 1.9rem 0.75rem 0.85rem; } .doc-bloco-codigo code { font-size: 0.8rem; } .doc-copiar { opacity: 1; } .doc-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* At 380px the header still has to fit a menu button, the mark, the search field and two icon buttons without pushing the page sideways. */ @media (max-width: 420px) { .doc-topo { gap: 0.35rem; padding: 0 0.6rem; } .doc-topo__espaco { display: none; } .doc-botao-icone { width: 2rem; height: 2rem; } .doc-conteudo { padding: 1.5rem 0.85rem 3.5rem; } .doc-cartoes { grid-template-columns: minmax(0, 1fr); } .doc-passos > li { padding-left: 2.15rem; } } @media print { .doc-topo, .doc-menu, .doc-indice, .doc-paginacao, .doc-copiar { display: none !important; } .doc-layout { grid-template-columns: minmax(0, 1fr); } }