/* ================================================================ CYBER CSIRT — IMPROVEMENTS v1.0 Agregar este archivo DESPUES de csirt-custom.css en el ================================================================ */ :root { --csirt-transition: 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* "Operation" — misma fuente del sitio, un poco mas chica */ .csirt-status-card__head { font-family: inherit; font-size: 13px; letter-spacing: .04em; font-weight: 600; } /* 2. EYEBROW: fix margin mobile */ .csirt-eyebrow { margin-top: 0 !important; } /* 3. HERO: atmosfera mejorada */ .csirt-hero { background: radial-gradient(ellipse 70% 55% at 10% -5%, rgba(72, 163, 255, 0.14), transparent 55%), radial-gradient(ellipse 50% 45% at 92% 15%, rgba(225, 17, 17, 0.16), transparent 50%), linear-gradient(180deg, rgba(3, 5, 9, 0.85) 0%, rgba(5, 7, 11, 0.97) 100%); } .csirt-hero__grid { background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 52px 52px; } /* 4. HERO PANEL: vidrio mas refinado */ .csirt-hero__panel { background: linear-gradient(160deg, rgba(14,20,32,0.92) 0%, rgba(8,12,20,0.78) 100%); box-shadow: 0 24px 72px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04); } /* 5. INFO CARDS DEL HERO */ .csirt-info-card { position: relative; overflow: hidden; transition: transform var(--csirt-transition), border-color var(--csirt-transition), box-shadow var(--csirt-transition); } .csirt-info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(72,163,255,0.5), rgba(225,17,17,0.4), transparent); opacity: 0; transition: opacity var(--csirt-transition); } .csirt-info-card:hover { transform: translateY(-5px); border-color: rgba(72,163,255,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.3); } .csirt-info-card:hover::before { opacity: 1; } /* 6. CAPABILITY CARDS: iconos con hover */ .csirt-capability-card .icon { transition: transform var(--csirt-transition), box-shadow var(--csirt-transition); } .csirt-capability-card:hover .icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 24px rgba(72,163,255,0.18); } /* 7. HIGHLIGHT ACADEMIA: bordes con acento */ .csirt-highlight__box { background: radial-gradient(circle at top right, rgba(72,163,255,.12), transparent 30%), radial-gradient(circle at bottom left, rgba(225,17,17,.08), transparent 30%), linear-gradient(165deg, rgba(12,17,26,.94), rgba(6,9,15,.9)); } .csirt-highlight__list div { border-left: 2px solid rgba(72,163,255,0.25); border-top: none; border-right: none; border-bottom: none; border-radius: 0 16px 16px 0; padding-left: 20px; transition: border-color var(--csirt-transition), background var(--csirt-transition); } .csirt-highlight__list div:hover { border-left-color: rgba(72,163,255,0.6); background: rgba(255,255,255,.05); } .csirt-highlight__list strong { font-size: 16px; } /* 8. SECTION SUBTITLES: badge estilo pill */ .section-sub-title { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ff9d9d; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(225,17,17,0.25); background: rgba(225,17,17,0.08); margin-bottom: 18px; } .section-sub-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e11111; box-shadow: 0 0 8px rgba(225,17,17,0.7); flex-shrink: 0; } /* 9. NAVBAR: indicador activo */ .header-one__main-menu.v3 nav ul li a.is-current { position: relative; } .header-one__main-menu.v3 nav ul li a.is-current::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: #e11111; border-radius: 999px; box-shadow: 0 0 8px rgba(225,17,17,0.5); } /* 10. BOTONES: efecto sweep en hover */ .saaslyn-4-btn.v2 { position: relative; overflow: hidden; } .saaslyn-4-btn.v2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); transform: translateX(-120%); transition: transform 0.6s ease; pointer-events: none; } .saaslyn-4-btn.v2:hover::after { transform: translateX(120%); } /* 11. FAQ: tipografia mejorada */ .faq-3__accordion .accordion-button { font-size: 18px; } .faq-3__accordion .accordion-item { border-color: rgba(255,255,255,0.06); transition: border-color var(--csirt-transition); } .faq-3__accordion .accordion-item:hover { border-color: rgba(72,163,255,0.18); } /* 12. FOOTER: links con efecto hover */ .footer-three .link-list ul li a { transition: color var(--csirt-transition), padding-left var(--csirt-transition); display: inline-block; } .footer-three .link-list ul li a:hover { color: #fff !important; padding-left: 4px; } .footer-three .footer-logo img { transition: filter var(--csirt-transition), transform var(--csirt-transition); } .footer-three .footer-logo:hover img { filter: brightness(1.15); transform: scale(1.03); } /* 13. NETWORK CARD: boton CTA mejorado */ .csirt-network-card__panel .theme-btn.style-three { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: linear-gradient(135deg, rgba(225,17,17,.22), rgba(72,163,255,.18)); border: 1px solid rgba(225,17,17,.28); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: transform var(--csirt-transition), box-shadow var(--csirt-transition); } .csirt-network-card__panel .theme-btn.style-three:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(225,17,17,0.2); } /* 14. PROCESO: icono animado */ .process__item .item-icon { color: rgba(72,163,255,0.75); transition: color var(--csirt-transition), transform var(--csirt-transition); } .process__item:hover .item-icon { color: #48a3ff; transform: scale(1.06) rotate(-2deg); } /* 15. BLOG CARDS: hover */ .blog-3__item { transition: transform var(--csirt-transition); } .blog-3__item:hover { transform: translateY(-4px); } .blog-3__item .item-title a { transition: color var(--csirt-transition); } .blog-3__item .item-title a:hover { color: #48a3ff !important; } /* 16. CTA SECTION */ .cta-3 { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(225,17,17,.10), transparent 55%), radial-gradient(ellipse 80% 50% at 20% 80%, rgba(72,163,255,.09), transparent 50%); } .cta-3 .content-title { letter-spacing: -0.03em; } /* 17. FORMULARIO: focus estados */ .csirt-form .form-control:focus { background: rgba(255,255,255,0.05); border-color: rgba(72,163,255,0.45); box-shadow: 0 0 0 4px rgba(72,163,255,0.1); outline: none; } .csirt-form select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.45)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; } /* 18. TESTIMONIALES: refinamiento */ .testimonial-3__item .author-designation { font-weight: 600; font-size: 13px; letter-spacing: .08em; color: #ff9d9d; } .testimonial-3__item .author-title { } /* 19. TAGS: hover decorativo */ .csirt-network-card__tags span:hover, .csirt-member-card__meta span:hover { border-color: rgba(72,163,255,0.3); background: rgba(72,163,255,0.1); color: #fff; cursor: default; transition: all 0.22s ease; } /* 20. CARD KICKER */ .card-kicker, .mini-label { color: #ff9d9d; font-size: 11px; } /* RESPONSIVE: ajustes mobile */ @media (max-width: 767px) { .faq-3__accordion .accordion-button { font-size: 16px; } .csirt-highlight__list strong { font-size: 15px; } } /* ================================================================ CYBER CSIRT — PREMIUM EFFECTS v2.0 ================================================================ */ /* --------------------------------------------------------------- CURSOR PERSONALIZADO --------------------------------------------------------------- */ *, *::before, *::after { cursor: none !important; } #csirt-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background: #e11111; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width 0.18s ease, height 0.18s ease, background 0.18s ease, opacity 0.18s ease; mix-blend-mode: screen; } #csirt-cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1.5px solid rgba(72, 163, 255, 0.6); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease, opacity 0.25s ease; } body.cursor-hover #csirt-cursor { width: 18px; height: 18px; background: #48a3ff; } body.cursor-hover #csirt-cursor-ring { width: 56px; height: 56px; border-color: rgba(225, 17, 17, 0.55); } body.cursor-click #csirt-cursor { width: 6px; height: 6px; background: #fff; } @media (max-width: 991px) { #csirt-cursor, #csirt-cursor-ring { display: none !important; } *, *::before, *::after { cursor: auto !important; } a, button, [role="button"] { cursor: pointer !important; } } /* --------------------------------------------------------------- MAGNETIC GLOW: luz que sigue el mouse en el hero --------------------------------------------------------------- */ #csirt-mouse-glow { position: fixed; pointer-events: none; z-index: 0; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(72, 163, 255, 0.07) 0%, rgba(225, 17, 17, 0.04) 35%, transparent 70% ); transform: translate(-50%, -50%); transition: transform 0.08s linear; top: 0; left: 0; } /* --------------------------------------------------------------- SCANLINE EFFECT: lineas de terminal en cards --------------------------------------------------------------- */ .csirt-status-card::after, .csirt-capability-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px ); pointer-events: none; z-index: 10; opacity: 0.6; } /* --------------------------------------------------------------- GLITCH EFFECT: en el h1 del hero --------------------------------------------------------------- */ .csirt-hero h1 { position: relative; } .csirt-hero h1.glitch-active::before, .csirt-hero h1.glitch-active::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .csirt-hero h1.glitch-active::before { text-shadow: 2px 0 #e11111; clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); animation: glitch-1 0.3s steps(1) forwards; } .csirt-hero h1.glitch-active::after { text-shadow: -2px 0 #48a3ff; clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); animation: glitch-2 0.3s steps(1) forwards; } @keyframes glitch-1 { 0% { transform: translate(0); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); } 25% { transform: translate(-3px, 1px); clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%); } 50% { transform: translate(3px, -1px); clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); } 75% { transform: translate(-1px, 2px); clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%); } 100% { transform: translate(0); } } @keyframes glitch-2 { 0% { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); } 25% { transform: translate(3px, -1px); clip-path: polygon(0 30%, 100% 30%, 100% 45%, 0 45%); } 50% { transform: translate(-3px, 1px); clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%); } 75% { transform: translate(1px, -2px); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); } 100% { transform: translate(0); } } /* --------------------------------------------------------------- TYPING CURSOR: para el eyebrow badge --------------------------------------------------------------- */ .csirt-eyebrow::after { content: '_'; display: inline-block; margin-left: 4px; opacity: 1; animation: csirt-blink-cursor 1.1s step-end infinite; color: #e11111; font-weight: 900; font-size: 14px; line-height: 1; } @keyframes csirt-blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* --------------------------------------------------------------- NEON BORDER FLOW: borde animado en la hero panel --------------------------------------------------------------- */ .csirt-hero__panel { position: relative; overflow: hidden; } .csirt-hero__panel::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--angle, 0deg), rgba(72,163,255,0.8) 0deg, rgba(225,17,17,0.8) 90deg, rgba(72,163,255,0.4) 180deg, rgba(255,255,255,0.1) 270deg, rgba(72,163,255,0.8) 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: csirt-border-rotate 4s linear infinite; pointer-events: none; } @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes csirt-border-rotate { to { --angle: 360deg; } } /* Fallback para browsers sin @property */ @supports not (background: conic-gradient(from 0deg, red, blue)) { .csirt-hero__panel::before { display: none; } } /* --------------------------------------------------------------- AURORA: fondo animado sobre el hero --------------------------------------------------------------- */ #csirt-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } #csirt-aurora .aurora-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; animation: aurora-float 12s ease-in-out infinite; } #csirt-aurora .aurora-blob:nth-child(1) { width: 600px; height: 400px; background: rgba(72, 163, 255, 0.12); top: -10%; left: -5%; animation-delay: 0s; } #csirt-aurora .aurora-blob:nth-child(2) { width: 500px; height: 300px; background: rgba(225, 17, 17, 0.10); top: 5%; right: -5%; animation-delay: -4s; } #csirt-aurora .aurora-blob:nth-child(3) { width: 400px; height: 350px; background: rgba(72, 163, 255, 0.08); bottom: -5%; left: 30%; animation-delay: -8s; } @keyframes aurora-float { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 10% { opacity: 1; } 50% { transform: translate(30px, -20px) scale(1.08); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(1); } } /* --------------------------------------------------------------- COUNTER CARDS: pulsation en los stats --------------------------------------------------------------- */ .csirt-metric-item strong { display: block; margin-bottom: 6px; font-size: clamp(20px, 1.4vw, 24px); } .csirt-status-card__head span:last-child { letter-spacing: .04em; font-size: 13px; color: rgba(255,255,255,.7); } /* --------------------------------------------------------------- CAPABILITY SECTION: fondo con grid hexagonal sutil --------------------------------------------------------------- */ .csirt-capabilities { position: relative; } .csirt-capabilities::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 2 L58 17 L58 47 L30 62 L2 47 L2 17 Z' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 60px 52px; pointer-events: none; opacity: 0.7; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,.4) 75%, transparent 100%); } /* --------------------------------------------------------------- SCROLL INDICATOR: barra de progreso superior --------------------------------------------------------------- */ #csirt-scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #e11111, #48a3ff, #e11111); background-size: 200% 100%; z-index: 99997; pointer-events: none; animation: scroll-gradient-move 3s linear infinite; transition: width 0.08s linear; } @keyframes scroll-gradient-move { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* --------------------------------------------------------------- NETWORK CARD: efecto de radar animado --------------------------------------------------------------- */ .csirt-network-card__icon { position: relative; overflow: visible !important; } .csirt-network-card__icon::after { content: ''; position: absolute; inset: -10px; border: 2px solid rgba(225, 17, 17, 0.3); border-radius: 50%; animation: radar-ping 2.5s ease-out infinite; pointer-events: none; } .csirt-network-card__icon::before { content: ''; position: absolute; inset: -20px; border: 1px solid rgba(72, 163, 255, 0.2); border-radius: 50%; animation: radar-ping 2.5s ease-out infinite 0.8s; pointer-events: none; } @keyframes radar-ping { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } /* --------------------------------------------------------------- MEMBER CARDS: efecto holographic en hover --------------------------------------------------------------- */ .csirt-member-card { --holo-x: 50%; --holo-y: 50%; } .csirt-member-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at var(--holo-x, 50%) var(--holo-y, 50%), rgba(255, 255, 255, 0.06) 0%, transparent 60% ); pointer-events: none; z-index: 5; opacity: 0; transition: opacity 0.3s ease; } .csirt-member-card:hover::after { opacity: 1; } /* --------------------------------------------------------------- HIGHLIGHT LIST: iconos animados --------------------------------------------------------------- */ .csirt-highlight__list strong::before { content: '▸ '; color: #48a3ff; font-size: 12px; opacity: 0.8; } /* --------------------------------------------------------------- FOOTER: background con grid sutil --------------------------------------------------------------- */ .footer-three { background: linear-gradient(180deg, rgba(3,5,9,0) 0%, rgba(0,0,0,0.6) 100%), repeating-linear-gradient( 90deg, transparent, transparent 79px, rgba(255,255,255,0.015) 79px, rgba(255,255,255,0.015) 80px ); } /* --------------------------------------------------------------- LOADING SKELETON: mientras cargan imgs del team --------------------------------------------------------------- */ .csirt-member-card__media img { transition: opacity 0.5s ease, transform 0.35s ease, filter 0.35s ease; } .csirt-member-card__media img:not([src]) { opacity: 0; } /* --------------------------------------------------------------- PREFERS-REDUCED-MOTION: respeto accesibilidad --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #csirt-cursor, #csirt-cursor-ring, #csirt-aurora .aurora-blob, .csirt-hero__panel::before, #csirt-scroll-progress, .csirt-network-card__icon::after, .csirt-network-card__icon::before, .csirt-eyebrow::after { animation: none !important; transition: none !important; } #csirt-cursor, #csirt-cursor-ring { display: none; } *, *::before, *::after { cursor: auto !important; } a, button { cursor: pointer !important; } }