/* ========================================================================= Sara Bittante: tokens de identidade visual Direção: a parede da galeria é papel de aquarela; a interface recua. Uma só família (Lato), com a personalidade vinda do contraste de pesos. Contrastes calculados pela fórmula WCAG 2.x (luminância relativa). ========================================================================= */ /* ---------- Fontes (Lato, OFL, hospedagem local) ------------------------- woff2 gerado por tools/fontes-woff2.sh; o .ttf fica como reserva enquanto a conversão não roda. Hairline não é usada (fina demais). */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Lato-Light.woff2") format("woff2"), url("../fonts/Lato-Light.ttf") format("truetype"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Lato-LightItalic.woff2") format("woff2"), url("../fonts/Lato-LightItalic.ttf") format("truetype"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Lato-Regular.woff2") format("woff2"), url("../fonts/Lato-Regular.ttf") format("truetype"); } @font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Lato-Italic.woff2") format("woff2"), url("../fonts/Lato-Italic.ttf") format("truetype"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Lato-Bold.woff2") format("woff2"), url("../fonts/Lato-Bold.ttf") format("truetype"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/Lato-Black.woff2") format("woff2"), url("../fonts/Lato-Black.ttf") format("truetype"); } :root { /* ---------- Cores base ------------------------------------------------ Luminâncias: papel .848 | papel-claro .917 | lodo .018 | lodo-suave .079 mare .074 | mare-funda .037 | linha-forte .201 Contrastes sobre --cor-papel (#EFEDE8): lodo #1F2620 13,2:1 AAA texto principal lodo-suave #4A514B 7,0:1 AAA legendas, técnica, medidas mare #1B5559 7,2:1 AAA links, botão, selo disponível linha-forte #7A7D76 3,6:1 bordas de campo (>= 3:1, não-texto) linha #CFCCC4 decorativa, nunca carrega informação sozinha Papel sobre mare (texto do botão): 7,2:1 AAA. Papel sobre mare-funda (hover): 10,3:1 AAA. */ --cor-papel: #EFEDE8; /* fundo: papel de aquarela, cinza-quente, não creme */ --cor-papel-claro: #F7F6F2; /* passe-partout atrás das obras e campos */ --cor-lodo: #1F2620; /* texto: verde-negro da lama do mangue */ --cor-lodo-suave: #4A514B; --cor-mare: #1B5559; /* única cor de ação: a água escura do manguezal */ --cor-mare-funda: #123C3F; /* hover/pressionado */ --cor-linha: #CFCCC4; --cor-linha-forte: #7A7D76; --cor-foco: #2A5B86; /* redesign vivo: tinta da assinatura, 6,1:1 sobre papel (ver --foco-*) */ /* ---------- Cores de série (só dentro da página da série) ------------- floresta-resta mata #2F4A2A sobre papel 8,4:1 AAA queimada #E3A33A só em fios e faixas, nunca texto mangue agua #DCE6E3 fundo de faixa; lodo sobre ela 12,1:1 AAA troncos sepia #5A4636 sobre papel-claro 8,2:1 AAA hibridos nanquim #1E1F23 fundo; papel sobre ele 14,1:1 AAA grafite #B9BCB4 sobre nanquim 8,6:1 AAA anil #8EC3D9 sobre nanquim 8,6:1 AAA */ --serie-mata: #2F4A2A; --serie-queimada: #E3A33A; --serie-agua: #DCE6E3; --serie-sepia: #5A4636; --serie-nanquim: #1E1F23; --serie-grafite: #B9BCB4; --serie-anil: #8EC3D9; /* ---------- Tipografia ------------------------------------------------ Escala terça maior (1,25) a partir de 20px. Títulos em Light grande; cada série fala por um peso diferente (ver docs/series). */ --fonte: "Lato", "Helvetica Neue", Arial, sans-serif; --peso-leve: 300; --peso-normal: 400; --peso-forte: 700; --peso-preto: 900; --texto-sm: 1.125rem; /* 18px: piso absoluto */ --texto-base: 1.25rem; /* 20px: corpo */ --texto-lg: 1.5625rem; /* 25px: abertura, citação */ --texto-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* título de obra */ --texto-2xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); /* título de página */ --texto-3xl: clamp(2.75rem, 1.5rem + 6vw, 5.5rem); /* nome da artista, abertura de série */ --entrelinha-corpo: 1.6; --entrelinha-titulo: 1.1; --medida: 64ch; /* parágrafos */ --medida-curta: 40ch; /* legendas e citações */ --tracking-titulo: -0.015em; /* ---------- Espaçamento (base 8, saltos largos para respiro) --------- */ --esp-1: 0.25rem; /* 4 */ --esp-2: 0.5rem; /* 8 */ --esp-3: 0.75rem; /* 12 */ --esp-4: 1rem; /* 16 */ --esp-5: 1.5rem; /* 24 */ --esp-6: 2rem; /* 32 */ --esp-7: 3rem; /* 48 */ --esp-8: 4rem; /* 64 */ --esp-9: 6rem; /* 96 */ --esp-10: 9rem; /* 144 */ --margem-lateral: clamp(1.25rem, 5vw, 4.5rem); --largura-max: 90rem; --galeria-vao: clamp(1.5rem, 3vw, 3rem); --galeria-altura-linha: clamp(14rem, 22vw, 22rem); /* ---------- Alvos de toque (site) ------------------------------------ */ --alvo-min: 48px; --alvo-botao: 56px; /* ---------- Raios: hierarquia, não uniformidade ---------------------- */ --raio-obra: 0; /* pintura é retângulo: nunca arredondar */ --raio-controle: 3px; /* botões e campos */ --raio-selo: 0; /* ---------- Sombras: obras ficam chapadas, como na parede ------------ */ --sombra-nenhuma: none; --sombra-cabecalho: 0 1px 0 var(--cor-linha); --sombra-flutuante: 0 6px 24px -8px rgba(31, 38, 32, 0.28); /* só a barra fixa do celular */ /* ---------- Movimento ------------------------------------------------- */ --duracao: 180ms; --curva: cubic-bezier(0.2, 0.6, 0.2, 1); /* ======================================================================= Painel (/painel): fonte >= 20px, alvos >= 56px, contraste AAA (>= 7:1) Sobre --painel-fundo (#F7F6F2, lum .917): texto 14,1:1 | texto-suave 9,7:1 | borda 7,4:1 perigo #8A1C14 8,5:1 | sucesso #1F4D2A 8,9:1 Texto do botão sobre acao 7,7:1; sobre acao-hover 11,0:1 ======================================================================= */ --painel-fundo: #F7F6F2; --painel-texto: #1F2620; --painel-texto-suave: #3A403B; --painel-acao: #1B5559; --painel-acao-texto: #F7F6F2; --painel-acao-hover: #123C3F; --painel-perigo: #8A1C14; --painel-sucesso: #1F4D2A; --painel-borda: #4A514B; --painel-foco: #1B5559; --painel-texto-min: 1.25rem; /* 20px */ --painel-texto-base: 1.375rem; /* 22px */ --painel-texto-titulo: 2rem; /* 32px */ --painel-entrelinha: 1.5; --painel-alvo-min: 56px; --painel-alvo: 64px; --painel-vao: 1.5rem; --painel-raio: 6px; --painel-largura: 36rem; } @media (prefers-reduced-motion: reduce) { :root { --duracao: 0ms; } } /* ---------- Complementos do site público (etapa 3) --------------------- Medidas fixas que o design.md pede e não tinham token. */ :root { --anel-foco: 3px; /* anel de foco e recuo */ --filete: 3px; /* sublinhado do item ativo */ --selo-forma: 10px; /* círculo/quadrado do selo */ --selo-borda: 2px; /* contorno do selo vazado */ --coluna-ficha: 22rem; /* largura mínima da ficha da obra */ --obra-aura-altura: 36rem; /* mancha de cor da série atrás da obra, some na parede */ } /* ========================================================================= REDESIGN VIVO A cor sai das pinturas e vira campo. Cada série tem: um campo (fundo de seção), poças de gradiente radial nos cantos (nunca faixa horizontal: a pesquisa da Sara é "sem horizonte"), realces vivos, uma parede para a obra, uma tinta de texto e um anel de foco. Realce vivo NÃO é texto, salvo onde o comentário diz que é. Contrastes de gradiente conferidos no ponto mais claro (ou mais escuro) de cada poça isolada; poças não se sobrepõem atrás de texto. Docs: docs/design.md (Redesign vivo) e docs/movimento.md. ========================================================================= */ :root { /* ---------- Assinatura (logo) e anel de foco -------------------------- assinatura #2A5B86 lum .097: papel 6,1:1 | papel-claro 6,6:1 campo mangue 5,1:1 | parede floresta 5,8:1 assinatura-clara #A9C9E8 lum .560: nanquim 9,6:1 | campo floresta 7,1:1 Um anel precisa de >= 3:1 contra o fundo. O halo papel-claro preenche o recuo, então o anel lê até sobre pintura ou sobre o botão maré. */ --cor-assinatura: #2A5B86; --cor-assinatura-clara: #A9C9E8; --foco-cor: #2A5B86; --foco-cor-escuro: #A9C9E8; /* padrão em qualquer campo escuro */ --foco-halo: #F7F6F2; --foco-largura: 3px; --foco-recuo: 3px; /* ---------- Logo: assinatura azul, 1490 x 394 ------------------------- */ --logo-proporcao: 1490 / 394; --logo-altura-cabecalho: clamp(2.75rem, 2.3rem + 1.2vw, 3.5rem); /* 44 a 56px */ --logo-altura-rodape: 2.75rem; /* 44px */ --logo-largura-hero: clamp(17rem, 9rem + 32vw, 40rem); --logo-filtro-claro: brightness(0) invert(0.94); /* silhueta quase branca */ /* ---------- Tipografia complementar ---------------------------------- */ --texto-4xl: clamp(3.5rem, 1.6rem + 8.5vw, 8.5rem); /* Sobre: nome em Black */ --entrelinha-display: 0.95; --tracking-preto: -0.03em; --medida-display: 22ch; /* declaração em Light grande */ /* ---------- Selos de status (iguais em todas as séries) --------------- Etiqueta com fundo próprio: o contraste vale em qualquer campo. disponivel tinta #1D5631 sobre #DDEEDB 7,1:1 AAA (sobre papel 7,4:1) vendida tinta #7A2217 sobre #F7DDD6 7,9:1 AAA acervo tinta #353C5C sobre #E3E4EC 8,5:1 AAA A forma (círculo cheio / círculo vazado / quadrado vazado) e a palavra distinguem sem cor. */ --selo-disponivel-fundo: #DDEEDB; --selo-disponivel-tinta: #1D5631; --selo-vendida-fundo: #F7DDD6; --selo-vendida-tinta: #7A2217; --selo-acervo-fundo: #E3E4EC; --selo-acervo-tinta: #353C5C; --selo-raio: 3px; --selo-padding: 0.25rem 0.625rem; /* ---------- Moldura de quadro (CSS, sem cortar a obra) --------------- passe #FBFAF7 lum .956. Bisel = corte branco do passe-partout. A proporção (--ar) fica na janela da imagem; a moldura só soma. */ --moldura-passe: #FBFAF7; --moldura-passe-largura: clamp(0.625rem, 0.3rem + 1.6vw, 1.5rem); /* grade */ --moldura-passe-largura-obra: clamp(1rem, 0.4rem + 3vw, 3rem); /* página da obra */ --moldura-bisel: 0 0 0 2px #FFFFFF, 0 0 0 3px rgb(31 38 32 / 0.16); --moldura-caixa: #2E2B26; /* filete de madeira escura, só na obra e no ampliador */ --moldura-caixa-largura: clamp(6px, 0.6vw, 10px); --sombra-quadro: 0 1px 1px rgb(31 38 32 / 0.06), 0 8px 16px -6px rgb(31 38 32 / 0.16), 0 28px 48px -24px rgb(31 38 32 / 0.32); --sombra-quadro-alta: 0 2px 2px rgb(31 38 32 / 0.06), 0 14px 28px -10px rgb(31 38 32 / 0.20), 0 44px 72px -30px rgb(31 38 32 / 0.38); /* hover: camada com opacity */ --sombra-quadro-escuro: 0 2px 0 rgb(0 0 0 / 0.35), 0 30px 60px -24px rgb(0 0 0 / 0.65); /* ---------- Etiqueta de museu ----------------------------------------- fundo #FBFAF7: lodo 14,8:1 | lodo-suave 7,8:1 | maré 8,1:1 (todos AAA) */ --etiqueta-fundo: #FBFAF7; --etiqueta-fio: 4px; /* fio superior no realce da série (decorativo) */ --etiqueta-raio: 2px; --etiqueta-largura: 24rem; --sombra-etiqueta: 0 1px 0 rgb(31 38 32 / 0.08), 0 6px 18px -10px rgb(31 38 32 / 0.25); /* ---------- Botão e bordas de campo ---------------------------------- */ --raio-botao: 999px; /* pílula: só o "Tenho interesse" e chamadas principais */ --borda-mare-altura: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); /* onda SVG no topo dos campos */ /* ---------- Floresta-Resta (campo escuro) ------------------------------ campo #1F3B22 lum .035: papel 10,5:1 AAA | clorofila 8,6:1 AAA clorofila #D4E157 lum .685: TEXTO só sobre o campo; sobre papel 1,2:1 (nunca) solaris #F0882A, magenta #D23F7C, ceruleo #2E86A8: não-texto parede #E7EAD8 lum .808: lodo 12,6:1 | mata 8,0:1 | maré 6,9:1 AA Gradiente, pior ponto: clorofila 0,24 -> papel 5,7:1 e clorofila 4,7:1; magenta 0,30 -> papel 8,6:1; ceruleo 0,40 -> papel 6,8:1, clorofila 5,6:1 */ --floresta-campo: #1F3B22; --floresta-clorofila: #D4E157; --floresta-solaris: #F0882A; --floresta-magenta: #D23F7C; --floresta-ceruleo: #2E86A8; --floresta-parede: #E7EAD8; --floresta-tinta: #2F4A2A; /* = --serie-mata */ --floresta-foco: #2F4A2A; /* sobre papel/parede; no campo usa clorofila */ --floresta-gradiente: radial-gradient(55% 70% at 10% 15%, rgb(212 225 87 / 0.24), transparent 70%), radial-gradient(45% 60% at 92% 10%, rgb(210 63 124 / 0.30), transparent 70%), radial-gradient(60% 65% at 70% 100%, rgb(46 134 168 / 0.40), transparent 70%), #1F3B22; --floresta-titulo: clamp(2.75rem, 0.5rem + 4vw, 4.5rem); /* título Black na coluna de 1/3 da série */ --floresta-veu: linear-gradient(135deg, rgb(212 225 87 / 0.55), rgb(46 134 168 / 0.35)); /* ---------- Mangue (campo claro) -------------------------------------- campo #BFE0D8 lum .694: lodo 10,9:1 AAA | maré-funda 8,5:1 AAA | maré 6,0:1 AA entardecer #E8918A, ceu #F2CF7E, turquesa #2F9C9A, raiz #5E8F4E: não-texto parede #DCEAE6 lum .798: lodo 12,5:1 | maré 6,8:1 AA Gradiente, pior ponto (turquesa 0,35): lodo 8,2:1 | maré-funda 6,4:1 AA */ --mangue-campo: #BFE0D8; --mangue-entardecer: #E8918A; --mangue-ceu: #F2CF7E; --mangue-turquesa: #2F9C9A; --mangue-raiz: #5E8F4E; --mangue-parede: #DCEAE6; --mangue-tinta: #123C3F; /* = --cor-mare-funda */ --mangue-foco: #123C3F; /* campo 8,5:1 | papel 10,3:1 */ --mangue-gradiente: radial-gradient(50% 70% at 92% 0%, rgb(232 145 138 / 0.55), transparent 70%), radial-gradient(45% 60% at 6% 8%, rgb(242 207 126 / 0.50), transparent 70%), radial-gradient(70% 60% at 40% 100%, rgb(47 156 154 / 0.35), transparent 70%), #BFE0D8; --mangue-veu: linear-gradient(135deg, rgb(242 207 126 / 0.55), rgb(232 145 138 / 0.45)); /* Série Mangue viva: manchas fixas (rosa, turquesa e um clarão da parede) sobre o campo; todas se apagam antes da borda. Pior ponto (rosa 0,40 / turquesa 0,32): lodo >= 8,2:1 | maré-funda >= 6,4:1 AA */ --mangue-manchas: radial-gradient(42% 30% at 94% 20%, color-mix(in srgb, var(--mangue-entardecer) 40%, transparent), transparent 70%), radial-gradient(46% 32% at 4% 58%, color-mix(in srgb, var(--mangue-turquesa) 32%, transparent), transparent 70%), radial-gradient(50% 28% at 58% 92%, color-mix(in srgb, var(--mangue-parede) 70%, transparent), transparent 70%); --mangue-fio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6C8 0 24 0 32 6S56 12 64 6' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E"); /* só a forma (máscara) do fio-onda sob o título */ --mangue-fio-passo: 4rem; /* largura de uma onda */ --mangue-fio-altura: 0.75rem; --mare-larga: 80%; /* maré: obra larga da linha */ --mare-estreita: 60%; /* maré: obra estreita */ --mare-etiqueta: 16rem; /* espaço mínimo da legenda ao lado da obra larga */ --desloc-mare: 3rem; /* a obra chega do seu lado */ /* ---------- Troncos (campo claro, o mais quieto) ---------------------- campo = papel-claro #F7F6F2 lum .917; sepia 8,2:1 AAA ferrugem #C4642E, turquesa #3F8F9B, ocre #E0B040: não-texto, poças <= 0,18 Gradiente, pior ponto (turquesa 0,16): lodo 12,1:1 | sepia 7,0:1 */ --troncos-campo: #F7F6F2; --troncos-ferrugem: #C4642E; --troncos-turquesa: #3F8F9B; --troncos-ocre: #E0B040; --troncos-parede: #F7F6F2; --troncos-tinta: #5A4636; /* = --serie-sepia */ --troncos-foco: #5A4636; --troncos-gradiente: radial-gradient(40% 55% at 88% 15%, rgb(196 100 46 / 0.14), transparent 70%), radial-gradient(45% 60% at 8% 88%, rgb(63 143 155 / 0.16), transparent 70%), radial-gradient(35% 45% at 15% 5%, rgb(224 176 64 / 0.18), transparent 70%), #F7F6F2; --troncos-veu: linear-gradient(135deg, rgb(224 176 64 / 0.30), rgb(63 143 155 / 0.25)); /* Série Troncos viva: as mesmas três poças do gradiente (mesmas intensidades, AA conferido), numa camada fixa sobre o campo liso; todas se apagam antes da borda. O fio sob o título é um traço fino de sépia, que se desenha. */ --troncos-manchas: radial-gradient(40% 32% at 90% 22%, color-mix(in srgb, var(--troncos-ferrugem) 14%, transparent), transparent 70%), radial-gradient(46% 34% at 6% 72%, color-mix(in srgb, var(--troncos-turquesa) 16%, transparent), transparent 70%), radial-gradient(36% 28% at 20% 14%, color-mix(in srgb, var(--troncos-ocre) 18%, transparent), transparent 70%); --troncos-fio-altura: 1px; --troncos-fio-largura: 6rem; --troncos-obra-altura: 70vh; /* altura máxima de cada aquarela */ /* ---------- Híbridos (campo escuro) ----------------------------------- campo = nanquim #1E1F23 lum .014: papel 14,1:1 | anil 8,6:1 | grafite 8,6:1 vermelho #F0522F 4,7:1 AA (texto só >= 24px, ou fios) | laranja #F7832A 6,5:1 verde #5FB07F 6,3:1 | tinta #9A2B1B sobre papel 6,6:1 AA, parede 6,0:1 AA parede #E4E3E1 lum .769: lodo 12,0:1 | maré 6,6:1 AA Gradiente, pior ponto: vermelho 0,28 -> papel 9,8:1, anil 6,0:1; verde 0,22 -> anil 5,9:1; anil 0,18 -> papel 9,6:1, anil 5,8:1 */ --hibridos-campo: #1E1F23; --hibridos-vermelho: #F0522F; --hibridos-laranja: #F7832A; --hibridos-verde: #5FB07F; --hibridos-anil: #8EC3D9; --hibridos-parede: #E4E3E1; --hibridos-tinta: #9A2B1B; --hibridos-foco: #2A5B86; /* sobre claro; no campo usa anil */ --hibridos-gradiente: radial-gradient(50% 65% at 88% 12%, rgb(240 82 47 / 0.28), transparent 70%), radial-gradient(45% 60% at 8% 92%, rgb(95 176 127 / 0.22), transparent 70%), radial-gradient(40% 50% at 30% 6%, rgb(142 195 217 / 0.18), transparent 70%), #1E1F23; --hibridos-veu: linear-gradient(135deg, rgb(240 82 47 / 0.40), rgb(142 195 217 / 0.40)); /* Série Híbridos viva: a faixa nanquim se costura ao papel com pontos de vermelho (só fio, 4px; não é texto). */ --hibridos-costura: linear-gradient(90deg, var(--hibridos-vermelho) 0 var(--hibridos-ponto), transparent 0) bottom left / var(--hibridos-passo) var(--esp-1) repeat-x; --hibridos-ponto: 1.5rem; --hibridos-passo: 2.5rem; --hibridos-obra-linha: 26rem; /* altura de linha das três folhas no desktop */ /* ---------- Todas (Início, Obras sem filtro, Sobre) ------------------- Poças das quatro séries sobre o papel. Pior ponto (turquesa 0,22): lodo 10,7:1 AAA | maré 5,8:1 AA */ --todas-gradiente: radial-gradient(50% 65% at 6% 10%, rgb(212 225 87 / 0.30), transparent 70%), radial-gradient(45% 60% at 94% 6%, rgb(232 145 138 / 0.32), transparent 70%), radial-gradient(55% 60% at 18% 100%, rgb(47 156 154 / 0.22), transparent 70%), radial-gradient(35% 45% at 96% 96%, rgb(240 82 47 / 0.12), transparent 70%), #EFEDE8; /* ---------- Sobre: foto e linha do tempo ------------------------------ */ --sobre-duotone-luz: #E8918A; /* foto em cinza multiplicada sobre esta cor */ --sobre-bloco: #D4E157; /* bloco deslocado atrás da foto */ --sobre-deslocamento: clamp(1rem, 3vw, 2rem); --linha-tempo-traco: 3px; --linha-tempo-ponto: 14px; --linha-tempo-cor: #2F9C9A; /* decorativa; o ano é texto em maré-funda */ --sobre-foto-largura: clamp(15rem, 11rem + 12vw, 18rem); /* a foto tem só 249px: não passar de 1,2x */ --sobre-arco: 50% 50% 0 0; /* recorte em arco; nunca distorce */ --medida-destaque: 36ch; /* 1o parágrafo da declaração */ --deco-traco: 1.5px; /* SVG decorativo em contorno */ --deco-opacidade: 0.6; /* ---------- Movimento (detalhes em docs/movimento.md) ----------------- */ --mov-rapido: 160ms; --mov-medio: 320ms; --mov-lento: 700ms; --mov-zoom: 1200ms; --mov-assinatura: 1400ms; --mov-pagina: 280ms; --mov-filtro: 420ms; --mov-ampliador-abrir: 320ms; --mov-ampliador-fechar: 200ms; --mov-escalonar: 70ms; /* atraso por item; teto de 6 itens */ --mov-atraso-frase: 700ms; /* Início: frase depois da assinatura */ --mov-atraso-obra: 400ms; /* Início: Solaris II (só transform, o LCP não espera) */ --galeria-altura-faixa: clamp(10rem, 16vw, 15rem); /* "Outras obras desta série" */ --curva-saida: cubic-bezier(0.16, 1, 0.3, 1); --curva-entrada: cubic-bezier(0.5, 0, 0.75, 0); --curva-mare: cubic-bezier(0.37, 0, 0.63, 1); --desloc-revelar: 1.5rem; --desloc-etiqueta: -0.375rem; --desloc-linha-tempo: -1rem; --zoom-obra: 1.04; --zoom-ampliador: 0.94; --parallax-fator: 0.12; --parallax-max: 40px; /* ---------- Tema ativo (padrão = todas) ------------------------------ */ --campo: var(--cor-papel); --campo-gradiente: var(--todas-gradiente); --campo-texto: var(--cor-lodo); --campo-realce: var(--cor-mare); /* texto vivo seguro sobre o campo */ --campo-foco: var(--foco-cor); --realce: var(--floresta-clorofila); --realce-2: var(--mangue-entardecer); --parede: var(--cor-papel-claro); --tinta: var(--cor-mare); --veu: linear-gradient(135deg, rgb(212 225 87 / 0.45), rgb(232 145 138 / 0.40)); } /* Tema por série: em , numa seção ou em cada item da grade. */ [data-serie="floresta-resta"], .serie--floresta-resta { --campo: var(--floresta-campo); --campo-gradiente: var(--floresta-gradiente); --campo-texto: var(--cor-papel); --campo-realce: var(--floresta-clorofila); --campo-foco: var(--floresta-clorofila); --realce: var(--floresta-clorofila); --realce-2: var(--floresta-magenta); --parede: var(--floresta-parede); --tinta: var(--floresta-tinta); --foco-cor: var(--floresta-foco); --cor-foco: var(--floresta-foco); --veu: var(--floresta-veu); } [data-serie="mangue"], .serie--mangue { --campo: var(--mangue-campo); --campo-gradiente: var(--mangue-gradiente); --campo-texto: var(--cor-lodo); --campo-realce: var(--mangue-tinta); --campo-foco: var(--mangue-foco); --realce: var(--mangue-turquesa); --realce-2: var(--mangue-entardecer); --parede: var(--mangue-parede); --tinta: var(--mangue-tinta); --foco-cor: var(--mangue-foco); --cor-foco: var(--mangue-foco); --veu: var(--mangue-veu); } [data-serie="troncos-raizes-e-fungos"], .serie--troncos-raizes-e-fungos { --campo: var(--troncos-campo); --campo-gradiente: var(--troncos-gradiente); --campo-texto: var(--cor-lodo); --campo-realce: var(--troncos-tinta); --campo-foco: var(--troncos-foco); --realce: var(--troncos-turquesa); --realce-2: var(--troncos-ferrugem); --parede: var(--troncos-parede); --tinta: var(--troncos-tinta); --foco-cor: var(--troncos-foco); --cor-foco: var(--troncos-foco); --veu: var(--troncos-veu); } [data-serie="hibridos"], .serie--hibridos { --campo: var(--hibridos-campo); --campo-gradiente: var(--hibridos-gradiente); --campo-texto: var(--cor-papel); --campo-realce: var(--hibridos-anil); --campo-foco: var(--hibridos-anil); --realce: var(--hibridos-vermelho); --realce-2: var(--hibridos-anil); --parede: var(--hibridos-parede); --tinta: var(--hibridos-tinta); --foco-cor: var(--hibridos-foco); --cor-foco: var(--hibridos-foco); --veu: var(--hibridos-veu); } @media (prefers-reduced-motion: reduce) { :root { --mov-rapido: 0ms; --mov-medio: 0ms; --mov-lento: 0ms; --mov-zoom: 0ms; --mov-assinatura: 0ms; --mov-pagina: 0ms; --mov-filtro: 0ms; --mov-ampliador-abrir: 0ms; --mov-ampliador-fechar: 0ms; --mov-escalonar: 0ms; --desloc-revelar: 0; --desloc-etiqueta: 0; --desloc-linha-tempo: 0; --desloc-mare: 0; --zoom-obra: 1; --zoom-ampliador: 1; --parallax-fator: 0; --parallax-max: 0px; } }