/* ========================================================================= Laboratório X1 CSS nativo, sem framework e sem build: a página é um arquivo HTML, uma folha de estilo, 14 linhas de script e duas imagens. Todo o resto é tipo, fio de 1px e tabela. A ideia visual é a FICHA TÉCNICA: rótulos em monoespaçada na margem, dados em tabela de verdade, fios finos no lugar de caixas, e os produtos fotografados sobre uma placa de grafite com uma régua graduada na lateral. A régua não é enfeite: cada placa é marcada com o volume daquele produto, que é o mesmo número que está na tabela ao lado e na bisnaga da foto. ========================================================================= */ /* --------------------------------------------------------------- FONTES */ /* Archivo é variável: um arquivo cobre 400 a 700. Só o subconjunto latin, que já cobre o português inteiro (ã, ç, õ, á, ê estão em U+0000-00FF). */ @font-face { font-family: Archivo; src: url(fontes/archivo.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url(fontes/plex-mono-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plex Mono'; src: url(fontes/plex-mono-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- FICHAS */ :root { /* Uma família neutra fria, levemente esverdeada: é a cor de bancada de laboratório, e é o que separa esta página do creme que todo site "artesanal" usa. */ --papel: #F1F4F2; --claro: #FFFFFF; --grafite: #12181A; --grafite-2: #1B2326; --tinta: #0D1417; --tinta-2: #4C5A61; --tinta-3: #626E74; /* 4,7:1 sobre o papel; era #79868C, a 3,4:1 */ --sobre-placa: #C9D4D2; --sobre-placa-2: #7E8D8C; --linha: #DBE2DF; --linha-forte: #C3CEC9; /* Um acento só, verde petróleo, na página inteira. Não há segundo. */ --acento: #0A5245; --acento-viva: #0A5245; --acento-tenue:#E1EDE8; --alerta: #8A2F1E; --alerta-tenue:#F6E9E5; --r: 4px; /* um raio só, em tudo */ --barra-h: 62px; --fonte: Archivo, 'Helvetica Neue', Arial, sans-serif; --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papel: #080B0C; --claro: #101618; --grafite: #161D20; --grafite-2: #1E2629; --tinta: #E8EFEC; --tinta-2: #9AA8AB; --tinta-3: #7B8A8F; /* 5,0:1 sobre a superficie escura */ --sobre-placa: #C9D4D2; --sobre-placa-2: #7E8D8C; --linha: #202829; --linha-forte: #2E3A3D; --acento: #5BD3B3; --acento-viva: #5BD3B3; --acento-tenue:#0E2723; --alerta: #F0A08C; --alerta-tenue:#2A1611; } } :root[data-theme="dark"] { --papel:#080B0C; --claro:#101618; --grafite:#161D20; --grafite-2:#1E2629; --tinta:#E8EFEC; --tinta-2:#9AA8AB; --tinta-3:#7B8A8F; --sobre-placa:#C9D4D2; --sobre-placa-2:#7E8D8C; --linha:#202829; --linha-forte:#2E3A3D; --acento:#5BD3B3; --acento-viva:#5BD3B3; --acento-tenue:#0E2723; --alerta:#F0A08C; --alerta-tenue:#2A1611; } /* ---------------------------------------------------------------- BASE */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* O recuo do menu fixo mora AQUI, e num lugar só. Com `scroll-padding-top` no junto, os dois se somavam: a seção parava 142 px abaixo do topo em vez de 80, e a marcação do menu, que compara com uma linha logo abaixo da barra, ficava sempre uma seção atrás do que estava na tela. */ .secao, .abertura, main { scroll-margin-top: calc(var(--barra-h) + 18px); } body { margin: 0; background: var(--papel); /* explícito: o fundo é desta página */ color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.6; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; } p, dl, ol, ul, table { margin: 0; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--acento-viva); outline-offset: 3px; border-radius: 2px; } .oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pular { position: fixed; left: 12px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: var(--r); background: var(--acento); color: #fff; font: 500 13px/1 var(--mono); transition: top .18s; } .pular:focus { top: 12px; } /* ---------------------------------------------------------- CONTÊINERES */ .faixa { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } .secao { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--linha); } .secao--clara { background: var(--claro); } .secao--fecho { background: var(--claro); padding-bottom: clamp(72px, 10vw, 128px); } .titulo { max-width: 46ch; margin-bottom: clamp(36px, 5vw, 56px); } .titulo h2 { font-size: clamp(1.7rem, 1.05rem + 2.5vw, 2.7rem); letter-spacing: -0.03em; text-wrap: balance; } /* A sobrescrita monoespaçada. Aparece exatamente duas vezes na página. */ .sobrenome { font: 500 clamp(0.66rem, 0.62rem + 0.18vw, 0.74rem)/1.3 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--acento); margin-bottom: 18px; } .conduz { margin-top: 20px; max-width: 56ch; font-size: clamp(1.02rem, 0.97rem + 0.28vw, 1.16rem); line-height: 1.62; color: var(--tinta-2); } .conduz--curta { max-width: 52ch; } .prosa p { color: var(--tinta-2); max-width: 54ch; } .prosa p + p { margin-top: 18px; } .prosa strong { color: var(--tinta); font-weight: 600; } /* ---------------------------------------------------------------- BARRA */ .barra { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--barra-h); background: color-mix(in srgb, var(--papel) 84%, transparent); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .barra { -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); } } .barra.desceu { border-bottom-color: var(--linha); } .barra__interno { height: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* ---------------------------------------------------------------- MARCA */ .marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } .marca__selo { display: block; width: 26px; height: 26px; color: var(--acento); } .marca__selo svg { width: 100%; height: 100%; display: block; } .marca__texto { display: inline-flex; align-items: baseline; gap: 7px; } .marca__categoria { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.19em; text-transform: uppercase; color: var(--tinta-2); } .marca__nome { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--tinta); } /* ----------------------------------------------------------------- MENU */ .menu { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 10px); overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; min-width: 0; } .menu::-webkit-scrollbar { display: none; } .menu a { position: relative; flex: none; padding: 7px 10px 8px; text-decoration: none; font: 500 0.78rem/1 var(--fonte); letter-spacing: -0.005em; color: var(--tinta-2); border-radius: var(--r); transition: color .18s; white-space: nowrap; } .menu a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 1.5px; background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.22,.7,.3,1); } .menu a:hover { color: var(--tinta); } .menu a[aria-current="true"] { color: var(--acento); } .menu a[aria-current="true"]::after { transform: scaleX(1); } /* ---------------------------------------------------------------- BOTÃO */ .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .botao { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding-inline: 22px; border-radius: var(--r); background: var(--acento); color: #FFFFFF; font: 500 0.88rem/1 var(--fonte); letter-spacing: -0.004em; text-decoration: none; white-space: nowrap; border: 1px solid var(--acento); transition: transform .12s, filter .18s, background .18s, border-color .18s; } .botao:hover { filter: brightness(1.14); } .botao:active { transform: translateY(1px); } .botao--vazado { background: transparent; color: var(--tinta); border-color: var(--linha-forte); } .botao--vazado:hover { filter: none; border-color: var(--tinta-3); background: color-mix(in srgb, var(--tinta) 4%, transparent); } /* No escuro o verde claro é um SÓLIDO CLARO: tinta branca sobre ele mede 2,4:1. Texto escuro sobre o acento é o que passa no AA. */ /* `:not(.botao--vazado)`: o vazado nao tem fundo, entao a tinta escura dele cairia sobre a propria pagina escura. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .botao:not(.botao--vazado) { color: #062019; } :root:not([data-theme="light"]) .pular { color: #062019; } } :root[data-theme="dark"] .botao:not(.botao--vazado) { color: #062019; } :root[data-theme="dark"] .pular { color: #062019; } /* ------------------------------------------------------------- ABERTURA */ .abertura { padding-top: calc(var(--barra-h) + clamp(44px, 7vw, 88px)); } .abertura .faixa--abertura { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(36px, 5vw, 64px); align-items: center; padding-bottom: clamp(60px, 8vw, 104px); } .abertura h1 { font-size: clamp(2.3rem, 1.15rem + 4.5vw, 4.05rem); font-weight: 700; letter-spacing: -0.042em; line-height: 1.015; text-wrap: balance; } .abertura h1 em { font-style: normal; /* Ênfase na MESMA família, não com uma serifada avulsa colada no meio. */ color: var(--acento); } /* Os três números da abertura: rótulo em mono, valor em display. */ .numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--linha); } .numeros > div { padding: 16px 20px 4px 0; min-width: 0; } .numeros > div + div { border-left: 1px solid var(--linha); padding-left: 20px; } .numeros dt { font: 500 0.62rem/1.3 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-3); } .numeros dd { margin: 7px 0 0; font-size: 1.22rem; font-weight: 600; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; color: var(--tinta); } .numeros dd span { font-size: 0.72em; font-weight: 500; color: var(--tinta-2); } /* ---------------------------------------------------------------- PLACA */ /* A placa de grafite: os produtos fotografados sobre um fundo controlado, com a régua graduada na lateral esquerda. */ .placa { position: relative; margin: 0; background: var(--grafite); background-image: radial-gradient(120% 78% at 50% 108%, var(--grafite-2) 0%, transparent 62%); border-radius: var(--r); padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 34px) clamp(22px, 2.6vw, 30px) clamp(52px, 5vw, 70px); overflow: hidden; box-shadow: 0 1px 2px rgb(9 16 18 / .16), 0 18px 46px -26px rgb(9 16 18 / .5); } /* A régua: dois gradientes repetidos na mesma caixa. O traço maior e o menor saem do mesmo desenho, mudando só a LARGURA do fundo. Zero marcação. */ .regua { position: absolute; left: clamp(22px, 2.3vw, 30px); top: clamp(44px, 4.4vw, 58px); bottom: clamp(40px, 4vw, 52px); width: 20px; color: var(--sobre-placa-2); opacity: .58; background-image: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 56px), repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 14px); background-size: 20px 100%, 9px 100%; background-repeat: repeat-y; background-position: 0 0, 0 0; } .regua::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1px; background: currentColor; opacity: .75; } /* As marcas da régua são o volume DAQUELE produto: o mesmo número que está na tabela ao lado. Numeral em régua sem significado é enfeite fingindo ser dado. */ .regua__marca { position: absolute; left: clamp(22px, 2.3vw, 30px); font: 500 0.6rem/1 var(--mono); letter-spacing: 0.08em; color: var(--sobre-placa-2); } .regua__marca--topo { top: clamp(24px, 2.6vw, 34px); } .regua__marca--base { bottom: clamp(22px, 2.4vw, 30px); } /* As duas placas de produto têm a MESMA proporção, e não a proporção da foto que carregam: a bisnaga é larga e baixa, o frasco é alto, e cada placa com a sua altura fazia as duas fichas parecerem dois desenhos diferentes em vez de duas páginas do mesmo caderno. A foto se acomoda dentro. */ .produto .placa { aspect-ratio: 5 / 6; display: flex; flex-direction: column; } .produto .placa__palco { flex: 1 1 auto; } .produto .placa__palco img { max-height: 100%; } .placa__palco { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 26px); min-height: 0; } .placa__palco::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -14%; height: 62%; background: radial-gradient(60% 50% at 50% 50%, rgb(210 226 224 / .12), transparent 72%); filter: blur(4px); } .placa__palco img { position: relative; z-index: 1; width: auto; max-height: clamp(260px, 34vw, 400px); object-fit: contain; filter: drop-shadow(0 22px 24px rgb(0 0 0 / .42)); } /* Escala relativa: a bisnaga de 15 ml é fisicamente menor que o frasco de 60 ml, e na placa da abertura ela aparece menor, como é. */ /* A placa da linha mede por LARGURA, e nao por altura: somadas, duas alturas em `clamp` estouravam a caixa e a segunda bisnaga saia cortada pela borda. Em porcentagem as duas sempre cabem, e a razao entre elas (26,5 e 62) e a razao fisica entre a bisnaga de 15 ml e o frasco de 60 ml. */ .placa--linha { padding-left: clamp(20px, 2.6vw, 34px); } .placa--linha .placa__palco img { max-height: none; height: auto; } .placa--linha .placa__item--frasco { width: 62%; } .placa--linha .placa__item--bisnaga { width: 26.5%; } .placa figcaption { position: relative; z-index: 1; margin-top: 22px; padding-top: 12px; border-top: 1px solid rgb(201 212 210 / .14); font: 400 0.68rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--sobre-placa-2); } /* ------------------------------------------------------------- VERBETES */ .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .verbetes { border-top: 1px solid var(--linha); } .verbetes > div { display: grid; grid-template-columns: minmax(96px, 26%) minmax(0, 1fr); gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linha); } .verbetes dt { font: 500 0.66rem/1.5 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-3); padding-top: 2px; } .verbetes dd { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--tinta-2); } /* -------------------------------------------------------------- PRODUTO */ .produto { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; padding-top: clamp(40px, 5vw, 62px); border-top: 1px solid var(--linha); } .produto + .produto { margin-top: clamp(52px, 7vw, 88px); } /* Invertido troca o LADO, nao a largura: a placa continua na coluna estreita e a ficha na larga. Trocar so a ordem daria a ficha o espaco da foto. */ .produto--invertido { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); } .produto--invertido .produto__placa { order: 2; } .produto__placa { position: sticky; top: calc(var(--barra-h) + 26px); } .produto__cabeca { padding-bottom: 20px; border-bottom: 1px solid var(--linha-forte); } .produto__cabeca h3 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.25rem); font-weight: 700; letter-spacing: -0.036em; } .produto__classe { margin-top: 8px; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); } /* A ficha é uma TABELA, porque é uma tabela: rótulo e valor, linha a linha. */ .ficha { width: 100%; border-collapse: collapse; margin-top: 4px; } .ficha th, .ficha td { text-align: left; vertical-align: baseline; padding: 11px 0; border-bottom: 1px solid var(--linha); } .ficha th { width: 42%; font: 400 0.76rem/1.5 var(--mono); letter-spacing: 0.01em; color: var(--tinta-3); font-weight: 400; } .ficha td { font-size: 0.94rem; color: var(--tinta); font-variant-numeric: tabular-nums; } .ficha td b { font-weight: 600; font-size: 1.04em; letter-spacing: -0.01em; } .bloco { margin-top: clamp(28px, 3.4vw, 40px); } .bloco h4 { font: 500 0.66rem/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); padding-bottom: 12px; border-bottom: 1px solid var(--linha); } .passos { list-style: none; padding: 0; counter-reset: passo; } .passos li { counter-increment: passo; position: relative; padding: 13px 0 13px 40px; border-bottom: 1px solid var(--linha); font-size: 0.94rem; line-height: 1.55; color: var(--tinta-2); } .passos li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 500 0.7rem/1.5 var(--mono); color: var(--tinta-3); font-variant-numeric: tabular-nums; } .passos b { color: var(--tinta); font-weight: 600; } .avisos { list-style: none; padding: 0; } .avisos li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--linha); font-size: 0.9rem; line-height: 1.55; color: var(--tinta-2); } .avisos li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 1px; background: var(--linha-forte); } .avisos .avisos--forte { color: var(--alerta); font-weight: 500; } .avisos .avisos--forte::before { background: var(--alerta); } .legal { margin-top: clamp(38px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--linha); max-width: 68ch; font: 400 0.8rem/1.6 var(--mono); color: var(--tinta-3); } /* -------------------------------------------------------------- ETAPAS */ .etapas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px); } .etapas li { padding-top: 18px; border-top: 1.5px solid var(--tinta); } /* A contagem é informação: a ordem das etapas é o assunto da seção. */ .etapas__contagem { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.1em; color: var(--acento); font-variant-numeric: tabular-nums; } .etapas h3 { margin-top: 14px; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; } .etapas li > p:last-child { margin-top: 10px; font-size: 0.89rem; line-height: 1.6; color: var(--tinta-2); } /* ------------------------------------------------------------ CUIDADOS */ .cuidados { list-style: none; padding: 0; display: grid; /* Numero FIXO de colunas, e nao `auto-fit`: sao seis itens, e seis divide por tres e por dois. Com `auto-fit` a tela larga abria quatro colunas e sobravam duas celulas vazias, que a cor do vao pintava de cinza. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; } .cuidados li { background: var(--papel); padding: 26px 24px 28px; } .secao--clara .cuidados li { background: var(--claro); } .cuidados h3 { font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-3); } .cuidados p { margin-top: 12px; font-size: 0.95rem; line-height: 1.55; color: var(--tinta); } .cuidados .cuidados--forte { background: var(--alerta-tenue); } .cuidados .cuidados--forte h3 { color: var(--alerta); } /* ------------------------------------------------------------- CONTATO */ .contato { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3.4vw, 48px); } .contato__via { padding-top: 22px; border-top: 1.5px solid var(--tinta); } .contato__quem { font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--acento); } .contato__oque { margin: 14px 0 26px; font-size: 0.98rem; line-height: 1.6; color: var(--tinta-2); max-width: 40ch; } /* -------------------------------------------------------------- RODAPÉ */ .rodape { background: var(--grafite); color: var(--sobre-placa); padding-block: clamp(44px, 6vw, 68px); } .faixa--rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: start; } .rodape__marca { display: flex; align-items: center; gap: 12px; } .rodape__marca .marca__selo { width: 30px; height: 30px; color: var(--sobre-placa); } .rodape__marca p { display: flex; flex-direction: column; gap: 3px; } .rodape__marca b { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.024em; color: #fff; } .rodape__marca span { font-size: 0.85rem; color: var(--sobre-placa-2); } .rodape__menu { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-self: end; } .rodape__menu a { font: 400 0.82rem/1 var(--fonte); color: var(--sobre-placa-2); text-decoration: none; padding: 7px 0; /* 27px de altura: o mínimo da WCAG é 24 */ transition: color .18s; } .rodape__menu a:hover { color: #fff; } .rodape__legal { grid-column: 1 / -1; margin-top: 8px; padding-top: 22px; border-top: 1px solid rgb(201 212 210 / .14); font: 400 0.74rem/1.6 var(--mono); color: var(--sobre-placa-2); /* Sem `max-width`: o fio de cima acompanha a largura do elemento, e com o texto limitado a 70ch ele parava no meio do rodapé, parecendo cortado. */ } /* ------------------------------------------------------------- ENTRADA */ /* Só existe quando o script confirma que está vivo: sem JS, tudo visível. */ html.pronto [data-surge] { opacity: 0; transform: translateY(16px); transition: opacity .62s cubic-bezier(.22,.7,.3,1), transform .62s cubic-bezier(.22,.7,.3,1); } html.pronto [data-surge].surgiu { opacity: 1; transform: none; } /* --------------------------------------------------------------- TELAS */ @media (max-width: 980px) { .abertura .faixa--abertura { grid-template-columns: minmax(0, 1fr); gap: 40px; } .abertura__placa { max-width: 620px; } .colunas { grid-template-columns: minmax(0, 1fr); } .produto, .produto--invertido { grid-template-columns: minmax(0, 1fr); } .produto--invertido .produto__placa { order: 0; } .produto__placa { position: static; max-width: 560px; } .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cuidados { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { /* DUAS LINHAS no telefone, e não uma faixa que rola. Em 390 px os cinco destinos precisam de ~374 px e sobram 270 ao lado da logo: numa linha só, o primeiro item nascia cortado ao lado do "X1" e parecia defeito. Em linha própria os cinco cabem inteiros, sem sanfona, sem rolagem e sem máscara. O menu é o que o cliente pediu desta página; esconder metade dele para caber é resolver o problema errado. */ :root { --barra-h: 79px; } .barra__interno { flex-direction: column; align-items: stretch; gap: 0; } .marca { height: 45px; align-self: flex-start; } .menu { height: 34px; justify-content: space-between; gap: 4px; border-top: 1px solid var(--linha); margin-inline: calc(-1 * clamp(20px, 4vw, 40px)); padding-inline: clamp(20px, 4vw, 40px); } /* Só quando não couber mesmo (telas de 320 px) a faixa vira rolável, e aí esmaece nas DUAS pontas, senão a ponta esquerda mostra palavra cortada sem nada explicando. */ .menu.rolavel { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .menu a { font-size: 0.74rem; padding: 9px 2px 9px; } .menu a::after { left: 2px; right: 2px; } .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numeros > div { padding: 14px 16px 12px 0; } .numeros > div + div { padding-left: 16px; } .numeros > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); } .etapas { grid-template-columns: minmax(0, 1fr); gap: 26px; } .cuidados { grid-template-columns: minmax(0, 1fr); } .faixa--rodape { grid-template-columns: minmax(0, 1fr); } .rodape__menu { justify-self: start; } .ficha th { width: 46%; font-size: 0.72rem; } .ficha td { font-size: 0.9rem; } } @media (max-width: 420px) { .placa { padding-left: clamp(42px, 12vw, 52px); padding-right: 16px; } .regua, .regua__marca { left: 16px; } .acoes .botao { flex: 1 1 100%; } } /* ------------------------------------------------------------ MOVIMENTO */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html.pronto [data-surge] { opacity: 1; transform: none; } } /* ------------------------------------------------------------- IMPRESSO */ /* Uma página que se chama "ficha técnica" vai ser impressa por alguém, nem que seja um distribuidor pedindo a especificação. Sem estas regras sairia a barra fixa repetida, dois retângulos de grafite chapados gastando tinta e as fichas partidas no meio da linha. */ @media print { :root { --papel: #fff; --claro: #fff; --grafite: #fff; --grafite-2: #fff; --tinta: #000; --tinta-2: #222; --tinta-3: #444; --sobre-placa: #000; --sobre-placa-2: #444; --linha: #bbb; --linha-forte: #888; --acento: #000; --alerta: #000; --alerta-tenue: #fff; } .barra, .pular, .acoes, .rodape__menu, .regua { display: none; } html.pronto [data-surge] { opacity: 1; transform: none; } body { font-size: 11pt; } .abertura { padding-top: 0; } .secao { padding-block: 18pt; } .placa { background: #fff; box-shadow: none; border: 1px solid #bbb; padding: 10pt; } .placa__palco::before { display: none; } .placa__palco img { filter: none; max-height: 150pt; } .rodape { background: #fff; color: #000; border-top: 1px solid #bbb; } /* Nada de ficha cortada entre duas folhas. */ .produto, .ficha tr, .passos li, .avisos li, .cuidados li, .etapas li { break-inside: avoid; page-break-inside: avoid; } .produto { break-before: page; page-break-before: always; } .produto:first-of-type { break-before: auto; page-break-before: auto; } .produto__placa { position: static; } /* O endereço por trás de cada link, já que no papel não se clica. */ .contato__via a::after { content: " (" attr(href) ")"; font: 400 9pt var(--mono); } .botao { border: 1px solid #888; background: #fff; color: #000; height: auto; padding: 4pt 8pt; } }