/* public/brand/landing.css — v7 Paleta eléctrica (azul profundo + magenta), header oscuro, botones animados, fondo con carrusel, y modo oscuro auto. */ /* =================== Variables base =================== */ :root{ --b1:#1d2b64; /* deep blue */ --b2:#8a2387; /* magenta violeta */ --b3:#3b82f6; /* azul vivo */ --b4:#c026d3; /* fucsia */ --ink:#0f172a; --page-bg:#0b1020; --glass: rgba(255,255,255,.08); --ring: rgba(59,130,246,.5); } /* Modo oscuro automático (clase .auto-dark en ) */ .auto-dark :root, .auto-dark body{ --page-bg:#070b16; } /* =================== Fondo (usamos rotador; apagamos el pseudo) =================== */ body{ position: relative; background: var(--page-bg); } /* Si tenías un pseudo con imagen, lo apagamos para no “luchar” con el rotador */ body::before{ opacity:0 !important; } .bg-rotator{ position: fixed; inset:0; z-index:-1; overflow:hidden; } .bg-rotator .bg-layer{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,16,32,.42), rgba(11,16,32,.42)), var(--img) center/cover no-repeat; opacity:0; transition: opacity 1s ease; filter: saturate(120%) contrast(108%) brightness(108%); } .bg-rotator .bg-layer.active{ opacity:.42; } /* =================== Cabecera oscura =================== */ .header-dark/outer{ background: radial-gradient(900px 360px at 40% -120px, rgba(138,35,135,.35), transparent 60%), linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.92)); position: sticky; top:0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); } .header-dark, .header-dark a{ color:#fff; } .brandmark{ border-radius: 14px; background: radial-gradient(120% 120% at 20% 20%, rgba(59,130,246,.22), transparent 60%), linear-gradient(135deg, rgba(138,35,135,.28), rgba(29,43,100,.28)); } /* Neón sutil solo en auto-dark */ @keyframes neonRing { 0% { box-shadow: 0 0 0 rgba(99,102,241,0), 0 0 0 rgba(236,72,153,0); } 50% { box-shadow: 0 0 24px rgba(99,102,241,.35), 0 0 34px rgba(236,72,153,.25); } 100% { box-shadow: 0 0 0 rgba(99,102,241,0), 0 0 0 rgba(236,72,153,0); } } .auto-dark .brandmark{ animation: neonRing 3.2s ease-in-out infinite; outline: 1px solid rgba(255,255,255,.08); } /* =================== Hero y preview =================== */ .hero{ padding-block: 1.5rem 2rem; } .grad-txt{ background: linear-gradient(90deg, #60a5fa 0%, #a855f7 45%, #ec4899 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow: 0 2px 22px rgba(168,85,247,.25); } .hero h1{ text-shadow: 0 2px 22px rgba(0,0,0,.35); } .preview-card{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); color:#e5e7eb; } .preview-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; } .tpl-tabs{ display:flex; gap:.375rem; flex-wrap: wrap; } .tpl-tabs .tab{ appearance:none; border:1px solid rgba(255,255,255,.18); cursor:pointer; padding:.45rem .7rem; border-radius:9999px; background: rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.85rem; transition: all .22s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .tpl-tabs .tab:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.18); } .tpl-tabs .tab.active{ background: linear-gradient(90deg, #60a5fa, #a855f7); border-color: transparent; box-shadow: 0 12px 28px rgba(96,165,250,.35); } .open-new{ color:#c7d2fe; font-size:.85rem; text-decoration: none; } .open-new:hover{ text-decoration: underline; } .frame-wrap{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#fff; } .frame{ width:100%; height:600px; display:block; border:0; background:#fff; border-radius:12px; } .caption{ color:#cbd5e1; font-size:.75rem; margin-top:.4rem; } /* =================== Botones “eléctricos” =================== */ @keyframes glowShift { 0% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(96,165,250,0)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 14px rgba(96,165,250,.45)); } 100% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(96,165,250,0)); } } .btn{ --g1: var(--b1); --g2: var(--b2); --g3: var(--b3); position: relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; height:2.25rem; padding:0 0.9rem; border-radius:12px; border:1px solid transparent; font-weight:800; letter-spacing:.2px; transition: transform .16s ease, box-shadow .16s ease, background-position .6s ease, filter .2s ease, opacity .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.08); user-select:none; will-change: transform, background-position, box-shadow, filter; } .btn.lg{ height:2.7rem; padding:0 1.15rem; border-radius:14px; } .btn.primary{ color:#fff; background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 45%, var(--g3) 100%); background-size: 200% 200%; opacity:.98; } .btn.primary:hover{ transform: translateY(-1px) scale(1.015); animation: glowShift 1.8s ease-in-out both; opacity:1; } .btn.primary:active{ animation: none; transform: translateY(0) scale(.985); box-shadow: 0 6px 16px rgba(96,165,250,.20) inset; filter: brightness(1.05); } .btn.ghost{ color:#0f172a; background:#fff; border-color:#e2e8f0; } .btn.ghost:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(30,41,59,.18); } .btn.ghost.invert{ color:#fff; background: transparent; border-color: rgba(255,255,255,.32); } .btn.ghost.invert:hover{ background: rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0,0,0,.35); } /* Foco accesible */ .btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px rgba(255,255,255,.9); } /* ===== v8 – Fix visibilidad de CTAs del header y link "Abrir en nueva pestaña" ===== */ /* El header siempre por encima del contenido */ .header-dark\/outer{ z-index: 120 !important; } /* Botones del header en modo oscuro: fondo translúcido y borde más presente */ .header-dark .btn.ghost.invert{ color:#fff !important; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: 0 8px 26px rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); } .header-dark .btn.ghost.invert:hover{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.58) !important; } /* El link "Abrir en nueva pestaña →" dentro del preview: más contraste */ .open-new{ color:#E8ECFF !important; font-weight:700; text-shadow: 0 1px 10px rgba(0,0,0,.45); } /* Por si alguna tarjeta se superpone, el hero queda por debajo del header */ .hero{ position: relative; z-index: 1; } /* ===== v9 – Limitar estilos del header y restaurar tabs del preview ===== */ /* Mantengo el look de los CTAs del header… */ .header-dark .btn.ghost.invert{ color:#fff !important; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.42) !important; box-shadow: 0 8px 26px rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); } .header-dark .btn.ghost.invert:hover{ background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.58) !important; } /* …pero NO tocar nada dentro del preview */ .preview-card .btn.ghost.invert{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: none !important; color: #fff !important; } /* Tabs del selector de plantilla (preview) como los tenías */ .preview-card .tpl-tabs .tab{ appearance:none; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.85rem; border-radius:9999px; padding:.45rem .7rem; transition:all .22s ease; box-shadow:0 0 0 rgba(0,0,0,0); } .preview-card .tpl-tabs .tab:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.18); } .preview-card .tpl-tabs .tab.active{ background: linear-gradient(90deg,#60a5fa,#a855f7); border-color: transparent; box-shadow: 0 12px 28px rgba(96,165,250,.35); } /* Asegura la cabecera encima del hero y fondo */ .header-dark{ position: sticky; top:0; z-index: 60; } /* Botones invertidos en cabecera oscura: más contraste */ .btn.ghost.invert{ color:#fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,0); } .btn.ghost.invert:hover{ background: rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.35); } /* El botón "Registro" (primario) con brillo moderado */ .btn.primary{ color:#fff; background: linear-gradient(120deg, #1d2b64 0%, #8a2387 45%, #3b82f6 100%); background-size: 200% 200%; opacity:.98; } .btn.primary:hover{ transform: translateY(-1px) scale(1.015); } /* ==== Visibilidad/contraste en la zona de preview ==== */ .preview-card { position: relative; z-index: 10; } /* Tira sutil detrás de tabs + link "Abrir en nueva pestaña" para que no se pierdan con el fondo */ .preview-top{ background: linear-gradient(180deg, rgba(8,12,24,.35), rgba(8,12,24,0)); padding: .5rem .5rem .25rem; border-radius: 12px; } /* Tabs bien contrastados */ .tpl-tabs .tab{ color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); } .tpl-tabs .tab:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); } .tpl-tabs .tab.active{ background: linear-gradient(90deg, #60a5fa, #a855f7); border-color: transparent; box-shadow: 0 6px 16px rgba(96,165,250,.35); } /* Link "Abrir en nueva pestaña" visible */ .open-new{ color:#c7d2fe!important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } .open-new:hover{ text-decoration: underline; } /* Flechas del carrusel del preview (más pedidos) */ .js-bs-nav{ color:#fff; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); box-shadow: 0 6px 12px rgba(0,0,0,.35); z-index: 5; } .js-bs-nav:hover{ background: rgba(0,0,0,.75); }