/* ============================================================ CNCPIE — Estilos personalizados Colegio Nacional de Consejeros Profesionales Independientes de Empresa ------------------------------------------------------------ Tailwind se carga vía CDN en cada página (ver ). Aquí solo van: tipografía, utilidades glass, animaciones y microinteracciones que Tailwind no cubre directamente. ============================================================ */ /* ----- Tipografía base ----- */ :root { --navy: #1c2f5d; --navy-deep: #13203f; --navy-700: #26407a; --gold: #e4ca8c; --taupe: #c3ae82; --amber: #ffb800; --ink: #0f172a; --muted: #475569; /* ---- Tipografía del MENÚ (control central) ---- Cambia SOLO estos dos valores para ajustar el tamaño de letra del menú y submenú en TODO el sitio a la vez. */ --menu-fs: 15px; /* menú principal + botón Afiliarse */ --menu-sub-fs: 15px; /* submenú desplegable (homogéneo con el menú) */ } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); } /* Mejor tracking en titulares grandes */ .font-display { letter-spacing: -0.02em; } /* ----- Utilidades de cristal (glassmorphism) ----- */ /* Sobre fondos OSCUROS (hero, sección azul) */ .glass-dark { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); } /* Sobre fondos CLAROS — opacidad alta para contraste correcto */ .glass-light { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border: 1px solid rgba(28, 47, 93, 0.08); } /* Navbar al hacer scroll */ .nav-glass { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(28, 47, 93, 0.08); box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.18); } /* --- Navbar adaptable (home: transparente sobre hero oscuro) --- */ /* Estado superior (transparente): logo y textos claros */ #navbar .nav-logo-light { display: none; } #navbar .nav-logo-dark { display: block; } #navbar .nav-link { color: #ffffff; } #navbar .nav-link:hover { background: rgba(255, 255, 255, 0.12); } #navbar .nav-burger { color: #ffffff; } #navbar .nav-cta { background: #ffffff; color: var(--navy); } #navbar .nav-cta:hover { background: var(--gold); } /* Estado con glass (scroll): logo y textos navy */ #navbar.nav-glass .nav-logo-light { display: block; } #navbar.nav-glass .nav-logo-dark { display: none; } #navbar.nav-glass .nav-link { color: var(--navy); } #navbar.nav-glass .nav-link:hover { background: rgba(28, 47, 93, 0.05); } #navbar.nav-glass .nav-burger { color: var(--navy); } #navbar.nav-glass .nav-cta { background: var(--navy); color: #ffffff; } #navbar.nav-glass .nav-cta:hover { background: var(--navy-700); } /* En páginas internas el navbar ya nace con .nav-glass (fondo claro) */ /* --- Tamaño de letra del menú/submenú: gobernado por variables --- Estas reglas usan #navbar (id) por lo que ganan a las clases utilitarias de Tailwind (text-sm, text-[15px]) que quedan en el HTML. Para cambiar el tamaño en todo el sitio, edita --menu-fs / --menu-sub-fs en :root. */ #navbar .nav-link, #navbar .nav-cta { font-size: var(--menu-fs); line-height: 1.2; } /* Submenú desplegable (panel glass dentro del dropdown) */ #navbar .group .glass-light a, #navbar .group .glass-light .text-slate-400 { font-size: var(--menu-sub-fs); } /* Menú móvil: mismos tamaños para homogeneidad */ #mobile-menu a, #mobile-menu .text-slate-400 { font-size: var(--menu-sub-fs); } /* ----- Detalles dorados ----- */ .text-gradient-gold { background: linear-gradient(100deg, #f0dca6 0%, #e4ca8c 40%, #c3ae82 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hairline-gold { background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* ----- Fondo del hero con resplandores fluidos ----- */ .hero-bg { background: radial-gradient(1200px 600px at 15% -10%, rgba(38, 64, 122, 0.55), transparent 60%), radial-gradient(900px 500px at 95% 10%, rgba(228, 202, 140, 0.14), transparent 55%), linear-gradient(160deg, #13203f 0%, #1c2f5d 55%, #16284c 100%); } /* Blobs suaves animados (decoración) */ .blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: 0.5; animation: drift 18s ease-in-out infinite alternate; will-change: transform; } @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(30px, -28px, 0) scale(1.12); } } /* ============================================================ HERO CINEMATOGRÁFICO (video + figuras de cristal) Recreación vanilla del componente de 21st.dev, con la paleta CNCPIE. Sin React ni framer-motion. ============================================================ */ /* Video de fondo a pantalla completa */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Overlay para legibilidad: tinte azul + degradados arriba/abajo */ .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(19,32,63,0.55) 0%, rgba(19,32,63,0.25) 35%, rgba(19,32,63,0.6) 75%, #13203f 100%), radial-gradient(900px 500px at 50% 40%, rgba(28,47,93,0.20), transparent 70%); } /* --- Figuras de cristal elegantes --- */ .shape { position: absolute; opacity: 0; will-change: transform, opacity; animation: shapeIn 2.4s cubic-bezier(0.23, 0.86, 0.39, 0.96) forwards; animation-delay: var(--delay, 0s); } .shape-inner { position: relative; width: 100%; height: 100%; animation: shapeFloat 12s ease-in-out infinite; } .shape-pill { position: absolute; inset: 0; border-radius: 9999px; background: linear-gradient(to right, var(--g, rgba(255,255,255,0.12)), transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.08); } .shape-pill::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 70%); } @keyframes shapeIn { 0% { opacity: 0; transform: translateY(-150px) rotate(calc(var(--rot, 0deg) - 15deg)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } } @keyframes shapeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(15px); } } /* --- Entrada escalonada del contenido del hero --- */ .js .hero-up { opacity: 0; animation: heroUp 1s cubic-bezier(0.25, 0.4, 0.25, 1) forwards; animation-delay: var(--d, 0.5s); } @keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Contenedor cuyo fade controla el scroll (JS) */ #hero-content { will-change: opacity, transform; } /* ----- Animaciones de aparición (scroll reveal) ----- Solo se ocultan cuando hay JS (clase .js en ). Si el JS falla o está deshabilitado, el contenido permanece visible. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Retrasos escalonados para grids */ .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.40s; } /* ----- Tarjetas interactivas ----- */ .card-lift { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(15, 23, 42, 0.28); } /* Brillo dorado sutil en hover */ .hover-gold:hover { border-color: rgba(228, 202, 140, 0.7); } /* ----- Marquee de aliados ----- */ .marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ----- Placeholder elegante para imágenes/banners ----- */ .ph { background: linear-gradient(135deg, rgba(28, 47, 93, 0.06), rgba(195, 174, 130, 0.12)), repeating-linear-gradient(45deg, rgba(28, 47, 93, 0.04) 0 12px, transparent 12px 24px); display: flex; align-items: center; justify-content: center; color: var(--navy); position: relative; } .ph::after { content: attr(data-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.45; } .ph-dark { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(228, 202, 140, 0.12)), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 12px, transparent 12px 24px); color: #fff; } /* ----- Tabs de comités ----- */ .tab-btn { transition: all 0.25s ease; cursor: pointer; } .tab-btn[aria-selected="true"] { background: var(--navy); color: #fff; } /* ----- Scrollbar fina (estética) ----- */ @media (pointer: fine) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #eef1f6; } ::-webkit-scrollbar-thumb { background: #c3ae82; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #1c2f5d; } } /* ----- Respeto a prefers-reduced-motion ----- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .blob, .marquee, .shape, .shape-inner { animation: none !important; } .shape { opacity: 1 !important; } .js .hero-up { opacity: 1 !important; animation: none !important; } .card-lift:hover { transform: none; } * { animation-duration: 0.001ms !important; transition-duration: 0.08s !important; } }