<!DOCTYPE html><html lang="pt-br" data-astro-cid-37fxchfa> <head><meta charset="utf-8"><script>
      // Apply theme BEFORE any paint to prevent flash
      (function () {
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');

        document.documentElement.dataset.theme = theme;
        document.documentElement.style.colorScheme = theme;
      })();
    </script><title>Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas - dpw</title><!-- Preload critical font --><link rel="preload" href="/fonts/Anton-Regular.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high"><!-- Preconnects --><link rel="preconnect" href="https://www.google-analytics.com" crossorigin><link rel="preconnect" href="https://www.googletagmanager.com" crossorigin><!-- Favicon --><link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="shortcut icon" href="/favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="dpw"><link rel="manifest" href="/site.webmanifest"><!-- Meta tags --><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas"><link rel="alternate" type="application/rss+xml" title="dpw - desenvolvimento para web" href="https://dpw.dev/rss.xml"><!-- Open Graph --><meta property="og:title" content="Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas"><meta property="og:description" content="Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas"><meta property="og:type" content="website"><meta property="og:locale" content="pt_BR"><meta property="og:site_name" content="dpw"><meta property="og:image" content="https://dpw.dev/images/pages/dpw-og.webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><!-- Twitter Card --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas"><meta name="twitter:description" content="Front end design: HTML, CSS, UI, UX, performance, Design System, a11y, tutorial, boas práticas"><meta name="twitter:image" content="https://dpw.dev/images/pages/dpw-og.webp"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CDGfc0hd.js"></script><link rel="stylesheet" href="/_astro/_slug_.C_7SRirF.css">
