/* tools-page.css — estilos só da /tools/. Camada entelecy.page; cores sempre por token --ec-*. Única exceção: o PALCO do hero, cuja foto (gerada pelo Loom, skill image) é por tema. Fora do app.bundle.css (gerado da suite, sobrescreveria). */ @layer entelecy.page { /* ═══ HERO ══════════════════════════════════════════════════════════════ Painel claro arredondado, ilustração do fluxo à direita, e um DEGRAU na borda de baixo: à esquerda a borda sobe --nh, faz curva e desce; o título de Ferramentas mora no degrau. O degrau é um RECORTE (máscara), não uma pintura: o fundo verdadeiro da página — que tem brilho ambiente — aparece por ele, sem costura de cor. A linha da borda é o próprio painel (cor da borda) com o papel por cima, inset de 1px, os dois com a MESMA máscara (.tp-shape). Cada tema tem a sua ilustração (dia: papel claro; noite: bronze sobre escuro). */ .tp-hero { --tp-page: var(--ec-bg); --tp-edge: var(--ec-line); /* só a linha de baixo, suave */ --hh: clamp(22rem, 24vw, 27rem); /* altura do painel (o texto pode crescê-la) */ --nh: 4rem; /* profundidade do degrau */ --pad: max(var(--ec-gutter), (100vw - var(--ec-content)) / 2); /* texto alinha com o logo */ --nw: calc(var(--pad) + min(38rem, 42vw)); /* largura do degrau (comprimento: entra em mask-position) */ --r1: 1.75rem; /* raio dos cantos do degrau */ width: 100%; /* de fora a fora */ margin: 0; } .tp-hero__panel { --tp-paper: #fcf5ee; /* o fundo da própria ilustração do dia */ position: relative; min-height: var(--hh); /* cresce se o texto pedir; nunca invade o degrau */ background: var(--tp-edge); /* vira a LINHA: o papel cobre tudo menos 1px */ color: var(--ec-text); } .tp-hero__paper, .tp-hero__clip { inset: 0 0 1px 0; --nw: calc(var(--pad) + min(38rem, 42vw) + 1px); } .tp-hero__paper { position: absolute; background: var(--tp-paper); } /* A forma (painel menos o degrau), em 5 camadas de máscara somadas: 1 faixa de cima, de fora a fora, até o degrau (a linha sai reta pela borda da tela); 2–4 região da direita (altura toda) com o canto inferior esquerdo arredondado; 5 a curva do ombro do degrau (canto côncavo do painel). */ .tp-shape, .tp-hero__panel { --m: linear-gradient(#000 0 0); --c: radial-gradient(circle at 100% 0, #000 calc(var(--r1) - 0.5px), transparent var(--r1)); --k: radial-gradient(circle at 0 100%, transparent calc(var(--r1) - 0.5px), #000 var(--r1)); -webkit-mask: var(--m) left 0 top 0 / 100% calc(100% - var(--nh)) no-repeat, var(--m) right 0 top 0 / calc(100% - var(--nw)) calc(100% - var(--r1)) no-repeat, var(--m) right 0 bottom 0 / calc(100% - var(--nw) - var(--r1)) var(--r1) no-repeat, var(--c) left var(--nw) bottom 0 / var(--r1) var(--r1) no-repeat, var(--k) left calc(var(--nw) - var(--r1)) bottom calc(var(--nh) - var(--r1)) / var(--r1) var(--r1) no-repeat; mask: var(--m) left 0 top 0 / 100% calc(100% - var(--nh)) no-repeat, var(--m) right 0 top 0 / calc(100% - var(--nw)) calc(100% - var(--r1)) no-repeat, var(--m) right 0 bottom 0 / calc(100% - var(--nw) - var(--r1)) var(--r1) no-repeat, var(--c) left var(--nw) bottom 0 / var(--r1) var(--r1) no-repeat, var(--k) left calc(var(--nw) - var(--r1)) bottom calc(var(--nh) - var(--r1)) / var(--r1) var(--r1) no-repeat; } .tp-hero__clip { position: absolute; overflow: hidden; container-type: size; } /* Ilustração por tema, como FUNDO de um bloco (só a do tema ativo é baixada). Ela ocupa a altura do painel; o APARELHO (da janela "Conversa" ao navegador da direita) precisa terminar DENTRO da coluna de conteúdo do site (alinhado ao "Entrar"), em qualquer largura de tela. Por arquivo: --ar = largura/altura e --dr = borda direita do aparelho em fração da largura, ambos ×100 (em cqh). left = (borda direita do conteúdo) − 1rem − dr·altura. dia hero-fluxo.webp 1803×402 → ar 4,485; aparelho 45,3%–75,4% → dr 338 noite hero-fluxo-noite.webp 1798×450 → ar 3,996; aparelho 47,2%–81,2% → dr 324 */ .tp-hero__art { --ar: 448.5; --dr: 338; position: absolute; top: 0; height: 100cqh; width: calc(var(--ar) * 1cqh); left: calc(100cqw - var(--pad) - 1rem - var(--dr) * 1cqh); background: url("/assets/tools/hero-fluxo.webp?v=1") center / 100% 100% no-repeat; /* bordas da imagem somem no papel: em tela larga ela não cobre a faixa toda */ -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); } :root[data-theme="dark"] .tp-hero__panel { --tp-paper: #0e1013; } /* fundo da ilustração da noite */ :root[data-theme="dark"] .tp-hero__art { --ar: 399.6; --dr: 324; background-image: url("/assets/tools/hero-fluxo-noite.webp?v=1"); } /* Véu à esquerda: o texto fica sobre o papel liso. */ .tp-hero__clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tp-paper) 0%, var(--tp-paper) 30%, color-mix(in srgb, var(--tp-paper) 50%, transparent) 40%, transparent 47%); } .tp-hero__copy { position: relative; z-index: 1; width: min(100%, calc(46% + var(--pad))); padding: clamp(1.75rem, 3vw, 2.75rem) 0 calc(var(--nh) + var(--ec-space-5)) var(--pad); } .tp-h1 { margin: var(--ec-space-3) 0 0; font-size: clamp(2.1rem, 3.75vw, 4rem); line-height: 1; text-wrap: nowrap; } .tp-h1 em { font-style: italic; color: var(--ec-accent); } .tp-lead { margin-top: var(--ec-space-4); color: var(--ec-text-muted); font-size: calc(var(--ec-step-1) * 0.8); line-height: 1.5; } .tp-actions { display: flex; flex-wrap: wrap; gap: var(--ec-space-3); margin-top: var(--ec-space-5); } .tp-btn__ico { width: 1rem; height: 1rem; } /* Título de Ferramentas: sobe para dentro do degrau; o texto da direita fica abaixo da linha. */ .tp-hero__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ec-space-6); margin-top: calc(-1 * var(--nh) + var(--ec-space-5)); padding: 0 var(--pad); scroll-margin-top: var(--ec-space-6); } .tp-h2 { margin: var(--ec-space-2) 0 0; font-size: clamp(1.9rem, 3.7vw, 3.45rem); line-height: 1.04; } .tp-h2 span { color: var(--ec-accent); } .tp-sub { margin-top: var(--ec-space-2); font-family: var(--ec-font-display); font-size: calc(var(--ec-step-2) * 0.8); line-height: 1.25; color: var(--ec-text-muted); } .tp-hero__side { color: var(--ec-text-muted); font-size: var(--ec-step--1); line-height: 1.6; padding-bottom: 0.35rem; } .tp-tools { padding: var(--ec-space-7) 0 var(--ec-space-8); } /* Celular/tablet: painel em pilha (texto, depois a ilustração), sem degrau. */ @media (max-width: 62rem) { .tp-hero { --hh: auto; width: calc(100% - 1rem); } .tp-hero__panel { min-height: 0; display: flex; flex-direction: column; } .tp-hero__clip { position: relative; order: 2; height: 15rem; margin-top: var(--ec-space-5); } .tp-hero__clip::after { background: linear-gradient(180deg, var(--tp-paper), transparent 35%); } .tp-hero__art { top: 0; height: 100cqh; left: 50%; transform: translateX(-60%); } .tp-hero__copy { width: auto; padding: var(--ec-space-6) var(--ec-space-5) 0; } .tp-h1 { text-wrap: balance; } .tp-shape, .tp-hero__panel { -webkit-mask: none; mask: none; } .tp-hero__head { margin-top: var(--ec-space-7); grid-template-columns: 1fr; padding: 0 var(--ec-space-3); } } /* ═══ Blocos "As mãos do Loom" (desenho aprovado) ═══════════════════════ */ .tc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-space-4); } /* 2×2 (Criação e Documentos): cartão largo — texto à esquerda, ilustração grande à direita, etiquetas e seta na largura toda embaixo. Mesmo componente (_ToolBlock), outra grade. */ .tc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc-grid--2 > .tc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "head art" "foot foot"; column-gap: var(--ec-space-5); } .tc-grid--2 > .tc .tc__head { grid-area: head; } .tc-grid--2 > .tc .tc__art { grid-area: art; align-self: center; justify-self: center; width: 100%; height: auto; max-height: 13rem; margin: 0; } .tc-grid--2 > .tc .tc__foot { grid-area: foot; margin-top: var(--ec-space-5); } @media (max-width: 75rem) { .tc-grid--2 > .tc { grid-template-columns: 1fr; grid-template-areas: "head" "art" "foot"; } .tc-grid--2 > .tc .tc__art { margin-top: var(--ec-space-5); } } @media (max-width: 62rem) { .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Seções Criação e Documentos: cabeçalho no molde de "As mãos do Loom". */ .tp-sec { padding: var(--ec-space-8) 0 0; } .tp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ec-space-6); margin-bottom: var(--ec-space-6); } @media (max-width: 62rem) { .tp-head { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .tc-grid { grid-template-columns: 1fr; } } .tc { display: flex; flex-direction: column; padding: var(--ec-space-5) 1.25rem var(--ec-space-4); scroll-margin-top: var(--ec-space-6); } .tc__head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--ec-space-4); align-items: start; } .tc__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--ec-radius-md); background: var(--ec-surface-strong); color: var(--ec-accent); box-shadow: 0 4px 14px rgb(72 52 36 / 0.07); } .tc__icon .tl-ico { width: 1.7rem; height: 1.7rem; stroke-width: 2; } .tc h3 { margin: 0.25rem 0 var(--ec-space-1); font-size: 1.35rem; line-height: 1.25; font-weight: 400; color: var(--ec-text); } .tc__head p { color: var(--ec-text-muted); font-size: calc(var(--ec-step-0) * 0.92); line-height: 1.5; } /* Ilustração recortada do desenho: o fundo dela se funde ao do cartão (multiply no claro) e as bordas do recorte somem num degradê; à noite vira uma prévia clara arredondada. */ .tc__art { display: block; height: 8.75rem; width: auto; max-width: 100%; object-fit: contain; margin: var(--ec-space-5) auto var(--ec-space-4); mix-blend-mode: multiply; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; } :root[data-theme="dark"] .tc__art { mix-blend-mode: normal; -webkit-mask: none; mask: none; border-radius: var(--ec-radius-md); opacity: 0.92; } .tc__foot { display: flex; align-items: center; gap: var(--ec-space-2); margin-top: auto; } .tc__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; } .tc__chips li { padding: 0.28rem 0.45rem; border: 1px solid var(--ec-line); border-radius: var(--ec-radius-pill); background: var(--ec-surface-strong); color: var(--ec-text-muted); font-size: 0.66rem; line-height: 1.2; white-space: nowrap; } .tc__go { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ec-line); background: var(--ec-surface-strong); color: var(--ec-text); box-shadow: 0 6px 16px rgb(72 52 36 / 0.08); text-decoration: none; transition: border-color var(--ec-duration-fast) ease, transform var(--ec-duration-fast) ease; } .tc__go:hover { border-color: var(--ec-accent); transform: translateX(2px); } .tc__go .tl-ico { width: 1.05rem; height: 1.05rem; } /* ═══ Cápsula ═══════════════════════════════════════════════════════════ */ .tp-capsule { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--ec-space-6); padding: var(--ec-space-5); align-items: stretch; scroll-margin-top: var(--ec-space-6); } @media (max-width: 62rem) { .tp-capsule { grid-template-columns: 1fr; } } .tp-term { border: 1px solid var(--ec-line); border-radius: var(--ec-radius-md); background: var(--ec-bg-elevated); overflow: hidden; min-width: 0; } .tp-term__bar { display: flex; gap: 0.35rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ec-line); } .tp-term__bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ec-line-strong); } .tp-term pre { margin: 0; padding: var(--ec-space-4); overflow-x: auto; font: 400 var(--ec-step--1)/1.75 var(--ec-font-mono); color: var(--ec-text); } .tp-term .c { color: var(--ec-text-faint); } .tp-term .p { color: var(--ec-accent); } .tp-term .o { color: var(--ec-text-muted); } .tp-term .cur { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em; background: var(--ec-accent); } .tp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ec-space-4); align-content: center; } @media (max-width: 40rem) { .tp-facts { grid-template-columns: 1fr; } } .tp-fact { padding: var(--ec-space-4); border-top: 1px solid var(--ec-line); scroll-margin-top: var(--ec-space-6); } .tp-fact b { display: block; font-family: var(--ec-font-display); font-size: var(--ec-step-1); font-weight: 400; } .tp-fact span { color: var(--ec-text-muted); font-size: var(--ec-step--1); } /* ═══ API ═══════════════════════════════════════════════════════════════ */ .tp-api { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--ec-space-6); align-items: center; scroll-margin-top: var(--ec-space-6); } @media (max-width: 62rem) { .tp-api { grid-template-columns: 1fr; } } .tp-code { margin: 0; border: 1px solid var(--ec-line); border-radius: var(--ec-radius-md); background: var(--ec-bg-elevated); min-width: 0; } .tp-code pre { margin: 0; padding: var(--ec-space-4); overflow-x: auto; font: 400 var(--ec-step--1)/1.75 var(--ec-font-mono); color: var(--ec-text); } .tp-api__side p { color: var(--ec-text-muted); } .tp-api__side p + p, .tp-api__side ul + p { margin-top: var(--ec-space-4); } .tp-api__side .ec-button { display: inline-flex; align-items: center; gap: var(--ec-space-2); } .tp-skills { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); margin: var(--ec-space-4) 0 0; padding: 0; list-style: none; } .tp-skills .ec-pill { cursor: default; min-height: 2rem; } /* ═══ Fecho ═════════════════════════════════════════════════════════════ */ .tp-close h2 { font-family: var(--ec-font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.2; margin: 0; } .tp-close p { color: var(--ec-text-muted); margin-top: var(--ec-space-3); } .tp-close p:last-child { margin-top: var(--ec-space-5); } }