/* ============================================================ Digital Artisan — linguagem das paginas claras Fonte: Synapsis (self-hosted, shared/synapsis.css) e IvyPresto Display (kit Adobe) — as duas carregadas no antes deste arquivo. Este arquivo carrega o SISTEMA: tokens, reset, chrome fixo (moldura, marca, nav) e o vocabulario compartilhado das quatro rotas — pauta, secao, regua de capitulos, campo, acao e fecho. O que e proprio de uma pagina vive no CSS dela. Nenhum estilo aqui pode existir como atributo inline: a CSP de producao declara style-src-attr 'none', e scripts/sync-csp.mjs recusa o build se um style= aparecer no HTML pronto. ============================================================ */ :root{ --graphite:#202025; --brand-amber:#C05518; --brand-amber-text:#A25408; /* ambar clareado — a tinta da marca nao sobrevive ao grafite: sobre a superficie escura ela perde contraste e vira borra. o mesmo pigmento lavado com papel volta a ler como ambar, e nenhuma cor nova entra no sistema. so aparece DENTRO do fecho e do colofao. */ --ambar-claro:color-mix(in srgb,#C05518 75%,#F2EFE7); --logo-ink:var(--graphite); /* a logo nao entra na troca de paleta */ --logo-sun:var(--brand-amber); --bg:#F2EFE7; --papel:#F2EFE7; /* o papel como TINTA: valor fixo, sobrevive a troca */ --fg:var(--brand-amber); --accent:var(--graphite); --accent-text:var(--graphite); --amber:var(--accent); --cursor-select:var(--accent-text); --muted:var(--fg); --faint:var(--fg); --line:color-mix(in srgb,var(--fg) 18%,transparent); /* geometria portante: um modulo e um angulo, so isso. */ --mod:66px; --ang:45deg; --chanfro:22px; --cota:color-mix(in srgb,var(--fg) 22%,transparent); --guia:color-mix(in srgb,var(--fg) 20%,transparent); --veil:color-mix(in srgb,var(--bg) 84%,white 16%); /* as diagonais — a trama de 135 graus e a textura da marca. duas versoes do mesmo gesto: sobre papel o fio e ambar rebaixado e o passo e curto (24px, ritmo de campo de texto); sobre grafite o fio e papel e o passo e longo (72px, um modulo inteiro), senao a trama vibra e briga com a leitura no escuro. */ --diagonais-papel:repeating-linear-gradient(135deg,transparent 0 23px,color-mix(in srgb,var(--fg) 6%,transparent) 23px 24px); --diagonais-fecho:repeating-linear-gradient(135deg,transparent 0 71px,rgba(252,251,248,.09) 71px 72px); /* estrutura: Synapsis (propria) · voz: IvyPresto Display (Adobe Fonts). os nomes antigos ficam como apelido para nao tocar nos ~200 usos. */ --synapsis:"Synapsis",system-ui,"Helvetica Neue",Arial,sans-serif; --ivypresto:"ivypresto-display",Georgia,"Times New Roman",serif; --grot:var(--synapsis); --clash:var(--synapsis); --mono:var(--synapsis); --display:var(--synapsis); --serif:var(--ivypresto); --serif-drawn:var(--ivypresto); /* geometria do contentor: duas medidas, nao uma. a pagina de LEITURA (manifesto, artesao) fecha em 1320 para a linha nao passar do confortavel; a pagina de CATALOGO (portal, portfolio) abre em 1560 porque ali o conteudo e campo, nao paragrafo. */ --medida:1320px; --medida-larga:1560px; /* altura da nav fixa — FONTE UNICA. todo padding de topo de pagina deriva dela. enquanto o valor viveu em dois lugares, o estreito divergiu e a nav comeu a primeira regua da pagina. */ --nav-h:72px; --respiro:clamp(24px,5vw,96px); --respiro-largo:clamp(24px,4vw,72px); --colunas:2; --vao:clamp(34px,5vw,84px); --borda-esq:max(var(--respiro),calc((100% - var(--medida))/2 + var(--respiro))); --ink:var(--fg); --ease:cubic-bezier(.16,1,.3,1); } html[data-da-palette="graphite-amber"] body:not([data-screen-label^="Atelier"]){ --fg:var(--graphite); --accent:var(--brand-amber); --accent-text:var(--brand-amber-text); --amber:var(--accent); --cursor-select:var(--accent); --muted:var(--graphite); --faint:var(--graphite); } *{box-sizing:border-box;margin:0;padding:0} html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden} html:focus-within{scroll-behavior:smooth} body{ /* CAIXA — caixa-baixa e o PADRAO do texto, nao um decreto sobre a pagina inteira. a maiuscula continua sendo um segundo alfabeto redundante quando repete o que o peso, o corpo e a posicao na grade ja dizem: no texto corrido, no rotulo, no link, ela nao acrescenta hierarquia — acrescenta ruido. A EXCECAO e o display. Ali a caixa-alta nao esta duplicando o alfabeto: esta desenhando um bloco. O titulo em Synapsis 900 e massa geometrica antes de ser palavra, e a caixa-alta e o que da a ele o retangulo cheio — a mesma logica do cartaz, onde a letra e forma construida. Por isso a excecao se pede POR NOME (.display, .rotulo), nunca por heranca: quem quiser a maiuscula precisa declarar que aquilo e display. */ text-transform:lowercase; min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--synapsis); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } /* controles de formulario nao herdam text-transform: o agente de usuario declara none no proprio elemento, e isso vence o valor herdado. */ button,input,select,textarea,[role="button"]{text-transform:inherit} /* nome proprio nao e palavra: e identidade. "Patric Teixeira", "Digital Artisan", "WhatsApp", "SEO" se escrevem como se chamam, e a caixa-baixa integral pararia neles. a excecao se pede POR NOME, como manda o sistema — e vale onde o texto herda a caixa do corpo, nunca dentro de um display, que e forma construida, nao grafia. */ .proprio{text-transform:none} /* o display — titulo, numeral de secao, rotulo de acao. */ .display{font-family:var(--synapsis);font-weight:900;text-transform:uppercase;color:var(--fg)} .rotulo{text-transform:uppercase} /* a VOZ dentro do display: IvyPresto italica, caixa do texto-fonte. e o unico lugar onde a maiuscula do display se interrompe — porque ali a serifa ja faz o contraste que a caixa faria. */ .voz{font-family:var(--ivypresto);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--accent)} a{color:inherit;text-decoration:none} button{font:inherit;text-transform:inherit;color:inherit;background:none;border:0;cursor:pointer} img,svg,video{display:block;max-width:100%} ::selection{background:var(--cursor-select);color:#FCFBF8} ::-moz-selection{background:var(--cursor-select);color:#FCFBF8} :focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 72%,transparent);outline-offset:4px} .skip-link{ position:fixed;left:8px;top:-64px;z-index:200;background:var(--fg);color:var(--bg); padding:8px 16px;font-size:12px;letter-spacing:0.04em; transition:top .2s var(--ease); } .skip-link:focus{top:8px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- campo de fundo ---------- */ .field-paper{position:fixed;inset:0;z-index:-3;background:var(--bg)} .field-cols{position:fixed;inset:0;z-index:-2;pointer-events:none; background-image:linear-gradient(var(--guia),var(--guia)),linear-gradient(var(--guia),var(--guia)),linear-gradient(var(--guia),var(--guia)),linear-gradient(var(--guia),var(--guia)); background-size:1px 100%,1px 100%,1px 100%,1px 100%; background-repeat:no-repeat; background-position:var(--borda-esq) 0,calc(50% - var(--vao)/2) 0,calc(50% + var(--vao)/2) 0,calc(100% - var(--borda-esq)) 0} /* ---------- moldura de prancheta ---------- o canto declara o chanfro a 45 graus e a aresta de baixo carrega a regua do modulo. desenho de prancheta, nao borda decorativa. */ .frame{position:fixed;inset:16px;z-index:50;pointer-events:none} .frame::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:6px; background-image:repeating-linear-gradient(to right,var(--cota) 0 1px,transparent 1px var(--mod)); } .corner{position:absolute;width:var(--chanfro);height:var(--chanfro); background-repeat:no-repeat;background-size:100% 100%} .corner.tl,.corner.br{background-image:linear-gradient(135deg,transparent calc(50% - .5px),var(--cota) calc(50% - .5px),var(--cota) calc(50% + .5px),transparent calc(50% + .5px))} .corner.tr,.corner.bl{background-image:linear-gradient(45deg,transparent calc(50% - .5px),var(--cota) calc(50% - .5px),var(--cota) calc(50% + .5px),transparent calc(50% + .5px))} .corner.tl{top:0;left:0}.corner.tr{top:0;right:0}.corner.bl{bottom:0;left:0}.corner.br{bottom:0;right:0} /* ---------- marca no canto + navegacao ---------- */ .da-corner{ position:fixed;top:12px;left:32px;z-index:81;display:block;width:48px;height:48px; color:var(--logo-ink);transition:transform .2s var(--ease); } .da-corner svg{display:block;width:100%;height:100%} .da-corner:hover{transform:scale(1.05)} .da-topnav{ position:fixed;top:0;left:0;right:0;z-index:80;min-height:var(--nav-h); display:flex;align-items:center;justify-content:flex-end;gap:clamp(8px,1.7vw,24px); padding:0 24px 0 96px;flex-wrap:wrap; /* o papel translucido com desfoque: a nav flutua sobre a composicao sem cortar a pagina em duas. */ background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent); } .da-topnav .dt-link{ position:relative;display:inline-flex;align-items:center;min-height:44px; font-weight:600;font-size:clamp(15px,.98vw,21px);letter-spacing:0.03em; white-space:nowrap;color:var(--fg); border-bottom:2px solid transparent;padding-bottom:2px; transition:color .18s ease,border-color .18s ease; } .da-topnav .dt-link:hover,.da-topnav .dt-link:focus-visible{color:var(--accent-text)} .da-topnav .dt-link[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)} .da-palette-cluster{display:inline-flex;align-items:center;gap:8px;margin-right:auto;min-width:0} .da-palette-label{ font-weight:600;font-size:12px;letter-spacing:0.047em; white-space:nowrap;color:var(--fg); } .da-palette-switch{ flex:none;display:inline-flex;align-items:center;height:32px; border:1px solid color-mix(in srgb,var(--fg) 24%,transparent); background:color-mix(in srgb,var(--bg) 90%,white 10%); transition:border-color .18s ease; } .da-palette-switch:hover{border-color:color-mix(in srgb,var(--fg) 42%,transparent)} .da-palette-toggle{ appearance:none;border:0;background:transparent;cursor:pointer;height:100%;padding:0 8px; display:inline-flex;align-items:center;justify-content:center;gap:4px; transition:transform .22s var(--ease); } .da-palette-toggle:hover{transform:rotate(180deg)} /* as bolinhas trocam de lado: previa da troca */ .da-palette-toggle:focus-visible{outline:2px solid var(--cursor-select);outline-offset:3px} .da-dot{display:block;border-radius:50%;transition:background .22s var(--ease)} .da-dot--lg{width:16px;height:16px;background:var(--graphite)} /* predominante do destino */ .da-dot--sm{width:8px;height:8px;background:var(--brand-amber)} /* detalhe do destino */ html[data-da-palette="graphite-amber"] .da-dot--lg{background:var(--brand-amber)} html[data-da-palette="graphite-amber"] .da-dot--sm{background:var(--graphite)} /* ============================================================ VOCABULARIO COMPARTILHADO ============================================================ */ /* ---------- pauta: a regua de ficha tecnica que abre cada secao ---------- uma linha fina, uma marca de esquadro na ponta direita, e o rotulo miudo embaixo. e o cabecalho de prancha — diz onde voce esta sem gastar um titulo. */ .pauta{display:block} .pauta-regua{ position:relative;display:block;height:1px; background:color-mix(in srgb,var(--fg) 30%,transparent); } .pauta-regua::after{ content:"";position:absolute;right:0;top:-4px;width:2px;height:9px;background:var(--accent); } .pauta-rotulo{ display:block;margin-top:10px;font-weight:300;font-size:11px;letter-spacing:.2em; color:color-mix(in srgb,var(--fg) 66%,transparent); } .pauta--secao{margin-bottom:clamp(32px,5vh,66px)} /* ---------- secao ---------- */ .secao{ position:relative;width:100%;max-width:var(--medida);margin-inline:auto; padding:clamp(72px,11vh,132px) var(--respiro); border-top:1px solid var(--line); } .secao--capa{ min-height:100svh;border-top:0; padding:calc(var(--nav-h) + clamp(40px,7vh,78px)) var(--respiro) clamp(48px,7vh,72px); display:grid;grid-template-rows:auto 1fr auto;gap:clamp(32px,5vh,66px); } .secao--larga{max-width:var(--medida-larga);padding-inline:var(--respiro-largo)} /* ---------- regua de capitulos (rail) ---------- o instrumento vertical no canto: em que capitulo a leitura esta. so existe onde ha margem para ele — abaixo de 1180px some. */ .rail{ display:none;position:fixed;left:34px;top:50%;transform:translateY(-50%); z-index:60;grid-auto-flow:row;gap:18px; } .rail a{ display:grid;grid-auto-flow:column;justify-content:start;align-items:center;gap:8px; font-weight:900;font-size:11px;letter-spacing:.1em; color:color-mix(in srgb,var(--fg) 42%,transparent);transition:color .18s ease; } .rail a i{display:block;width:8px;height:1px;background:currentColor;transition:width .28s var(--ease)} .rail a.is-at{color:var(--accent)} .rail a.is-at i{width:26px} @media (min-width:1180px){ .rail{display:grid} } /* ---------- pe da capa: a chamada de rolagem ---------- */ /* o cue nao carrega rotulo: a capa ja disse o que ha por vir, e repetir viraria placa. fica a linha cheia terminando na acao — a mesma pauta das reguas. */ .cue{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(16px,2vw,32px)} .cue-fio{height:1px;background:var(--line)} .cue-link{ display:inline-flex;align-items:center;gap:8px; font-weight:300;font-size:11px;letter-spacing:.2em; color:color-mix(in srgb,var(--fg) 78%,transparent); } .cue-seta{display:inline-block;animation:daCue 2.4s var(--ease) infinite} @keyframes daCue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}} /* ---------- acao ---------- */ .acao{ display:inline-flex;align-items:center;gap:12px;min-height:54px; padding:0 clamp(18px,2vw,30px); font-weight:900;font-size:clamp(13px,1vw,17px);letter-spacing:.04em; text-transform:uppercase;white-space:nowrap; transition:background .18s ease,gap .22s var(--ease),opacity .18s ease; } .acao i{font-weight:400;font-style:normal} .acao:hover{gap:20px} .acao--solida{background:var(--brand-amber);border:1px solid var(--brand-amber);color:var(--papel)} .acao--solida:hover{background:#A8480F;color:var(--papel)} .acao--fantasma{background:transparent;border:1px solid rgba(242,239,231,.34);color:var(--papel)} .acao--fantasma:hover{background:rgba(242,239,231,.1);color:var(--papel)} .acao--tinta{background:var(--accent);color:var(--bg);border:1px solid var(--accent)} .acao--tinta:hover{opacity:.88;color:var(--bg)} /* ---------- etiqueta de ficha tecnica ---------- */ .tag{ padding:5px 10px;border:1px solid var(--line); font-weight:300;font-size:11px;letter-spacing:.1em;color:var(--fg); } .tags{display:flex;flex-wrap:wrap;gap:8px} /* ---------- campo: grade com bordas reais ---------- a moldura sai das proprias celulas (top+left no campo, right+bottom em cada celula), entao nenhuma linha dobra de espessura no encontro. */ .campo{ list-style:none;display:grid; border-top:1px solid var(--line);border-left:1px solid var(--line); } .campo>li{ display:grid;align-content:start;gap:12px; padding:clamp(18px,2.2vw,26px); border-right:1px solid var(--line);border-bottom:1px solid var(--line); } .campo--tramado{background-image:var(--diagonais-papel)} .campo-marca{display:block;width:7px;height:7px;background:var(--accent)} /* celula alternada: o xadrez do campo, ambar rebaixado sobre papel */ .campo>li.is-tinta{background:color-mix(in srgb,var(--fg) 7%,transparent)} /* ---------- escada: lista que recua a cada degrau ---------- a lista nao e uma pilha, e uma escada: cada item entra um passo mais para dentro. o recuo e o que faz a permanencia PARECER acumulo em vez de repeticao. */ .escada{list-style:none;display:grid} .escada>li{border-top:1px solid var(--line)} .escada>li:last-child{border-bottom:1px solid var(--line)} .escada>li:nth-child(2){padding-left:clamp(0px,1.6vw,33px)} .escada>li:nth-child(3){padding-left:clamp(0px,3.2vw,66px)} .escada>li:nth-child(4){padding-left:clamp(0px,4.8vw,99px)} .escada>li:nth-child(5){padding-left:clamp(0px,6.4vw,132px)} .escada-linha{ display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:clamp(16px,2vw,40px);align-items:baseline; padding-block:clamp(16px,2.3vh,30px); } .escada-termo{ font-family:var(--ivypresto);font-style:italic;font-weight:400; font-size:clamp(24px,2.7vw,44px);line-height:1;color:var(--accent); } .escada-frase{font-weight:500;font-size:clamp(17px,1.62vw,28px);line-height:1.24;color:var(--fg)} /* ============================================================ FECHO — a superficie escura que fecha toda pagina O grafite nao e um rodape: e a virada de material. O papel acaba e a pagina assina no verso. A trama de 135 graus atravessa o bloco e o ambar clareado (--ambar-claro) e a unica tinta que sobrevive ali. ============================================================ */ .fecho{ position:relative;overflow:hidden; background-color:var(--graphite); background-image:var(--diagonais-fecho); color:var(--papel); } .fecho-int{ position:relative;width:100%;max-width:var(--medida);margin-inline:auto; padding:clamp(48px,7vh,86px) var(--respiro) clamp(22px,3.2vh,38px); } .fecho--largo .fecho-int{max-width:var(--medida-larga);padding-inline:var(--respiro-largo)} .fecho-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(24px,4vw,72px);align-items:start; } .fecho-col{display:grid;gap:clamp(14px,2.2vh,24px);justify-items:start} .fecho-col--nota{gap:clamp(18px,2.6vh,28px)} .fecho-selo{display:block;width:clamp(46px,4.8vw,64px);color:var(--papel)} .fecho-selo svg{display:block;width:100%;height:100%} .fecho-titulo{ max-width:20ch;font-family:var(--synapsis);font-weight:900; font-size:clamp(21px,2.4vw,38px);line-height:1;letter-spacing:-.006em; text-transform:uppercase;text-wrap:balance;color:var(--papel); } .fecho-titulo .voz{color:var(--ambar-claro)} .fecho-nota{ max-width:50ch;font-weight:400;font-size:clamp(14px,.98vw,18px); line-height:1.6;text-wrap:pretty;color:rgba(242,239,231,.76); } .fecho-acoes{display:flex;flex-wrap:wrap;gap:10px} .fecho-assinatura{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px clamp(20px,3vw,48px);align-items:baseline; margin-top:clamp(26px,4vh,52px);padding-top:clamp(16px,2.4vh,26px); border-top:1px solid rgba(242,239,231,.2); } .fecho-nome{font-weight:900;font-size:clamp(13px,1vw,17px);letter-spacing:-.005em;color:var(--papel)} .fecho-lema{ font-family:var(--ivypresto);font-style:italic; font-size:clamp(13px,1vw,17px);line-height:1.3;color:rgba(242,239,231,.72); } .fecho-dominio{ justify-self:end;font-weight:300;font-size:10px;letter-spacing:.2em; white-space:nowrap;color:rgba(242,239,231,.62); } /* ============================================================ REVELACAO POR SCROLL Os estados armados so existem sob html.rv-on, escrito pelo JS apenas quando ha movimento permitido. Sem JS, ou com prefers-reduced-motion, a pagina ja esta no estado final: nada some, nada espera para aparecer. O recorte vai nos FILHOS, nunca no alvo observado — alvo com clip-path proprio para de intersectar no IntersectionObserver. ============================================================ */ html.rv-on [data-rv]{--rv-dur:.78s} html.rv-on [data-rv="up"]{ opacity:0;transform:translateY(22px); transition:opacity var(--rv-dur) var(--ease) var(--rv-d,0ms),transform var(--rv-dur) var(--ease) var(--rv-d,0ms); } html.rv-on [data-rv="up"].is-in{opacity:1;transform:none} html.rv-on [data-rv="clip"]>*{ clip-path:inset(0 -120px 100% -120px); transition:clip-path var(--rv-dur) var(--ease) var(--rv-d,0ms); } html.rv-on [data-rv="clip"].is-in>*{clip-path:inset(0 -120px -120px -120px)} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:900px){ .secao--capa{min-height:auto} .cue{grid-template-columns:1fr;gap:12px;justify-items:start} .cue-fio{display:none} } @media (max-width:760px){ /* seis destinos nao cabem numa fila de 390px por extenso, e uma fila que quebra sozinha muda de altura conforme o rotulo — foi assim que a nav passou a cobrir a primeira regua da pagina. no estreito ela deixa de ser fila e vira GRADE de tres colunas: altura fixa, previsivel, declarada em --nav-h. */ /* 48 da faixa da marca + duas fileiras de 40 = 128, e --nav-h diz exatamente isso. altura declarada que nao corresponde a altura real e pior do que altura nenhuma: o padding da pagina passa a mentir junto — e a guarda de browser quebra o build quando as duas divergem, que foi como esta regra se corrigiu ao ganhar o setimo destino. QUATRO colunas, nao tres: com sete destinos, tres colunas pedem uma terceira fileira e a nav passa de 160px num viewport de 844. A 390px cada celula fica com ~97px e o rotulo mais longo ("Manifesto", 12px) ocupa ~60. Cabe com folga. */ :root{--nav-h:128px} .da-corner{top:4px;left:16px;width:40px;height:40px} .da-topnav{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:40px;gap:0;padding:0;min-height:var(--nav-h); } /* faixa da marca: a logo e fixa e vive aqui: a fileira existe para dar chao a ela e ao toggle, e nenhum link entra nesta linha. */ .da-palette-label{display:none} .da-palette-cluster{ grid-column:1 / -1;height:48px;justify-content:flex-end;align-items:center; margin:0;padding:0 16px 0 68px; } .da-topnav .dt-link{ min-height:40px;display:flex;align-items:center;justify-content:center; padding:0 6px;font-size:0;border-bottom:0; border-right:1px solid color-mix(in srgb,var(--fg) 10%,transparent); border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent); } /* o rotulo curto substitui o nome inteiro; o link continua com o texto real para o leitor de tela. */ .da-topnav .dt-link::before{content:attr(data-short);font-size:12px;letter-spacing:0.03em} .da-topnav .dt-link:nth-of-type(4n){border-right:0} .da-topnav .dt-link[aria-current="page"]{ color:var(--accent);background:color-mix(in srgb,var(--fg) 8%,transparent); } .secao{padding:clamp(48px,8vh,72px) var(--respiro)} /* depois da linha acima, porque a regra curta de .secao usa o atalho padding e venceria por ordem — a capa precisa reafirmar o topo, que aqui e o unico que responde a nav fixa. */ .secao--capa{padding-top:calc(var(--nav-h) + clamp(24px,4vh,40px))} .escada>li{padding-left:0!important} .escada-linha{grid-template-columns:1fr;gap:6px} .fecho-assinatura{grid-template-columns:1fr} .fecho-dominio{justify-self:start} } /* ============================================================ PONTEIRO Um losango de traco com um ponto no centro. Sobre algo clicavel abre e vira quadrado; no clique, fecha. E so o ponteiro — sem fio cruzando a viewport, sem leitura de coordenada. #cur e uma caixa de tamanho ZERO que anda por transform. As duas pecas se penduram nela por translate(-50%,-50%), entao um unico transform por quadro move o conjunto e nada toca o layout. O mix-blend-mode vive nas PECAS, nunca no contentor: blend numa camada do tamanho da tela obriga o compositor a reler o fundo a cada quadro; em 24px ele nao custa nada. So com pointer:fine — nao existe ponteiro em tela de toque, e o shared/cursor.js sai antes de montar qualquer coisa nesse caso. Decorativo por definicao: o foco real e o :focus-visible do sistema, que nao depende disto. ============================================================ */ @media (pointer:fine){ .cursor-on,.cursor-on *{cursor:none} #cur{ position:fixed;left:0;top:0;width:0;height:0; z-index:260;pointer-events:none;color:var(--fg); opacity:0;transition:opacity .2s ease;will-change:transform; } #cur.is-on{opacity:1} #cur .nd{ position:absolute;width:4px;height:4px;border-radius:50%; background:currentColor;transform:translate(-50%,-50%); mix-blend-mode:multiply; } #cur .halo{ position:absolute;width:24px;height:24px; border:1px solid color-mix(in srgb,currentColor 52%,transparent); transform:translate(-50%,-50%) rotate(45deg); mix-blend-mode:multiply; transition:width .18s var(--ease),height .18s var(--ease), border-color .18s var(--ease),transform .18s var(--ease); } #cur.is-hot{color:var(--cursor-select)} #cur.is-hot .halo{width:44px;height:44px;border-color:currentColor;transform:translate(-50%,-50%) rotate(0deg)} #cur.is-press .halo{width:16px;height:16px} } @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} /* o ponteiro do sistema volta: sem cursor:none ninguem fica sem ponteiro visivel. o cursor.js ja nem monta neste caso. */ .cursor-on,.cursor-on *{cursor:auto} #cur{display:none} }