DigiPen Institute of Technology

.slider-cuatro-caminos .item-1 .item-bg { background-image: url('/sites/default/files/public/img/academics/03-image/bfa-in-digital-art-and-animation-im.webp'); } .slider-cuatro-caminos .item-2 .item-bg { background-image: url('/sites/default/files/public/img/academics/03-image/grado-en-ingenieria-informatica-y-diseno-de-videojuegos-im.webp'); } .slider-cuatro-caminos .item-3 .item-bg { background-image: url('/sites/default/files/public/img/academics/03-image/bscs-in-real-time-interactive-simulation-im.webp'); } .slider-cuatro-caminos .item-4 .item-bg { background-image: url('/sites/default/files/public/img/academics/03-image/grado-en-ingenieria-informatica-en-inteligencia-artificial-im.webp'); } /* 2. Contenedor Principal del Slider */ .slider-cuatro-caminos { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); height: calc(100% + 55px); min-height: 640px; margin-bottom: -55px; background-color: #0d0d11; overflow: hidden; font-family: 'Proxima Nova', sans-serif, system-ui; box-sizing: border-box; } /* Integración transparente de la barra de controles */ #homepage-hero-slideshow .hero-controls, #homepage-hero-slideshow .cycle-pager, .hero-slideshow-controls { background: transparent !important; } /* 3. TÍTULO EN ESCRITORIO (Caja Roja Destacada) */ .slider-cuatro-caminos .slider-titulo-central { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); z-index: 10; color: #ffffff; background-color: #e6474a; padding: 14px 40px; /* <--- MODIFICA EL RELLENO DE LA CAJA (alto ancho) */ font-size: 2.2rem; /* <--- MODIFICA EL TAMAÑO DEL TEXTO */ border-radius: 6px; font-style: italic; font-weight: 700; text-shadow: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); pointer-events: none; white-space: nowrap; } /* 4. Estructura del Acordeón en Escritorio */ .slider-cuatro-caminos .accordion-container { display: flex; width: 108%; height: 100%; min-height: 640px; margin-left: -4%; } .slider-cuatro-caminos .accordion-item { position: relative; flex: 1; height: 100%; text-decoration: none; overflow: hidden; border-right: 2px solid rgba(255, 255, 255, 0.25); transform: skewX(-10deg); transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease; cursor: pointer; } .slider-cuatro-caminos .accordion-item .item-bg { position: absolute; top: 0; left: -20%; width: 140%; height: 100%; background-size: cover; background-position: center; transform: skewX(10deg) scale(1.05); transition: transform 0.5s ease; } .slider-cuatro-caminos .accordion-item .item-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%); transition: background 0.3s ease; z-index: 2; } .slider-cuatro-caminos .accordion-item .item-content { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%) skewX(10deg); z-index: 3; width: 85%; text-align: center; transition: transform 0.4s ease; } .slider-cuatro-caminos .accordion-item.item-1 .item-content { left: 58%; } .slider-cuatro-caminos .accordion-item.item-4 .item-content { left: 42%; } /* Badges y Subtítulos */ .slider-cuatro-caminos .badge { display: inline-block; padding: 10px 22px; background: #ffffff; color: #1a1a1a; font-weight: 700; font-size: 1.1rem; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); white-space: nowrap; } .slider-cuatro-caminos .badge-rojo { border-top: 4px solid #e6474a; } .slider-cuatro-caminos .badge-naranja { border-top: 4px solid #f2994a; } .slider-cuatro-caminos .badge-turquesa { border-top: 4px solid #07cbca; } .slider-cuatro-caminos .badge-azul { border-top: 4px solid #2f80ed; } .slider-cuatro-caminos .subtitulo { color: #ffffff; font-size: 0.82rem; line-height: 1.25; margin-top: 6px; text-shadow: 0 2px 4px rgba(0,0,0,0.9); opacity: 0.9; } /* Efectos Hover */ .slider-cuatro-caminos .accordion-container:hover .accordion-item { flex: 0.7; filter: brightness(0.5); } .slider-cuatro-caminos .accordion-container .accordion-item:hover { flex: 2.2; filter: brightness(1.1); z-index: 4; } .slider-cuatro-caminos .accordion-item:hover .item-bg { transform: skewX(10deg) scale(1.12); } .slider-cuatro-caminos .accordion-item:hover .item-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); } .slider-cuatro-caminos .accordion-item:hover .item-content { transform: translateX(-50%) skewX(10deg) translateY(-6px); } /* 5. ADAPTACIÓN MÓVIL (< 768px) */ @media (max-width: 768px) { #homepage-hero-slideshow .hero-huge-callout, #homepage-hero-slideshow .hero-huge-callout#evergreen-programs-offered, .hero-huge-callout#evergreen-programs-offered, .slider-cuatro-caminos { position: absolute !important; top: 0 !important; left: 50% !important; width: 100vw !important; height: 100% !important; max-width: 100vw !important; margin-left: -50vw !important; transform: none !important; padding: 0 !important; box-sizing: border-box !important; } /* Título Móvil en Caja Roja Compacta */ .slider-cuatro-caminos .slider-titulo-central { top: 8px !important; font-size: 1.1rem !important; width: auto !important; background-color: #e6474a !important; padding: 5px 16px !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important; text-align: center !important; } /* Contenedor vertical apilado */ .slider-cuatro-caminos .accordion-container { position: absolute !important; top: 54px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 7px !important; } /* Tarjetas apiladas de 95px */ .slider-cuatro-caminos .accordion-item { transform: none !important; flex: none !important; width: 100% !important; height: 95px !important; min-height: 95px !important; max-height: 95px !important; border-right: none !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } .slider-cuatro-caminos .accordion-item .item-bg { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: scale(1) !important; background-size: cover !important; background-position: center !important; } .slider-cuatro-caminos .accordion-item .item-content, .slider-cuatro-caminos .accordion-item.item-1 .item-content, .slider-cuatro-caminos .accordion-item.item-4 .item-content { top: 50% !important; bottom: auto !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 95% !important; max-width: none !important; padding: 0 !important; } .slider-cuatro-caminos .badge { font-size: 0.8rem !important; padding: 4px 9px !important; border-top-width: 3px !important; line-height: 1.1 !important; } .slider-cuatro-caminos .subtitulo { font-size: 0.68rem !important; margin-top: 3px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .slider-cuatro-caminos .accordion-container:hover .accordion-item { flex: none !important; filter: none !important; } } @media (max-width: 1024px) { #homepage-hero-slideshow .hero-huge-callout, #homepage-hero-slideshow .hero-huge-callout#evergreen-programs-offered, .hero-huge-callout#evergreen-programs-offered, .slider-cuatro-caminos { position: absolute !important; top: 0 !important; left: 50% !important; width: 100vw !important; height: 100% !important; max-width: 100vw !important; margin-left: -50vw !important; transform: none !important; padding: 0 !important; box-sizing: border-box !important; } /* Título Adaptado */ .slider-cuatro-caminos .slider-titulo-central { top: 14px !important; font-size: 1.3rem !important; width: auto !important; background-color: #e6474a !important; padding: 6px 20px !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important; text-align: center !important; } /* Contenedor vertical apilado */ .slider-cuatro-caminos .accordion-container { position: absolute !important; top: 60px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 15px !important; } /* Tarjetas apiladas adaptadas a iPad/Móvil */ .slider-cuatro-caminos .accordion-item { transform: none !important; flex: none !important; width: 100% !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; border-right: none !important; border-radius: 6px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } .slider-cuatro-caminos .accordion-item .item-bg { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: scale(1) !important; background-size: cover !important; background-position: center !important; } .slider-cuatro-caminos .accordion-item .item-content, .slider-cuatro-caminos .accordion-item.item-1 .item-content, .slider-cuatro-caminos .accordion-item.item-4 .item-content { top: 50% !important; bottom: auto !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 95% !important; max-width: none !important; padding: 0 !important; } .slider-cuatro-caminos .badge { font-size: 0.9rem !important; padding: 5px 12px !important; border-top-width: 3px !important; line-height: 1.1 !important; } .slider-cuatro-caminos .subtitulo { font-size: 0.72rem !important; margin-top: 4px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .slider-cuatro-caminos .accordion-container:hover .accordion-item { flex: none !important; filter: none !important; } }