<style>.c-chip[data-astro-cid-b4zvghpy]{display:inline-block;padding:var(--space-3xs) var(--space-xs);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;font-size:var(--font-step--2);color:var(--color-text-secondary);text-decoration:none;transition:all var(--transition-duration-fast)}.c-chip[data-astro-cid-b4zvghpy]:hover{border-color:var(--color-ink);color:var(--color-ink);background:var(--color-surface-hover)}:root[data-theme=dark] .c-chip[data-astro-cid-b4zvghpy]:hover{border-color:var(--color-accent);color:var(--color-accent)}
.c-post-meta[data-astro-cid-qtyrxm4s]{color:var(--color-text-secondary);display:flex;flex-wrap:wrap;font-size:var(--font-step--2);gap:0 var(--space-s)}.c-post-meta__item[data-astro-cid-qtyrxm4s]{display:flex;gap:0 var(--space-3xs)}.c-post-meta__item[data-astro-cid-qtyrxm4s] a[data-astro-cid-qtyrxm4s]{color:inherit;text-decoration:none;background-image:linear-gradient(var(--color-text-secondary),var(--color-text-secondary));background-position:0% 100%;background-repeat:no-repeat;background-size:100% 1px;padding-inline:.1em;transition:background-size var(--transition-duration-exit) var(--transition-function-elastic)}.c-post-meta__item[data-astro-cid-qtyrxm4s] a[data-astro-cid-qtyrxm4s]:hover{background-size:100% 100%;color:var(--color-bg)}.c-post-meta[data-astro-cid-qtyrxm4s] [data-astro-cid-qtyrxm4s][aria-hidden=true]{align-self:center;display:inline-flex}
.c-chip-sidebar[data-astro-cid-lm2yh3ye] h2[data-astro-cid-lm2yh3ye]{font-size:var(--font-step-0);margin-block-end:var(--space-s)}.c-chip-sidebar__chips[data-astro-cid-lm2yh3ye]{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
</style><style>[data-astro-transition-scope="astro-uvewtcd5-1"] { view-transition-name: astro-uvewtcd5-1; }@layer astro { ::view-transition-old(astro-uvewtcd5-1) { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }::view-transition-new(astro-uvewtcd5-1) { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-uvewtcd5-1) { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-uvewtcd5-1) { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-uvewtcd5-1"],
			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-uvewtcd5-1"] { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-uvewtcd5-1"],
			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-uvewtcd5-1"] { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-uvewtcd5-1"],
			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-uvewtcd5-1"] { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-uvewtcd5-1"],
			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-uvewtcd5-1"] { 
	animation-duration: 0.385s;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }</style></head> <body data-astro-cid-37fxchfa> <div class="page-content" data-astro-cid-37fxchfa> <nav class="c-navbar" data-navbar aria-label="Menu principal"> <div class="c-navbar__inner"> <div class="c-navbar__left"> <a href="/" class="c-navbar__logo" aria-label="Página inicial inicial do dpw"> <svg fill="currentColor" viewBox="0 0 474 156" xmlns="http://www.w3.org/2000/svg"><path d="M473.632 38.328c0 .82-.146 1.582-.439 2.285l-28.125 78.838c-.41 1.172-1.231 2.197-2.461 3.076-1.231.879-2.49 1.319-3.779 1.319-1.289 0-2.52-.44-3.692-1.319-1.172-.879-1.992-1.904-2.461-3.076l-21.884-61.347-21.973 61.962c-.41 1.231-1.231 2.256-2.461 3.077-1.231.878-2.49 1.318-3.779 1.318-1.289 0-2.52-.44-3.692-1.318-1.172-.879-1.992-1.905-2.461-3.077L348.3 41.228a5.88 5.88 0 0 1-.439-2.285c0-1.816.644-3.369 1.933-4.658 1.289-1.289 2.842-1.933 4.659-1.933 1.347 0 2.607.439 3.779 1.318 1.23.82 2.051 1.846 2.461 3.076l21.885 61.436 21.972-61.963c.469-1.23 1.289-2.256 2.461-3.076 1.172-.82 2.403-1.23 3.692-1.23 1.289 0 2.548.439 3.779 1.317 1.23.82 2.051 1.817 2.461 2.989l21.885 61.435L460.8 36.22c.469-1.23 1.289-2.285 2.461-3.164 1.231-.88 2.49-1.319 3.78-1.319 1.816 0 3.369.674 4.658 2.022 1.289 1.289 1.933 2.812 1.933 4.57ZM303.515 32.088c7.969 0 15.029 2.11 21.181 6.328 6.153 4.219 10.987 9.756 14.502 16.611 3.516 6.856 5.274 14.268 5.274 22.237a49.71 49.71 0 0 1-3.076 17.314c-2.051 5.567-4.952 10.547-8.702 14.942a43.131 43.131 0 0 1-13.271 10.371c-5.039 2.578-10.605 3.867-16.699 3.867-5.742 0-10.987-1.436-15.733-4.307-4.746-2.871-8.906-6.181-12.48-9.931v39.726c0 1.816-.645 3.369-1.934 4.658-1.289 1.289-2.842 1.934-4.658 1.934-1.816 0-3.369-.645-4.658-1.934-1.289-1.289-1.934-2.842-1.934-4.658V38.592c0-1.817.645-3.37 1.934-4.658 1.289-1.29 2.842-1.934 4.658-1.934 1.816 0 3.281.645 4.395 1.934 1.171 1.289 1.757 2.841 1.757 4.658l.44 8.437c3.34-3.398 7.471-6.738 12.392-10.02 4.922-3.28 10.459-4.921 16.612-4.921Zm-.264 13.184c-5.918 0-11.045 1.61-15.381 4.834-4.277 3.222-7.558 7.382-9.844 12.48-2.285 5.039-3.427 10.342-3.427 15.908 0 5.45 1.113 10.635 3.34 15.557 2.285 4.863 5.537 8.847 9.755 11.953 4.278 3.047 9.346 4.57 15.206 4.57 5.683 0 10.634-1.611 14.853-4.834 4.219-3.281 7.5-7.47 9.844-12.568 2.344-5.156 3.515-10.547 3.515-16.172 0-5.566-1.171-10.752-3.515-15.557-2.285-4.863-5.537-8.76-9.756-11.69-4.16-2.987-9.023-4.481-14.59-4.481ZM203.446 123.846c-7.969 0-15.029-2.11-21.182-6.328-6.152-4.219-10.986-9.756-14.502-16.612-3.515-6.914-5.273-14.326-5.273-22.236a49.688 49.688 0 0 1 3.076-17.315c2.051-5.566 4.951-10.517 8.701-14.853 3.75-4.395 8.174-7.88 13.272-10.459 5.097-2.578 10.664-3.867 16.699-3.867 5.742 0 10.986 1.435 15.732 4.306 4.747 2.871 8.907 6.182 12.481 9.932V6.687c0-1.816.644-3.369 1.934-4.658C235.673.74 237.225.096 239.042.096c1.875 0 3.427.644 4.658 1.933 1.289 1.29 1.934 2.842 1.934 4.659v110.654c0 1.816-.645 3.369-1.934 4.658-1.289 1.289-2.842 1.934-4.658 1.934-1.817 0-3.311-.645-4.483-1.934-1.113-1.289-1.67-2.842-1.67-4.658l-.439-8.438c-3.34 3.399-7.471 6.739-12.393 10.02-4.922 3.281-10.459 4.922-16.611 4.922Zm.264-13.184c5.976 0 11.103-1.611 15.381-4.834 4.277-3.223 7.558-7.383 9.843-12.48 2.285-5.098 3.428-10.4 3.428-15.909 0-5.507-1.143-10.693-3.428-15.556-2.226-4.864-5.449-8.819-9.668-11.865-4.218-3.106-9.287-4.659-15.205-4.659-5.683 0-10.634 1.641-14.853 4.922-4.219 3.223-7.5 7.412-9.844 12.569a38.058 38.058 0 0 0-3.516 16.084c0 5.566 1.143 10.78 3.428 15.644 2.344 4.805 5.596 8.701 9.756 11.69 4.219 2.929 9.111 4.394 14.678 4.394ZM123.578 33c8.877 0 15.465 4.543 19.765 13.63C147.781 55.464 150 65.812 150 77.675c0 13.882-2.843 24.988-8.53 33.317-5.686 8.329-12.829 12.494-21.428 12.494-6.519 0-13.731-3.66-21.637-10.98-7.767-7.319-15.95-16.153-24.55-26.502l4.578-3.786c7.35 8.834 14.632 16.659 21.844 23.473 7.213 6.815 13.801 10.223 19.765 10.223 7.351 0 13.384-3.282 18.099-9.844 4.716-6.563 7.074-14.134 7.074-22.716 0-7.067-1.595-12.746-4.785-17.037-3.051-4.29-7.559-6.436-13.523-6.436-6.241 0-12.76 2.271-19.556 6.814-6.796 4.291-13.731 9.718-20.805 16.28a1469.17 1469.17 0 0 0-21.22 19.309c-6.935 6.31-13.731 11.737-20.388 16.28-6.52 4.291-12.691 6.436-18.516 6.436-8.877 0-15.534-4.543-19.973-13.63C2.15 102.284 0 91.936 0 80.325c0-13.882 2.843-24.988 8.53-33.317 5.825-8.329 12.968-12.494 21.428-12.494 6.52 0 13.662 3.66 21.429 10.98 7.906 7.32 16.158 16.154 24.757 26.502l-4.577 3.786c-7.212-8.834-14.493-16.658-21.844-23.473-7.213-6.815-13.8-10.223-19.765-10.223-7.35 0-13.384 3.282-18.1 9.844-4.715 6.563-7.073 14.134-7.073 22.716 0 7.067 1.526 12.746 4.577 17.037 3.19 4.29 7.767 6.436 13.73 6.436 6.242 0 12.761-2.145 19.557-6.436 6.796-4.543 13.731-9.97 20.804-16.28a2950.32 2950.32 0 0 1 21.013-19.308c7.074-6.563 13.87-11.99 20.388-16.28C111.512 35.272 117.753 33 123.578 33Z"></path></svg> </a> <div class="c-navbar__menus"> <button popovertarget="categorias-popover" class="c-navbar__menu-btn" data-popover-trigger="categorias-popover"> Categorias </button> <div popover id="categorias-popover" class="c-navbar-popover"> <div class="c-navbar-popover__gradient-wrapper" data-gradient-wrapper="categorias-popover"> <div class="c-navbar-popover__scroll-container" data-scroll-container="categorias-popover"> <nav> <ul> <li> <a href="/categoria/css/">CSS</a> </li><li> <a href="/categoria/design/">Design</a> </li><li> <a href="/categoria/html/">HTML</a> </li><li> <a href="/categoria/acessibilidade/">Acessibilidade</a> </li><li> <a href="/categoria/indicacoes/">Indicações</a> </li><li> <a href="/categoria/javascript/">JavaScript</a> </li><li> <a href="/categoria/miscelanea/">Miscelânea</a> </li><li> <a href="/categoria/react/">React</a> </li><li> <a href="/categoria/seo/">SEO</a> </li><li> <a href="/categoria/ui-ux/">UI/UX</a> </li> </ul> </nav> </div> </div> </div> <script type="module">let s=null,a=[];function u(o,r){const{scrollTop:e,scrollHeight:l,clientHeight:t}=o,n=e>0,c=e+t>=l-1;n?r.setAttribute("data-scroll-top",""):r.removeAttribute("data-scroll-top"),!c&&l>t?r.setAttribute("data-scroll-bottom",""):r.removeAttribute("data-scroll-bottom")}function f(){s&&(s(),s=null),a.forEach(e=>e()),a=[],document.querySelectorAll("[data-popover-trigger]").forEach(e=>{const l=e.dataset.popoverTrigger;if(!l)return;const t=document.getElementById(l);if(!t)return;const n=t.querySelector(`[data-scroll-container="${l}"]`),c=t.querySelector(`[data-gradient-wrapper="${l}"]`);if(!n||!c)return;t.addEventListener("beforetoggle",i=>{if(i.newState==="open"){const p=e.getBoundingClientRect();t.style.left=`${p.left}px`}}),t.addEventListener("toggle",i=>{i.newState==="open"&&u(n,c)});const d=()=>{u(n,c)};n.addEventListener("scroll",d,{passive:!0}),a.push(()=>{n.removeEventListener("scroll",d)})});let o=!1;const r=()=>{o||(requestAnimationFrame(()=>{document.querySelectorAll("[popover]:popover-open").forEach(e=>{e.hidePopover()}),o=!1}),o=!0)};window.addEventListener("scroll",r,{passive:!0}),s=()=>{window.removeEventListener("scroll",r)}}document.addEventListener("astro:page-load",f);document.addEventListener("astro:before-swap",()=>{s&&(s(),s=null),a.forEach(o=>o()),a=[]});</script> <button popovertarget="projetos-popover" class="c-navbar__menu-btn" data-popover-trigger="projetos-popover"> Projetos </button> <div popover id="projetos-popover" class="c-navbar-popover"> <div class="c-navbar-popover__gradient-wrapper" data-gradient-wrapper="projetos-popover"> <div class="c-navbar-popover__scroll-container" data-scroll-container="projetos-popover"> <nav> <ul> <li> <a href="https://layouts1linha.desenvolvimentoparaweb.com/">Layouts com 1 Linha de CSS</a> </li><li> <a href="https://recursosfrontend.desenvolvimentoparaweb.com/">Recursos Front-end</a> </li><li> <a href="https://aspect-ratio.desenvolvimentoparaweb.com/">Calculadora Aspect Ratio</a> </li> </ul> </nav> </div> </div> </div>  </div> <button type="button" class="c-navbar__hamburger" data-hamburger aria-label="Abrir menu" aria-expanded="false"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-menu"> <path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path>  </svg> </button> </div> <div class="c-navbar__right"> <site-search data-astro-transition-persist="astro-kb3wyqqb-2"> <button type="button" class="c-navbar__action-btn" data-open-modal aria-label="Buscar"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="translate: 0 3px; scale: 1.2;" class="lucide lucide-search"> <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>  </svg> </button> <dialog aria-label="Buscar no blog"> <div class="dialog-frame" role="document"> <div class="dialog-header"> <h2>Buscar</h2> <button type="button" data-close-modal aria-label="Fechar"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x"> <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>  </svg> </button> </div> <input class="dialog-input" id="search-input" type="search" placeholder="Buscar artigos..." aria-label="Termo de busca" autocomplete="off"> <div class="search-results-wrapper"> <div class="search-results" role="region" aria-live="polite"></div> </div> </div> </dialog> </site-search> <script>(function(){const recentPosts = [{"title":"7 receitas de View Transitions para experimentar","description":"Sete animações prontas para páginas com View Transitions do CSS — pixel dissolve, wipe, rotação, círculo, diagonal, cortina e 3D flip.","url":"/css/7-receitas-de-view-transitions/"},{"title":"Traga de volta o design idiomático","description":"A era do software desktop oferecia interfaces consistentes por meio de idiomas de design. A web perdeu isso. E é hora de resgatar.","url":"/ui-ux/traga-de-volta-o-design-idiomatico/"},{"title":"A grande expansão do CSS","description":"CSS agora faz nativamente o que Floating UI, GSAP, Framer Motion e react-select exigiam em JavaScript. Veja quanto isso economiza e o que ainda falta.","url":"/css/a-grande-expansao-do-css/"},{"title":"Item Flow: o novo sistema de layout para CSS","description":"Conheça o Item Flow, proposta CSS que unifica flex-flow e grid-auto-flow em um sistema só, com masonry integrado. Notas e análise da nova sintaxe.","url":"/css/item-flow-sistema-layout-css/"},{"title":"Substituindo funções de cor do Sass por CSS nativo","description":"Guia prático para substituir funções de cor do Sass como lighten(), darken() e tint() por CSS moderno com color-mix() e sintaxe de cores relativas.","url":"/css/substituindo-funcoes-de-cor-sass-por-css-nativo/"},{"title":"A primeira regra de ARIA aprendida da maneira difícil","description":"Um atributo ARIA bem-intencionado quebrou a acessibilidade de um componente que passava em todos os testes. Entenda a primeira regra de ARIA.","url":"/acessibilidade/a-primeira-regra-de-aria-aprendida-da-maneira-dificil/"},{"title":"contrast-color(): contraste de texto com CSS puro","description":"A função CSS contrast-color() retorna automaticamente preto ou branco para garantir contraste de cores, melhorando a acessibilidade. Conheça a novidade!","url":"/acessibilidade/css-contrast-color/"},{"title":"A IA gera CSS, mas você sabe se é bom?","description":"A IA escreve CSS em segundos, mas gera código desorganizado e insustentável. Descubra por que arquitetura CSS é a habilidade que separa quem usa IA com critério de quem apenas aceita o que ela cospe.","url":"/css/ia-gera-css-mas-voce-sabe-se-e-bom/"},{"title":"Guia para revisões eficientes de UX e UI","description":"Como conduzir revisões de UX e UI: processos, cenários práticos, testes A/B, acessibilidade e iteração contínua para produtos digitais melhores.","url":"/ui-ux/guia-revisoes-eficientes-ux-ui/"},{"title":"10 princípios de design que todo designer deve conhecer","description":"Conheça 10 princípios essenciais de design com exemplos reais de produtos. Regras que guiam decisões adequadas para criar interfaces mais usáveis e eficazes.","url":"/design/10-principios-design-essenciais/"}];

  class SiteSearch extends HTMLElement {
    constructor() {
      super();

      const openBtn = this.querySelector('[data-open-modal]');
      const closeBtn = this.querySelector('[data-close-modal]');
      const dialog = this.querySelector('dialog');
      const input = this.querySelector('#search-input');
      const resultsEl = this.querySelector('.search-results');
      const resultsWrapper = this.querySelector('.search-results-wrapper');

      if (!openBtn || !closeBtn || !dialog || !input || !resultsEl || !resultsWrapper) return;

      let pagefind = null;
      let currentIndex = -1;

      const updateResultsGradients = () => {
        const { scrollTop, scrollHeight, clientHeight } = resultsEl;

        if (scrollTop > 0) {
          resultsWrapper.setAttribute('data-scroll-top', '');
        } else {
          resultsWrapper.removeAttribute('data-scroll-top');
        }

        if (scrollHeight > clientHeight && scrollTop + clientHeight < scrollHeight - 1) {
          resultsWrapper.setAttribute('data-scroll-bottom', '');
        } else {
          resultsWrapper.removeAttribute('data-scroll-bottom');
        }
      };

      resultsEl.addEventListener('scroll', updateResultsGradients, { passive: true });

      // Update gradients after results are rendered
      const observeResults = new MutationObserver(() => {
        requestAnimationFrame(updateResultsGradients);
      });
      observeResults.observe(resultsEl, { childList: true });

      const displayInitialState = () => {
        currentIndex = -1;
        resultsEl.innerHTML =
          '<p class="search-results__heading">Artigos recentes</p>' +
          recentPosts
            .map(
              (post) =>
                '<a href="' + post.url + '" class="search-result">' +
                  '<h3 class="search-result__title">' + post.title + '</h3>' +
                  '<p class="search-result__description">' + post.description + '</p>' +
                '</a>'
            )
            .join('');
      };

      const displayResults = async (results) => {
        currentIndex = -1;

        if (!results || results.results.length === 0) {
          resultsEl.innerHTML =
            '<div class="search-results__empty">' +
              '<p class="search-results__empty-title">Nenhum resultado encontrado</p>' +
              '<p class="search-results__empty-suggestion">Tente termos mais gen\u00e9ricos ou palavras-chave diferentes</p>' +
            '</div>';
          return;
        }

        const data = await Promise.all(
          results.results.slice(0, 10).map((r) => r.data())
        );

        if (data.length === 0) {
          resultsEl.innerHTML =
            '<div class="search-results__empty">' +
              '<p class="search-results__empty-title">Nenhum resultado encontrado</p>' +
              '<p class="search-results__empty-suggestion">Tente termos mais gen\u00e9ricos ou palavras-chave diferentes</p>' +
            '</div>';
          return;
        }

        resultsEl.innerHTML = data
          .map(
            (result) =>
              '<a href="' + result.url + '" class="search-result">' +
                '<h3 class="search-result__title">' + result.meta.title + '</h3>' +
                '<p class="search-result__description">' + result.excerpt + '</p>' +
              '</a>'
          )
          .join('');
      };

      const displayLoading = () => {
        resultsEl.innerHTML = '<p class="search-results__loading">Carregando busca...</p>';
      };

      const openModal = async () => {
        dialog.showModal();
        document.documentElement.style.overflow = 'hidden';
        displayInitialState();
        input.focus();

        if (!pagefind) {
          displayLoading();
          try {
            pagefind = await import('/pagefind/pagefind.js');
            await pagefind.init();
            displayInitialState();
          } catch (err) {
            console.error('Pagefind failed to load:', err);
            displayInitialState();
          }
        }
      };

      const closeModal = () => {
        dialog.close();
        document.documentElement.style.overflow = '';
        input.value = '';
        currentIndex = -1;
      };

      // Open button
      openBtn.addEventListener('click', openModal);

      // Close button
      closeBtn.addEventListener('click', closeModal);

      // Click backdrop to close
      dialog.addEventListener('click', (e) => {
        if (e.target === dialog) closeModal();
      });

      // Restore scroll on native dialog close (Esc key)
      dialog.addEventListener('close', () => {
        document.documentElement.style.overflow = '';
        input.value = '';
        currentIndex = -1;
      });

      // Close modal when clicking result link
      resultsEl.addEventListener('click', (e) => {
        if (e.target.closest('a')) {
          closeModal();
        }
      });

      // Search input handler
      input.addEventListener('input', async (e) => {
        const term = e.target.value;

        if (term.length < 2) {
          displayInitialState();
          return;
        }

        if (!pagefind) return;

        const results = await pagefind.debouncedSearch(term);

        // Null means a subsequent call was made, ignore
        if (results === null) return;

        await displayResults(results);
      });

      // Keyboard navigation on dialog
      dialog.addEventListener('keydown', (e) => {
        const resultLinks = resultsEl.querySelectorAll('a.search-result');
        if (resultLinks.length === 0) return;

        if (e.key === 'ArrowDown') {
          e.preventDefault();
          currentIndex = Math.min(currentIndex + 1, resultLinks.length - 1);
          resultLinks[currentIndex]?.focus();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          currentIndex = Math.max(currentIndex - 1, -1);
          if (currentIndex === -1) {
            input.focus();
          } else {
            resultLinks[currentIndex]?.focus();
          }
        }
      });

      // Global keyboard shortcut (Ctrl+K / Cmd+K)
      const handleKeyboardShortcut = (e) => {
        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
          e.preventDefault();
          dialog.open ? closeModal() : openModal();
        }
      };

      window.addEventListener('keydown', handleKeyboardShortcut);

      // Re-attach shortcut on View Transitions page loads
      document.addEventListener('astro:page-load', () => {
        window.removeEventListener('keydown', handleKeyboardShortcut);
        window.addEventListener('keydown', handleKeyboardShortcut);
      });
    }
  }

  customElements.define('site-search', SiteSearch);
})();</script>  <button type="button" class="c-theme-toggle" data-theme-toggle aria-label="Alternar tema claro/escuro" data-astro-cid-x3pjskd3> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3="true" class="lucide lucide-moon c-theme-toggle__icon c-theme-toggle__icon--light"> <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path>  </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-x3pjskd3="true" class="lucide lucide-sun c-theme-toggle__icon c-theme-toggle__icon--dark"> <circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path>  </svg> </button> <script type="module">function c(){const n=document.querySelector("[data-theme-toggle]");n&&n.addEventListener("click",()=>{const e=document.documentElement,t=(e.dataset.theme||"light")==="light"?"dark":"light",o=()=>{e.dataset.theme=t,e.style.colorScheme=t,localStorage.setItem("theme",t)};if(!document.startViewTransition){o();return}document.startViewTransition(o)})}document.addEventListener("astro:page-load",c);</script>  </div> </div> </nav> <!-- Mobile drawer --> <div class="c-navbar-drawer" data-drawer> <details class="c-navbar-drawer__section"> <summary>
Categorias
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down c-navbar-drawer__chevron"> <path d="m6 9 6 6 6-6"></path>  </svg> </summary> <ul class="c-navbar-drawer__list"> <li> <a href="/categoria/css/">CSS</a> </li><li> <a href="/categoria/design/">Design</a> </li><li> <a href="/categoria/html/">HTML</a> </li><li> <a href="/categoria/acessibilidade/">Acessibilidade</a> </li><li> <a href="/categoria/indicacoes/">Indicações</a> </li><li> <a href="/categoria/javascript/">JavaScript</a> </li><li> <a href="/categoria/miscelanea/">Miscelânea</a> </li><li> <a href="/categoria/react/">React</a> </li><li> <a href="/categoria/seo/">SEO</a> </li><li> <a href="/categoria/ui-ux/">UI/UX</a> </li> </ul> </details> <details class="c-navbar-drawer__section"> <summary>
Projetos
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down c-navbar-drawer__chevron"> <path d="m6 9 6 6 6-6"></path>  </svg> </summary> <ul class="c-navbar-drawer__list"> <li> <a href="https://layouts1linha.desenvolvimentoparaweb.com/">Layouts com 1 Linha de CSS</a> </li><li> <a href="https://recursosfrontend.desenvolvimentoparaweb.com/">Recursos Front-end</a> </li><li> <a href="https://aspect-ratio.desenvolvimentoparaweb.com/">Calculadora Aspect Ratio</a> </li> </ul> </details> </div> <!-- Drawer overlay --> <div class="c-navbar-drawer__overlay" data-drawer-overlay></div> <script type="module">let n=window.scrollY,d=!1;function c(){const e=document.querySelector("[data-navbar]"),t=window.scrollY;t>60&&t>n?e?.setAttribute("data-hidden",""):e?.removeAttribute("data-hidden"),n=t,d=!1}function u(){d||(requestAnimationFrame(c),d=!0)}function l(){const e=document.querySelector("[data-drawer]"),t=document.querySelector("[data-drawer-overlay]"),r=document.querySelector("[data-hamburger]");e?.hasAttribute("data-open")?(e?.removeAttribute("data-open"),t?.removeAttribute("data-open"),r?.setAttribute("aria-expanded","false"),document.body.style.overflow=""):(e?.setAttribute("data-open",""),t?.setAttribute("data-open",""),r?.setAttribute("aria-expanded","true"),document.body.style.overflow="hidden")}function o(){const e=document.querySelector("[data-drawer]"),t=document.querySelector("[data-drawer-overlay]"),r=document.querySelector("[data-hamburger]");e?.removeAttribute("data-open"),t?.removeAttribute("data-open"),r?.setAttribute("aria-expanded","false"),document.body.style.overflow=""}function i(){n=window.scrollY,window.addEventListener("scroll",u,{passive:!0}),document.querySelector("[data-hamburger]")?.addEventListener("click",l),document.querySelector("[data-drawer-overlay]")?.addEventListener("click",o),document.querySelectorAll("[data-drawer] a").forEach(a=>{a.addEventListener("click",o)}),document.addEventListener("keydown",a=>{a.key==="Escape"&&o()})}document.addEventListener("astro:page-load",i);document.addEventListener("astro:before-preparation",o);</script> <main data-astro-cid-37fxchfa data-astro-transition-scope="astro-uvewtcd5-1">  <div class="l-listing-stripes"></div> <div class="l-listing-layout"> <div class="l-listing-posts"> <article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/css/" class="l-listing-post__badge">CSS</a> <h2 class="l-listing-post__title"> <a href="/css/7-receitas-de-view-transitions/">7 receitas de View Transitions para experimentar</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-04-23T12:00:00.000Z" data-astro-cid-qtyrxm4s>23/04/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 6min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/animacao-css/" data-astro-cid-qtyrxm4s>Animação CSS</a> </div> </div>  <p class="l-listing-post__description">Sete animações prontas para páginas com View Transitions do CSS — pixel dissolve, wipe, rotação, círculo, diagonal, cortina e 3D flip.</p> <a href="/css/7-receitas-de-view-transitions/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/ui-ux/" class="l-listing-post__badge">UI/UX</a> <h2 class="l-listing-post__title"> <a href="/ui-ux/traga-de-volta-o-design-idiomatico/">Traga de volta o design idiomático</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-04-13T12:00:00.000Z" data-astro-cid-qtyrxm4s>13/04/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 22min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/interface/" data-astro-cid-qtyrxm4s>Interface, </a><a href="/tag/usabilidade/" data-astro-cid-qtyrxm4s>Usabilidade</a> </div> </div>   <a href="/ui-ux/traga-de-volta-o-design-idiomatico/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/css/" class="l-listing-post__badge">CSS</a> <h2 class="l-listing-post__title"> <a href="/css/a-grande-expansao-do-css/">A grande expansão do CSS</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-04-09T00:00:00.000Z" data-astro-cid-qtyrxm4s>09/04/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 35min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/animacao-css/" data-astro-cid-qtyrxm4s>Animação CSS, </a><a href="/tag/performance/" data-astro-cid-qtyrxm4s>Performance, </a><a href="/tag/layout/" data-astro-cid-qtyrxm4s>Layout</a> </div> </div>   <a href="/css/a-grande-expansao-do-css/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/css/" class="l-listing-post__badge">CSS</a> <h2 class="l-listing-post__title"> <a href="/css/item-flow-sistema-layout-css/">Item Flow: o novo sistema de layout para CSS</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-30T00:00:00.000Z" data-astro-cid-qtyrxm4s>30/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 5min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/css-grid/" data-astro-cid-qtyrxm4s>CSS Grid, </a><a href="/tag/flexbox/" data-astro-cid-qtyrxm4s>Flexbox, </a><a href="/tag/layout/" data-astro-cid-qtyrxm4s>Layout</a> </div> </div>   <a href="/css/item-flow-sistema-layout-css/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/css/" class="l-listing-post__badge">CSS</a> <h2 class="l-listing-post__title"> <a href="/css/substituindo-funcoes-de-cor-sass-por-css-nativo/">Substituindo funções de cor do Sass por CSS nativo</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-26T00:00:00.000Z" data-astro-cid-qtyrxm4s>26/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 6min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/sass/" data-astro-cid-qtyrxm4s>Sass</a> </div> </div>   <a href="/css/substituindo-funcoes-de-cor-sass-por-css-nativo/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/acessibilidade/" class="l-listing-post__badge">Acessibilidade</a> <h2 class="l-listing-post__title"> <a href="/acessibilidade/a-primeira-regra-de-aria-aprendida-da-maneira-dificil/">A primeira regra de ARIA aprendida da maneira difícil</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-23T12:00:00.000Z" data-astro-cid-qtyrxm4s>23/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 9min para ler
</div>   </div>   <a href="/acessibilidade/a-primeira-regra-de-aria-aprendida-da-maneira-dificil/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/acessibilidade/" class="l-listing-post__badge">Acessibilidade</a> <h2 class="l-listing-post__title"> <a href="/acessibilidade/css-contrast-color/">contrast-color(): contraste de texto com CSS puro</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-19T00:00:00.000Z" data-astro-cid-qtyrxm4s>19/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 4min para ler
</div>   </div>   <a href="/acessibilidade/css-contrast-color/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/css/" class="l-listing-post__badge">CSS</a> <h2 class="l-listing-post__title"> <a href="/css/ia-gera-css-mas-voce-sabe-se-e-bom/">A IA gera CSS, mas você sabe se é bom?</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-13T00:00:00.000Z" data-astro-cid-qtyrxm4s>13/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 10min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/boas-praticas/" data-astro-cid-qtyrxm4s>Boas Práticas, </a><a href="/tag/planejamento/" data-astro-cid-qtyrxm4s>Planejamento</a> </div> </div>   <a href="/css/ia-gera-css-mas-voce-sabe-se-e-bom/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/ui-ux/" class="l-listing-post__badge">UI/UX</a> <h2 class="l-listing-post__title"> <a href="/ui-ux/guia-revisoes-eficientes-ux-ui/">Guia para revisões eficientes de UX e UI</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-09T12:00:00.000Z" data-astro-cid-qtyrxm4s>09/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 7min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/interface/" data-astro-cid-qtyrxm4s>Interface, </a><a href="/tag/usabilidade/" data-astro-cid-qtyrxm4s>Usabilidade, </a><a href="/tag/planejamento/" data-astro-cid-qtyrxm4s>Planejamento, </a><a href="/tag/analise/" data-astro-cid-qtyrxm4s>Análise</a> </div> </div>   <a href="/ui-ux/guia-revisoes-eficientes-ux-ui/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article><article class="l-listing-post"> <div class="l-listing-post__content"> <a href="/categoria/design/" class="l-listing-post__badge">Design</a> <h2 class="l-listing-post__title"> <a href="/design/10-principios-design-essenciais/">10 princípios de design que todo designer deve conhecer</a> </h2> <div class="c-post-meta" data-astro-cid-qtyrxm4s> <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-calendar"> <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>  </svg></span> <time datetime="2026-03-09T00:00:00.000Z" data-astro-cid-qtyrxm4s>09/03/2026</time> </div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-clock"> <path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle>  </svg></span> 31min para ler
</div>  <div class="c-post-meta__item" data-astro-cid-qtyrxm4s> <span aria-hidden="true" data-astro-cid-qtyrxm4s><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-qtyrxm4s="true" class="lucide lucide-tag"> <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>  </svg></span> <a href="/tag/interface/" data-astro-cid-qtyrxm4s>Interface, </a><a href="/tag/usabilidade/" data-astro-cid-qtyrxm4s>Usabilidade, </a><a href="/tag/web-design/" data-astro-cid-qtyrxm4s>Web Design</a> </div> </div>   <a href="/design/10-principios-design-essenciais/" class="l-listing-post__link" rel="nofollow">Ler artigo</a> </div> </article> </div> <aside class="l-listing-sidebar"> <div class="c-chip-sidebar" data-astro-cid-lm2yh3ye> <h2 data-astro-cid-lm2yh3ye>Categorias</h2> <div class="c-chip-sidebar__chips" data-astro-cid-lm2yh3ye> <a href="/categoria/acessibilidade/" class="c-chip" data-astro-cid-b4zvghpy>Acessibilidade</a> <a href="/categoria/css/" class="c-chip" data-astro-cid-b4zvghpy>CSS</a> <a href="/categoria/design/" class="c-chip" data-astro-cid-b4zvghpy>Design</a> <a href="/categoria/html/" class="c-chip" data-astro-cid-b4zvghpy>HTML</a> <a href="/categoria/indicacoes/" class="c-chip" data-astro-cid-b4zvghpy>Indicações</a> <a href="/categoria/javascript/" class="c-chip" data-astro-cid-b4zvghpy>JavaScript</a> <a href="/categoria/miscelanea/" class="c-chip" data-astro-cid-b4zvghpy>Miscelânea</a> <a href="/categoria/react/" class="c-chip" data-astro-cid-b4zvghpy>React</a> <a href="/categoria/seo/" class="c-chip" data-astro-cid-b4zvghpy>SEO</a> <a href="/categoria/ui-ux/" class="c-chip" data-astro-cid-b4zvghpy>UI/UX</a>  </div> </div>  </aside> </div>  </main> </div> <footer class="c-footer" data-astro-cid-sz7xmlte> <div class="c-footer__inner" data-astro-cid-sz7xmlte> <div class="c-footer__main" data-astro-cid-sz7xmlte> <nav class="c-footer__nav c-footer__nav--categories" aria-label="Categorias do blog" data-astro-cid-sz7xmlte> <h2 data-astro-cid-sz7xmlte>Categorias</h2> <div class="c-footer__chips" data-astro-cid-sz7xmlte> <a href="/categoria/css/" class="c-chip" data-astro-cid-b4zvghpy>CSS</a> <a href="/categoria/design/" class="c-chip" data-astro-cid-b4zvghpy>Design</a> <a href="/categoria/html/" class="c-chip" data-astro-cid-b4zvghpy>HTML</a> <a href="/categoria/acessibilidade/" class="c-chip" data-astro-cid-b4zvghpy>Acessibilidade</a> <a href="/categoria/javascript/" class="c-chip" data-astro-cid-b4zvghpy>JavaScript</a> <a href="/categoria/miscelanea/" class="c-chip" data-astro-cid-b4zvghpy>Miscelânea</a> <a href="/categoria/react/" class="c-chip" data-astro-cid-b4zvghpy>React</a> <a href="/categoria/seo/" class="c-chip" data-astro-cid-b4zvghpy>SEO</a> <a href="/categoria/ui-ux/" class="c-chip" data-astro-cid-b4zvghpy>UI/UX</a> <a href="/categoria/indicacoes/" class="c-chip" data-astro-cid-b4zvghpy>Indicações</a>  </div> </nav> <nav class="c-footer__nav" aria-label="Páginas fixas" data-astro-cid-sz7xmlte> <h2 data-astro-cid-sz7xmlte>Páginas</h2> <ul data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="/sobre/" data-astro-cid-sz7xmlte>Sobre</a> </li><li data-astro-cid-sz7xmlte> <a href="/politica-de-privacidade/" data-astro-cid-sz7xmlte>Política de Privacidade</a> </li> </ul> </nav> <nav class="c-footer__nav" aria-label="Redes sociais" data-astro-cid-sz7xmlte> <h2 data-astro-cid-sz7xmlte>Redes Sociais</h2> <ul class="c-footer__social" data-astro-cid-sz7xmlte> <li data-astro-cid-sz7xmlte> <a href="https://x.com/desenvolvweb" target="_blank" rel="noopener noreferrer" aria-label="Acessar X do dpw" data-social="x" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-sz7xmlte="true" class="lucide lucide-x-icon"> <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231z" fill="currentColor" stroke="none"></path>  </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="https://www.youtube.com/@dpwoficial" target="_blank" rel="noopener noreferrer" aria-label="Acessar YouTube do dpw" data-social="youtube" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="scale:1.25" data-astro-cid-sz7xmlte="true" class="lucide lucide-youtube-icon"> <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" fill="currentColor" stroke="none"></path>  </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="https://www.instagram.com/desenvolvweb/" target="_blank" rel="noopener noreferrer" aria-label="Acessar Instagram do dpw" data-social="instagram" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-astro-cid-sz7xmlte="true" class="lucide lucide-instagram-icon"> <path fill="currentColor" stroke="none" d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"></path>  </svg> </a> </li><li data-astro-cid-sz7xmlte> <a href="/rss.xml" target="_blank" rel="noopener noreferrer" aria-label="Acessar RSS do dpw" data-social="rss" data-astro-cid-sz7xmlte> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="scale:1.1;translate:0 -1px" data-astro-cid-sz7xmlte="true" class="lucide lucide-rss-icon"> <path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle>  </svg> </a> </li> </ul> </nav> </div> <div class="c-footer__credits" data-astro-cid-sz7xmlte> <p data-astro-cid-sz7xmlte><strong data-astro-cid-sz7xmlte>dpw</strong> é mantido pela <a href="https://webfatorial.com" target="_blank" rel="noopener noreferrer" data-astro-cid-sz7xmlte>webfatorial</a> e usa a licença <a href="http://www.wtfpl.net/" target="_blank" rel="noopener noreferrer" data-astro-cid-sz7xmlte>WTFPL</a>.</p> </div> </div> </footer>  <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-HX9PE78RVM"></script> <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-HX9PE78RVM');
    </script> <script type="module">document.addEventListener("astro:before-swap",e=>{const m=document.documentElement.dataset.theme,t=document.documentElement.style.colorScheme;e.newDocument.documentElement.dataset.theme=m,e.newDocument.documentElement.style.colorScheme=t});const n=window.matchMedia("(prefers-color-scheme: dark)");n.addEventListener("change",e=>{if(!localStorage.getItem("theme")){const t=e.matches?"dark":"light";document.documentElement.dataset.theme=t,document.documentElement.style.colorScheme=t}});</script> <!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "33547e4603bc479686412534248fc223"}'></script><!-- Cloudflare Pages Analytics --></body> </html> 