/* ============================================================ brand.css - Identidad CHATMATRI para las paginas publicas ============================================================ Paleta: amarillo #FEE40D, azul electrico #005DF3, azul cielo #3F93EF, negro #1C1C1C, gris #3D3D3D. Tipografias: Montserrat (texto) + Tactic Sans (titulos/marca). Cargar como ULTIMO del para que mande sobre los estilos inline de cada pagina. ============================================================ */ /* Montserrat reducido a 3 pesos (Regular/Bold/Black) para bajar el peso de la carga inicial (~246KB menos). Cada @font-face cubre un RANGO de pesos, asi todo font-weight solicitado mapea a un archivo real y no hay faux-bold: 100-500 -> Regular, 600-700 -> Bold, 800-900 -> Black. */ @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.woff2') format('woff2'); font-weight:100 500; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Bold.woff2') format('woff2'); font-weight:600 700; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat-Black.woff2') format('woff2'); font-weight:800 900; font-display:swap; } @font-face { font-family:'Tactic Sans'; src:url('../fonts/TacticSans-Blk.woff2') format('woff2'); font-weight:900; font-display:swap; } :root { --ch-amarillo: #FEE40D; --ch-azul: #005DF3; --ch-azul-cielo: #3F93EF; --ch-negro: #1C1C1C; --ch-gris: #3D3D3D; } /* ============================================================ TEMA CLARO / OSCURO (paginas publicas) Tokens que gobiernan fondo, texto y superficies. El JS theme-public.js pone data-theme en . Oscuro = base. ============================================================ */ :root, [data-theme="dark"] { --pg-bg: #0a0614; --pg-bg2: #141019; --pg-text: #f4f2ef; --pg-soft: rgba(255,255,255,.62); --pg-faint: rgba(255,255,255,.40); --pg-border: rgba(255,255,255,.10); --pg-card: rgba(255,255,255,.04); --pg-input: rgba(0,0,0,.45); } [data-theme="light"] { --pg-bg: #f5f6fb; --pg-bg2: #ffffff; --pg-text: #14121c; --pg-soft: #54505f; --pg-faint: #7c7790; --pg-border: rgba(0,0,0,.12); --pg-card: #ffffff; --pg-input: #ffffff; } /* Tipografia base de marca + fondo/texto por tema */ body { font-family:'Montserrat', system-ui, sans-serif !important; background: var(--pg-bg) !important; color: var(--pg-text); } h1, h2, h3, .tracking-tighter, .tracking-tightest, .display-font { font-family:'Tactic Sans','Montserrat',sans-serif !important; } /* El isotipo/logo cuadrado del navbar (tenia gradiente morado) -> marca */ [class*="from-indigo-500"] { background: linear-gradient(135deg, var(--ch-azul), var(--ch-amarillo)) !important; color: #1C1C1C !important; } /* Wordmark del hero (texto con gradiente recortado) -> azul a amarillo, manteniendo el efecto bg-clip-text. */ .from-indigo-400 { background-image: linear-gradient(90deg, var(--ch-azul), var(--ch-azul-cielo) 45%, var(--ch-amarillo)) !important; } /* Botones / acentos amarillos -> amarillo de marca */ [class*="from-amber-400"], .bg-amber-400 { background: var(--ch-amarillo) !important; color:#1C1C1C !important; } .text-amber-400, .text-amber-300 { color: var(--ch-amarillo) !important; } .text-yellow-400 { color: var(--ch-amarillo) !important; } /* Foco de inputs en amarillo de marca */ input:focus, textarea:focus, select:focus { border-color: var(--ch-amarillo) !important; } /* Enlaces de acento azul opcional para hovers neutros */ a.acento-azul { color: var(--ch-azul); } /* Boton "Entrar" del navbar: pill con borde + icono de perfil. Distinto del CTA blanco "Registrarme". Autonomo (no depende de Tailwind purgado). */ .btn-entrar { display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 9999px; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; text-decoration: none; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; } .btn-entrar svg { width: 18px; height: 18px; opacity: .95; } .btn-entrar:hover { border-color: var(--ch-azul); background: var(--ch-azul); box-shadow: 0 8px 22px -6px rgba(0,93,243,.55); transform: translateY(-1px); } .btn-entrar:active { transform: translateY(0); } @media (max-width: 640px) { .btn-entrar { padding: 8px 13px; font-size: 13.5px; } .btn-entrar svg { width: 16px; height: 16px; } } /* ============================================================ Navbar publica compartida (mapa, gasolineras, buscados, blog, faq) Sticky con blur, enlaces desktop y drawer movil. Tokens de tema. ============================================================ */ .pnav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(7,5,18,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--pg-border); } [data-theme="light"] .pnav { background: rgba(255,255,255,0.85); } .pnav-left { display: flex; align-items: center; gap: 18px; min-width: 0; } .pnav-links { display: flex; align-items: center; gap: 2px; } .pnav-link { padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--pg-soft); text-decoration: none; white-space: nowrap; transition: color .18s ease, background .18s ease; } .pnav-link:hover { color: var(--pg-text); background: var(--pg-card); } .pnav-link.on { color: var(--pg-text); background: var(--pg-card); box-shadow: inset 0 -2px 0 var(--ch-amarillo); } .pnav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pnav-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--pg-card); border: 1px solid var(--pg-border); border-radius: 12px; color: var(--pg-text); cursor: pointer; font-size: 18px; line-height: 1; } .pnav-movil { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 10px 16px 16px; background: var(--pg-bg); border-bottom: 1px solid var(--pg-border); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); } .pnav-movil.abierto { display: flex; } .pnav-movil .pnav-link { padding: 12px 14px; font-size: 15px; } @media (max-width: 1023.98px) { .pnav-links { display: none; } .pnav-burger { display: inline-flex; } } [data-theme="light"] .btn-entrar { color: var(--pg-text); border-color: rgba(0,0,0,.22); background: rgba(0,0,0,.04); } [data-theme="light"] .btn-entrar:hover { color: #fff; } /* ============================================================ Boton flotante de tema (sol/luna) — inyectado por theme-public.js ============================================================ */ #theme-toggle-fab { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 44px; height: 44px; border-radius: 9999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--pg-text); background: var(--pg-card); border: 1px solid var(--pg-border); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.5); transition: transform .15s var(--ease-out, ease), border-color .2s, background .2s; } #theme-toggle-fab svg { width: 20px; height: 20px; } @media (hover:hover) and (pointer:fine) { #theme-toggle-fab:hover { border-color: var(--ch-amarillo); transform: translateY(-2px); } } #theme-toggle-fab:active { transform: scale(.94); } @media (prefers-reduced-motion: reduce) { #theme-toggle-fab { transition: none; } } /* ============================================================ MODO CLARO: remapear las utilidades "dark-first" de las paginas. Las paginas estan hechas en oscuro (text-white, glass, etc.); en claro las reconducimos a los tokens legibles. Solo aplica con [data-theme="light"]; en oscuro todo queda como estaba. ============================================================ */ [data-theme="light"] .glass { background: var(--pg-card) !important; border-color: var(--pg-border) !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.25); } /* Texto blanco -> oscuro SOLO dentro de tarjetas (.glass) y navs. Asi no tocamos secciones intencionalmente oscuras (hero/landing) donde el texto blanco debe seguir siendo blanco. */ [data-theme="light"] .glass [class~="text-white"], [data-theme="light"] nav [class~="text-white"] { color: var(--pg-text) !important; } [data-theme="light"] .glass [class~="text-white/90"], [data-theme="light"] .glass [class~="text-white/80"], [data-theme="light"] .glass [class~="text-white/70"], [data-theme="light"] nav [class~="text-white/70"] { color: var(--pg-text) !important; } [data-theme="light"] .glass [class~="text-white/60"], [data-theme="light"] .glass [class~="text-white/50"] { color: var(--pg-soft) !important; } [data-theme="light"] .glass [class~="text-white/40"], [data-theme="light"] .glass [class~="text-white/30"] { color: var(--pg-faint) !important; } /* Bordes blancos dentro de tarjetas/navs -> tokens. */ [data-theme="light"] .glass [class~="border-white/10"], [data-theme="light"] .glass [class~="border-white/5"], [data-theme="light"] .glass [class~="border-white/20"], [data-theme="light"] nav[class~="border-white/10"] { border-color: var(--pg-border) !important; } /* Inputs/textarea legibles en claro (globales: un input siempre es un input). */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: var(--pg-input) !important; color: var(--pg-text) !important; border-color: var(--pg-border) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--pg-faint) !important; } /* ============================================================ DOCUMENTOS (FAQ + legales): base CLARA, con variante oscura. Se activa solo en para no afectar a las paginas de marca. ============================================================ */ body.doc { background:#ffffff !important; color:#15131c; } [data-theme="dark"] body.doc { background:#0f0b17 !important; color:#d4cfe0; } [data-theme="dark"] body.doc h1 { color:#8fb6ff; } [data-theme="dark"] body.doc h2, [data-theme="dark"] body.doc summary { color:#f3f1f7; } [data-theme="dark"] body.doc .fecha, [data-theme="dark"] body.doc .sub { color:#9a94ab; } [data-theme="dark"] body.doc p, [data-theme="dark"] body.doc li { color:#cbc6d6; } [data-theme="dark"] body.doc a, [data-theme="dark"] body.doc .volver { color:#8fb6ff; } [data-theme="dark"] body.doc table { color:#cbc6d6; } [data-theme="dark"] body.doc th { background:#1b1726; color:#f3f1f7; } [data-theme="dark"] body.doc td, [data-theme="dark"] body.doc th { border-color:#2c2738; } [data-theme="dark"] body.doc details { background:#15111f !important; border-color:#2c2738 !important; } [data-theme="dark"] body.doc .contacto, [data-theme="dark"] body.doc .fuerte { background:#16223b; border-color:#2a3a5c; } [data-theme="dark"] body.doc .aviso { background:#2a2410; border-color:#5c521f; } [data-theme="dark"] body.doc .emergencia, [data-theme="dark"] body.doc .pendiente { background:#2a1414; border-color:#5c2a2a; color:#fca5a5; } [data-theme="dark"] body.doc button.config { background:#005DF3; }