:root{ /* ---- Tema de cor (baseado na logo) ---- --cor-destaque muda conforme [data-tema] no ; --cor-destaque-clara é derivada automaticamente dela via color-mix(), então cada tema novo só precisa definir uma única cor. Os dois neutros abaixo são fixos — iguais nos 4 temas, como pedido. */ --cor-destaque:#FFCC29; --cor-destaque-clara: color-mix(in srgb, var(--cor-destaque) 78%, white); --cor-neutro-escuro:#5F6157; --cor-neutro-claro:#848688; --bg:#14120E; --bg-soft:#1B1812; --bg-card:#201C15; --ink:#F3EEDF; --ink-muted:#A89F88; --ink-faint:#6F6858; --teal:#2F6F62; --teal-bright:#4C9585; --line: color-mix(in srgb, var(--cor-destaque) 16%, transparent); --radius:2px; --espaco-bloco: clamp(3.5rem, 7vw, 6rem); /* Glow do hover dos cards de Serviços — generoso no escuro. Modulado por tema (ver body.tema-claro abaixo): um valor fixo só funciona num dos dois temas, igual ao gotcha já corrigido no scrim do hero. */ --glow-servico: 0 0 28px 3px color-mix(in srgb, var(--cor-destaque) 45%, transparent); /* Cores fixas do Header/Footer — o FUNDO/TEXTO não mudam entre os temas claro/escuro do corpo da página (propositalmente), mas o acento sempre acompanha o --cor-destaque escolhido, igual ao resto do site. */ --chrome-bg-soft:#1B1812; --chrome-ink:#F3EEDF; --chrome-ink-muted:var(--cor-neutro-claro); --chrome-line: color-mix(in srgb, var(--cor-destaque) 16%, transparent); } /* As 4 variações de cor da logo. "amarelo" não precisa de regra própria: é o valor padrão já definido em :root acima. */ [data-tema="verde"]{ --cor-destaque:#00A859; } [data-tema="laranja"]{ --cor-destaque:#F6A13A; } [data-tema="azul"]{ --cor-destaque:#3E4095; } /* Tema claro: inverte só as cores do CORPO da página (fundo/texto). Header e Footer usam as variáveis --chrome-*, que não são redefinidas aqui, então permanecem escuros nos dois temas. */ body.tema-claro{ --bg:#F7F3E7; --bg-soft:#EFE7D3; --bg-card:#FFFFFF; --ink:#1C1912; --ink-muted:#5C5646; --ink-faint:#8A8371; --cor-destaque-clara: color-mix(in srgb, var(--cor-destaque) 70%, black); --line: color-mix(in srgb, var(--cor-destaque) 22%, transparent); --glow-servico: 0 0 14px 1px color-mix(in srgb, var(--cor-destaque) 22%, transparent); } *{box-sizing:border-box;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:'Inter',-apple-system,Segoe UI,Tahoma,Arial,sans-serif; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; overflow-x:hidden; } a{color:inherit;text-decoration:none;} .mono{font-family:'IBM Plex Mono',monospace;} .container{max-width:1200px;margin:0 auto;padding:0 32px;} ::selection{background:var(--cor-destaque);color:#14120E;} /* Header — sempre escuro, independente do tema claro/escuro escolhido */ .topo{ position:sticky;top:0;z-index:50; background:rgba(20,18,14,0.94);backdrop-filter:blur(10px); border-bottom:1px solid var(--chrome-line); } .topo-conteudo{ display:flex;align-items:center;justify-content:space-between; padding:14px 32px;max-width:1200px;margin:0 auto;gap:24px;flex-wrap:wrap; } .logo{display:flex;align-items:center;} .logo img{height:74px;display:block;} .topo nav{display:flex;gap:28px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap;} .topo nav a{ font-size:13.5px;letter-spacing:0.03em;color:var(--chrome-ink-muted);font-weight:500;transition:color .2s; } .topo nav a:hover{color:var(--cor-destaque-clara);} /* Submenu "Serviços" — agrupa as páginas de serviço (Cruzeiros/Hotéis/Scooters/ Casas de Temporada) num só item de nav, mesmo padrão hover/focus-within do .admin-dropdown. No mobile (nav já colapsada em lista vertical via .nav-toggle) isso é achatado de volta pra lista simples — ver media query. */ .nav-servicos{position:relative;} .nav-servicos-toggle{ font:inherit;font-size:13.5px;letter-spacing:0.03em;color:var(--chrome-ink-muted);font-weight:500; background:none;border:none;padding:0;cursor:pointer;transition:color .2s; } .nav-servicos-toggle:hover{color:var(--cor-destaque-clara);} .nav-servicos-menu{ display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%); flex-direction:column;background:#1B1812;border:1px solid var(--chrome-line);border-radius:4px; min-width:190px;padding:6px;box-shadow:0 16px 32px rgba(0,0,0,0.45);z-index:60; } .nav-servicos-menu a{display:block;padding:9px 12px;font-size:13px;color:var(--chrome-ink-muted);border-radius:3px;white-space:nowrap;transition:all .15s;} .nav-servicos-menu a:hover{background:color-mix(in srgb, var(--cor-destaque) 12%, transparent);color:var(--cor-destaque-clara);} .nav-servicos:hover .nav-servicos-menu, .nav-servicos:focus-within .nav-servicos-menu{display:flex;} .login-group{display:flex;gap:10px;align-items:center;} .btn-login{ font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.05em;text-transform:uppercase; padding:9px 15px;border-radius:var(--radius);border:1px solid var(--chrome-line);color:var(--chrome-ink-muted); white-space:nowrap;transition:all .2s;background:transparent;cursor:pointer; } .btn-login.agencia{border-color:var(--cor-neutro-escuro);color:var(--cor-destaque-clara);} .btn-login.agencia:hover{background:var(--cor-destaque);color:#14120E;border-color:var(--cor-destaque);} .btn-login.viajante:hover{background:var(--teal);color:#0E1E1A;border-color:var(--teal);} /* Botão de "escolha de tipo de conta" (Agência/Pessoa Jurídica vs. Cliente/Pessoa Física) com título + subtítulo menor — usado no header (deslogado) e na tela de Login. */ .btn-login-duplo{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.35;gap:1px;} .btn-login-subtitulo{display:block;font-size:0.72em;opacity:0.7;font-weight:400;letter-spacing:0.03em;} /* Submenu do Admin (dropdown no header) — agrupado em seções e distribuído em 2 colunas (balanceadas automaticamente via column-count) pra não virar uma lista vertical enorme conforme o site ganha mais telas de Admin. */ .admin-dropdown{position:relative;} .admin-dropdown-menu{ display:none;position:absolute;top:calc(100% + 8px);right:0; background:#1B1812;border:1px solid var(--chrome-line);border-radius:4px; width:440px;max-width:calc(100vw - 24px);padding:10px 6px;box-shadow:0 16px 32px rgba(0,0,0,0.45);z-index:60; column-count:2;column-gap:4px; } .admin-dropdown-menu a{ display:block;padding:8px 12px;font-size:13px;color:var(--chrome-ink-muted); border-radius:3px;white-space:nowrap;transition:all .15s; } .admin-dropdown-menu a:hover{background:color-mix(in srgb, var(--cor-destaque) 12%, transparent);color:var(--cor-destaque-clara);} .admin-dropdown-menu a.admin-dropdown-destaque{font-weight:700;color:var(--cor-destaque-clara);margin-bottom:4px;} .admin-dropdown:hover .admin-dropdown-menu, .admin-dropdown:focus-within .admin-dropdown-menu{display:block;} .admin-dropdown-grupo{break-inside:avoid-column;margin-bottom:6px;} .admin-dropdown-titulo{ font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.06em; color:var(--chrome-ink-muted);opacity:0.55;font-weight:700;padding:7px 12px 2px; } /* Cards do painel inicial do Admin (/Admin), agrupados por seção (mesmos 5 grupos do dropdown — ver _Layout.cshtml). Dois formatos: com contador (pendência de verdade, número grande + destaque quando > 0) e "simples" (só atalho de navegação, sem número, pra links que não representam fila de trabalho). */ .admin-painel-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:12px 0 8px;} .admin-painel-card{ display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:92px;min-width:0; background:var(--bg-card);border:1px solid var(--line); border-radius:4px;padding:22px 20px;transition:transform .2s,border-color .2s; } .admin-painel-card:hover{transform:translateY(-3px);border-color:var(--cor-neutro-escuro);} .admin-painel-card.atencao{border-color:color-mix(in srgb, var(--cor-destaque) 45%, var(--line));} .admin-painel-num{font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:600;color:var(--ink-muted);} .admin-painel-card.atencao .admin-painel-num{color:var(--cor-destaque-clara);} .admin-painel-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:0.05em;overflow-wrap:break-word;} .admin-painel-card.simples .admin-painel-label{ font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;text-transform:none; letter-spacing:normal;color:var(--ink); } /* Switch discreto de tema claro/escuro */ .tema-toggle{ width:32px;height:32px;border-radius:50%;flex-shrink:0; border:1px solid var(--chrome-line);background:transparent;color:var(--chrome-ink-muted); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s; } .tema-toggle:hover{border-color:var(--cor-destaque);color:var(--cor-destaque-clara);} .tema-toggle svg{width:15px;height:15px;} .tema-toggle .icone-sol{display:none;} body.tema-claro .tema-toggle .icone-lua{display:none;} body.tema-claro .tema-toggle .icone-sol{display:block;} /* Botão de menu (hamburger) — só aparece no mobile, abre/fecha a nav */ .nav-toggle{display:none;} /* No desktop, esse wrapper "desaparece" do layout (display:contents), então o botão (escondido) e a