/* ========================================================== SISTEMA — A Floresta Studio 48 Camada PORTÁVEL de design. Nada aqui é específico do Viajant. Por que este arquivo existe separado: Marcelo pediu (2026-08-04) para poder levar partes do Viajant ao Lojin. O Lojin é Vue + Tailwind e o Viajant é CSS puro — o que viaja entre eles NÃO é o código, são os TOKENS e os PADRÕES. Para levar ao Lojin: copiar os valores do bloco :root para o tema do Tailwind e reimplementar os componentes; a lógica de tema por contexto é idêntica. A MECÂNICA CENTRAL, e é ela que vale mais que qualquer cor: uma única variável (--acao) troca o tema inteiro — botões, ícones ativos, bloco de contraste, pinos de mapa, bordas. No Viajant o contexto é o DESTINO (Atenas, Milos, Madri). No Lojin o mesmo mecanismo serve à ÉPOCA (80/90/2000/2010/atual) e aos 5 estilos do Art Bible. ========================================================== */ :root{ /* ---- Base: papel claro, tinta escura ---- Escolha deliberada e medida: a interface é lida NA RUA, SOB SOL. Texto claro sobre fundo escuro (o tema anterior) desaparece na luz do dia. Papel claro com tinta quase preta é o que sobrevive lá fora. */ --papel:#F4EFE9; --papel-2:#EDE6DE; /* Era #FFFFFF puro — o mesmo defeito que Marcelo apontou ("a cor branca causa desconforto") e que o proprio DESIGN-SYSTEM proibe na §2.2. Branco puro tem luminancia 1,0: ao sol, com brilho alto, e a superficie que mais cansa. Agora e o papel puxado para o claro, mantendo o matiz quente. */ --cartao:#FDFBF8; --tinta:#1E1B18; --tinta-media:#5A524A; /* medido: #8A8078 dava 3,86 sobre cartão branco — reprovava em AA (4,5). #6E655C dá 5,4. Texto de apoio ainda é texto: tem que ser legível ao sol. */ --tinta-suave:#6E655C; --borda:rgba(30,27,24,.10); /* ---- Cor de AÇÃO: o que muda por contexto ---- Trocar --acao e --acao-clara reveste o app inteiro. Padrão = Atenas. */ --acao:#1D6FA3; --acao-clara:#3E93C6; --acao-tenue:rgba(29,111,163,.12); --contraste:#1B3A4B; /* bloco escuro (clima). Também temático, não é preto fixo. */ /* Cor do texto EM CIMA da ação. Tem que ser token, não `#fff` fixo: medi a skin "noite" e branco sobre o azul claro dela dava 2,78 — ilegível. Cada skin declara o que enxerga sobre a própria cor. */ --sobre-acao:#FFFFFF; /* ---- Sinais de estado (não mudam com o contexto) ---- */ --ok:#2F7A4F; --atencao:#B26A12; --erro:#A32B22; /* Texto EM CIMA do erro. Mesmo motivo do --sobre-acao: na skin noite o erro clareia para #FF7A6E e branco sobre ele mede 2,54 — ilegível justamente no botão mais importante (DESIGN-SYSTEM §3, medido). */ --sobre-erro:#FFFFFF; /* ---- Forma ---- */ --r-cartao:20px; --r-botao:16px; --r-mini:12px; --r-pilula:999px; /* ---- Sombra: difusa e baixa, nunca dura ---- */ --sombra:0 8px 24px rgba(30,27,24,.08); --sombra-alta:0 14px 36px rgba(30,27,24,.14); /* ---- Toque: piso absoluto, sem exceção ---- */ --toque:44px; /* ---- Tipografia ---- PISO DE 13px. O app tinha textos de 11px, ilegíveis ao sol. */ --t-display:clamp(34px, 9vw, 48px); --t-titulo:clamp(24px, 6vw, 30px); --t-cartao:17px; --t-corpo:15px; --t-apoio:13px; --t-rotulo:11px; /* SÓ para rótulo em CAIXA ALTA com tracking — nunca texto corrido */ } /* ========================================================== SKINS (TEMAS) Aplicar no elemento raiz: UM mecanismo, três usos na holding — foi por isso que virou `data-skin` e não `data-destino`: · Viajant → skin por DESTINO (Atenas, Milos, Madri) · Lojin → skin por ÉPOCA (80/90/2000/2010/atual) e pelos 5 estilos do Art Bible; a época pesa em cor, tipografia e ornamento, que são exatamente as camadas que este arquivo controla · The Office → os 11 temas já existentes Uma skin declara SÓ estas 4 variáveis. Se precisar mexer em mais, o problema não é a skin — é o componente estar com cor fixa em vez de token. ========================================================== */ [data-skin="atenas"]{ --acao:#1D6FA3; --acao-clara:#3E93C6; --acao-tenue:rgba(29,111,163,.12); --contraste:#1B3A4B; } [data-skin="ilhas"], [data-skin="milos"], [data-skin="mykonos"]{ --acao:#146F6A; --acao-clara:#2A9C95; --acao-tenue:rgba(20,111,106,.12); --contraste:#123F3C; } [data-skin="madri"]{ --acao:#B8442E; --acao-clara:#D96A4F; --acao-tenue:rgba(184,68,46,.12); --contraste:#4A241B; } [data-skin="brasil"]{ --acao:#3B7A57; --acao-clara:#5AA47A; --acao-tenue:rgba(59,122,87,.12); --contraste:#1F3D2C; } /* Skin escura: não é "modo noturno" automático, é escolha do usuário. Prova de que o sistema aguenta inverter o papel sem trocar componente. */ [data-skin="noite"]{ /* --ok e --erro CLAREADOS para o tema escuro (achado do designer-ui, 2026-08-04): os valores do :root mediam 2,97:1 e 2,17:1 sobre #24232B — reprovam até como objeto gráfico (3:1). Um pino de pendência ficaria invisível justamente no tema usado à noite e no avião. */ --ok:#5FD08A; --atencao:#E8A33D; --erro:#FF7A6E; /* sobre o erro clareado, o papel escuro da própria skin: 7,14 medido */ --sobre-erro:#16151A; --papel:#16151A; --papel-2:#1F1E25; --cartao:#24232B; --tinta:#F2EFEA; --tinta-media:#B8B2AA; --tinta-suave:#9C958D; --borda:rgba(242,239,234,.12); --acao:#4EA3D8; --acao-clara:#79BEE8; --acao-tenue:rgba(78,163,216,.16); --contraste:#0E1D26; --sobre-acao:#0E1D26; --sombra:0 8px 24px rgba(0,0,0,.45); --sombra-alta:0 14px 36px rgba(0,0,0,.55); } /* ========================================================== MENUS — o padrão de duas camadas das referências Trilha lateral no tablet, barra inferior no celular. Nunca as duas juntas. ========================================================== */ /* ---- Trilha lateral: CARTÕES SEPARADOS, não uma barra contínua ---- É o que dá o ar lúdico pedido e aumenta a área de toque de cada item. */ .s-trilha{ display:none; flex-direction:column; gap:10px; position:fixed; left:12px; top:50%; transform:translateY(-50%); z-index:40; } .s-trilha__item{ width:66px; min-height:66px; padding:8px 4px; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--r-botao); box-shadow:var(--sombra); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--tinta-media); font-size:var(--t-rotulo); font-weight:700; } .s-trilha__item .ic{ font-size:20px; line-height:1; color:var(--acao); } .s-trilha__item[aria-current="page"]{ background:var(--acao); color:var(--sobre-acao); } .s-trilha__item[aria-current="page"] .ic{ color:var(--sobre-acao); } .s-trilha__item:focus-visible{ outline:3px solid var(--acao); outline-offset:2px; } /* ---- Barra inferior: pílula flutuante com centro elevado ---- */ .s-barra{ position:fixed; left:12px; right:12px; z-index:40; bottom:calc(12px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--r-pilula); box-shadow:var(--sombra-alta); padding:6px; } .s-barra__item{ min-height:var(--toque); border:0; background:none; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--tinta-suave); font-size:var(--t-rotulo); font-weight:700; } .s-barra__item .ic{ font-size:20px; line-height:1; } .s-barra__item[aria-current="page"]{ color:var(--acao); } .s-barra__item:focus-visible{ outline:3px solid var(--acao); outline-offset:-2px; border-radius:var(--r-botao); } /* O centro elevado: a AÇÃO principal da tela, não um destino de navegação. No Viajant é "Quero conhecer" — registrar um lugar estando nele. */ .s-barra__centro{ width:58px; height:58px; margin:-22px auto 0; border-radius:50%; background:var(--acao); color:var(--sobre-acao); border:4px solid var(--papel); box-shadow:var(--sombra-alta); cursor:pointer; font-size:24px; display:flex; align-items:center; justify-content:center; } .s-barra__centro:focus-visible{ outline:3px solid var(--acao); outline-offset:3px; } @media (min-width:820px){ .s-trilha{ display:flex; } .s-barra{ display:none; } } /* ========================================================== COMPONENTES PORTÁVEIS ========================================================== */ /* ---- Cartão: a unidade de tudo ---- */ .s-cartao{ background:var(--cartao); border-radius:var(--r-cartao); box-shadow:var(--sombra); padding:16px; border:1px solid var(--borda); } /* ---- Rótulo de seção ---- */ .s-rotulo{ font-size:var(--t-rotulo); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acao); } /* ---- Alvo de toque garantido ---- Aplicar em qualquer controle pequeno: mantém o ícone do tamanho que é e expande só a área clicável. */ .s-toque{ min-width:var(--toque); min-height:var(--toque); display:inline-flex; align-items:center; justify-content:center; } /* ---- BILHETE ---- O padrão mais aproveitável das referências: um passe com serrilha e código. No Viajant é o cartão de voo (já tem companhia, código, origem, destino, assento). No Lojin serve a ingresso de evento e a comprovante de compra. */ .s-bilhete{ display:grid; grid-template-columns:1fr 96px; background:var(--cartao); border-radius:var(--r-cartao); box-shadow:var(--sombra); overflow:hidden; border:1px solid var(--borda); } .s-bilhete__corpo{ padding:16px 18px; min-width:0; } .s-bilhete__lado{ position:relative; background:var(--acao); display:flex; align-items:flex-end; justify-content:center; padding:10px; } /* a serrilha: o detalhe que faz o olho reconhecer "isto é um bilhete" */ .s-bilhete__lado::before{ content:""; position:absolute; left:-6px; top:0; bottom:0; width:12px; background:radial-gradient(circle at 6px 6px, transparent 5px, var(--cartao) 5.5px) 0 0/12px 12px repeat-y; } .s-bilhete__codigo{ width:100%; height:34px; background:repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 4px, var(--tinta) 4px 5px, transparent 5px 8px); opacity:.85; border-radius:2px; } /* ---- FAIXA DE ATRIBUTOS ---- 4 colunas: ícone, rótulo, valor. Nas referências é Wildlife/Landscape/Best Time/Temperature. No Viajant: Duração/Moeda/Fuso/Idioma. No Lojin: atributos de um asset (raridade, procedência, polígonos, licença). */ .s-atributos{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:var(--cartao); border-radius:var(--r-cartao); box-shadow:var(--sombra); padding:14px 10px; border:1px solid var(--borda); } .s-atributo{ text-align:center; min-width:0; } .s-atributo .ic{ color:var(--acao); font-size:20px; line-height:1; } .s-atributo .rot{ display:block; font-size:var(--t-apoio); font-weight:700; color:var(--tinta); margin-top:6px; } .s-atributo .val{ display:block; font-size:var(--t-apoio); color:var(--tinta-suave); } /* ---- BLOCO DE CONTRASTE (clima) ---- Existe UM por tela. Se tudo virar escuro, o sistema colapsa no problema que ele veio resolver. */ .s-contraste{ background:var(--contraste); color:#fff; border-radius:var(--r-cartao); box-shadow:var(--sombra); padding:16px 18px; } .s-contraste .valor{ font-size:34px; font-weight:800; line-height:1; } .s-contraste .serie{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px; } .s-contraste .serie div{ text-align:center; font-size:var(--t-apoio); color:rgba(255,255,255,.82); } /* ---- LISTA COM MINIATURA ---- */ .s-lista-item{ display:flex; align-items:center; gap:12px; padding:8px 0; min-height:var(--toque); } .s-lista-item img, .s-lista-item .thumb{ width:56px; height:56px; border-radius:var(--r-mini); object-fit:cover; flex:0 0 56px; background:var(--papel-2); } .s-lista-item .txt{ min-width:0; flex:1; } .s-lista-item .txt b{ display:block; font-size:var(--t-cartao); font-weight:700; color:var(--tinta); } .s-lista-item .txt span{ font-size:var(--t-apoio); color:var(--tinta-suave); } /* ---- CARTÃO DE PESSOA ---- */ .s-pessoa{ background:var(--cartao); border-radius:var(--r-cartao); box-shadow:var(--sombra); padding:12px; text-align:center; border:1px solid var(--borda); } .s-pessoa img{ width:52px; height:52px; border-radius:50%; object-fit:cover; } .s-pessoa b{ display:block; font-size:var(--t-apoio); margin-top:6px; color:var(--tinta); } .s-pessoa .nota{ font-size:var(--t-apoio); color:var(--acao); font-weight:700; } /* ---- PINO DE MAPA ---- */ .s-pino{ width:44px; height:44px; border-radius:50%; background:var(--cartao); box-shadow:var(--sombra-alta); display:flex; align-items:center; justify-content:center; font-size:20px; } /* ---- BOTÕES ---- */ .s-btn{ min-height:var(--toque); padding:0 20px; border:0; cursor:pointer; border-radius:var(--r-botao); font-family:inherit; font-size:var(--t-corpo); font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; } .s-btn--acao{ background:var(--acao); color:var(--sobre-acao); } .s-btn--acao:hover{ background:var(--acao-clara); } .s-btn--calmo{ background:var(--papel-2); color:var(--tinta); } .s-btn:focus-visible{ outline:3px solid var(--acao); outline-offset:2px; } /* ---- Acessibilidade que o sistema garante por padrão ---- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ========================================================== MORPHISM TRANSLÚCIDO COLORIDO Pedido de Marcelo (2026-08-04): "gosto do modelo de morphism, translúcido colorido". O TRADE-OFF, resolvido e não ignorado: vidro fino sobre fundo imprevisível foi o que derrubou o contraste do tema anterior para 1,93. Vidro OPACO O BASTANTE (>=92%) mantém o efeito e devolve a leitura. Perde-se transparência exagerada; ganha-se conseguir ler no sol. POR QUE `--vidro` é rgba literal por skin, e não color-mix: a primeira versão usava color-mix aninhado com calc() dentro. O navegador resolveu aquilo para rgba(1,1,1,.92) — quase PRETO — e o contraste do texto despencou para 1,07. Medido, não suposto. Valor literal é previsível. Cada valor abaixo é o cartão da skin tingido com ~12% da cor de ação dela. ========================================================== */ :root{ --vidro:rgba(228,238,244,.92); --vidro-desfoque:18px; } [data-skin="atenas"]{ --vidro:rgba(228,238,244,.92); } [data-skin="ilhas"], [data-skin="milos"], [data-skin="mykonos"]{ --vidro:rgba(228,238,237,.92); } [data-skin="madri"]{ --vidro:rgba(247,233,230,.92); } [data-skin="brasil"]{ --vidro:rgba(232,239,235,.92); } [data-skin="noite"]{ --vidro:rgba(43,56,71,.94); } /* `body` prefixado NÃO é enfeite de especificidade: o style.css carrega DEPOIS deste arquivo e redefine `.card{background:var(--glass-bg)}`. Sem o prefixo a regra perde na cascata por ordem e o cartão volta a branco chapado. */ body .s-vidro, body .card, body .stat-card, body .bottom-nav, body .s-cartao, body .s-atributos, body .s-pessoa{ background:var(--vidro); backdrop-filter:blur(var(--vidro-desfoque)) saturate(140%); -webkit-backdrop-filter:blur(var(--vidro-desfoque)) saturate(140%); border:1px solid color-mix(in srgb, var(--acao) 22%, var(--borda)); } /* Brilho no topo — o detalhe que faz parecer vidro, e não um retângulo chapado com desfoque atrás. */ body .s-vidro, body .card, body .s-cartao{ position:relative; } body .s-vidro::after, body .card::after, body .s-cartao::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%); mix-blend-mode:soft-light; } /* O talão do bilhete é o oposto: cor CHEIA, sem vidro. O contraste entre superfície translúcida e sólida é o que dá profundidade — vidro em tudo vira sopa. */ body .bilhete__talao{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--acao); } /* Sem suporte a backdrop-filter o vidro vira superfície opaca, nunca some: degradação graciosa em vez de texto solto sobre o papel. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ body .s-vidro, body .card, body .stat-card, body .bottom-nav, body .s-cartao, body .s-atributos, body .s-pessoa{ background:var(--vidro); } } /* Na skin noite o brilho de topo queima a leitura — some. */ body[data-skin="noite"] .s-vidro::after, body[data-skin="noite"] .card::after, body[data-skin="noite"] .s-cartao::after{ display:none; } /* ========================================================== TECLAS — menus com aspecto de keycap 3D Referência entregue por Marcelo (2026-08-04): teclas de teclado, umas brancas e uma TRANSLÚCIDA laranja, com volume, brilho e sombra real. Palavra dele: "quero os menus inspirados literalmente nesse aspecto". Como o volume é feito sem 3D de verdade (é CSS, tem que ser barato): 1. a FACE de cima é um gradiente claro→escuro; 2. a ESPESSURA é uma box-shadow sólida deslocada para baixo, na cor escura da própria tecla — é ela que faz o olho ler "isto tem altura"; 3. a SOMBRA no chão é uma segunda box-shadow, difusa; 4. o BRILHO é um ::before de gradiente branco no topo, com blend. O item ativo é a tecla translúcida colorida da referência — e é aí que o morphism encontra o menu: mesma linguagem, um só sistema. AFUNDAR AO TOCAR não é enfeite: é o feedback tátil que a referência promete. A tecla desce 3px e a espessura encolhe na mesma medida — se só a posição mudasse, ela pareceria escorregar em vez de ser pressionada. ========================================================== */ :root{ --tecla-face:#FBF8F4; --tecla-face-2:#E9E2D9; --tecla-borda:#CFC5B8; --tecla-altura:6px; } [data-skin="noite"]{ --tecla-face:#2F2E37; --tecla-face-2:#232228; --tecla-borda:#15141A; } .s-tecla{ position:relative; min-width:var(--toque); min-height:var(--toque); padding:10px 14px; border:0; cursor:pointer; font-family:inherit; font-size:var(--t-apoio); font-weight:800; letter-spacing:.01em; color:var(--tinta); background:linear-gradient(180deg, var(--tecla-face) 0%, var(--tecla-face-2) 100%); border-radius:14px; box-shadow: 0 var(--tecla-altura) 0 0 var(--tecla-borda), /* espessura */ 0 calc(var(--tecla-altura) + 6px) 14px rgba(30,27,24,.28); /* sombra no chão */ transform:translateY(0); transition:transform .09s ease-out, box-shadow .09s ease-out; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; } /* brilho da face — o que faz parecer plástico e não papel */ .s-tecla::before{ content:""; position:absolute; inset:2px 2px 40% 2px; border-radius:12px 12px 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); pointer-events:none; } .s-tecla .ic{ font-size:20px; line-height:1; position:relative; } /* pressionada: desce e perde espessura na mesma medida */ .s-tecla:active{ transform:translateY(calc(var(--tecla-altura) - 2px)); box-shadow:0 2px 0 0 var(--tecla-borda), 0 3px 6px rgba(30,27,24,.30); } .s-tecla:focus-visible{ outline:3px solid var(--acao); outline-offset:3px; } /* ATIVA = a tecla translúcida colorida da referência */ .s-tecla[aria-current="page"], .s-tecla.ativa{ color:var(--sobre-acao); background:linear-gradient(180deg, color-mix(in srgb, var(--acao) 82%, transparent) 0%, var(--acao) 100%); box-shadow: 0 var(--tecla-altura) 0 0 color-mix(in srgb, var(--acao) 62%, #000), 0 calc(var(--tecla-altura) + 8px) 18px color-mix(in srgb, var(--acao) 45%, transparent); backdrop-filter:blur(6px) saturate(160%); -webkit-backdrop-filter:blur(6px) saturate(160%); } .s-tecla[aria-current="page"]::before, .s-tecla.ativa::before{ background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); } /* Sem movimento: a tecla ainda afunda (é informação, não decoração), mas sem transição. */ @media (prefers-reduced-motion: reduce){ .s-tecla{ transition:none; } }