DigiPen Institute of Technology

#homepage-hero-slideshow, #homepage-hero-slideshow .hero-huge-callout, .hero-huge-callout, .region-hero, #block-views-homepage-hero-slideshow-block, .views-element-container { position: relative; width: 100%; max-width: 100%; overflow: hidden; } #homepage-hero-slideshow .hero-controls, #homepage-hero-slideshow .cycle-pager, .hero-slideshow-controls { background: transparent; } .banner-puertas-abiertas { position: relative; width: 100vw; left: 50%; right: auto; transform: translateX(-50%); height: 100%; min-height: 640px; background-color: #0d0d11; padding: 60px 8% 80px 8%; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; font-family: 'Proxima Nova', sans-serif, system-ui; } .banner-puertas-abiertas .banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/sites/default/files/public/img/home/01-hero/open-house-nov-7-homepage-slide.webp'); background-size: cover; background-position: center; z-index: 1; transition: transform 0.6s ease; } .banner-puertas-abiertas:hover .banner-bg { transform: scale(1.03); } .banner-puertas-abiertas .banner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 17, 0.92) 0%, rgba(13, 13, 17, 0.75) 50%, rgba(13, 13, 17, 0.2) 100%); z-index: 2; } .banner-puertas-abiertas .banner-content { position: relative; z-index: 3; max-width: 620px; color: #ffffff; } .banner-puertas-abiertas .banner-badge { display: inline-block; background-color: #e6474a; color: #ffffff; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 4px; margin-bottom: 16px; } .banner-puertas-abiertas .banner-titulo { font-size: 2.6rem; font-weight: 800; line-height: 1.2; margin: 0 0 20px 0; color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .banner-puertas-abiertas .banner-detalles { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; } .banner-puertas-abiertas .banner-dato { display: inline-block; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); padding: 10px 20px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); } .banner-puertas-abiertas .dato-texto { font-size: 1.05rem; font-weight: 600; color: #ffffff; } .banner-puertas-abiertas .banner-btn { display: inline-block; background-color: #ffffff; color: #0d0d11; font-weight: 700; font-size: 1.05rem; padding: 14px 32px; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .banner-puertas-abiertas .banner-btn:hover { background-color: #e6474a; color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230, 71, 74, 0.4); } /* --- SOLUCIÓN PARA RESPONSIVE EN MÓVIL --- */ @media (max-width: 1024px) { /* Forzamos una altura mínima real en píxeles para ignorar el cálculo dinámico por JS del slider */ #homepage-hero-slideshow, #homepage-hero-slideshow .views-slideshow-cycle-main-frame, #homepage-hero-slideshow .views-slideshow-cycle-main-frame-row, #homepage-hero-slideshow .cycle-slide { height: auto !important; min-height: 520px !important; } .banner-puertas-abiertas { position: relative; width: 100vw; max-width: 100vw; left: 50%; transform: translateX(-50%); height: 100% !important; min-height: 520px !important; padding: 40px 20px 60px 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; overflow: hidden; } .banner-puertas-abiertas .banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; z-index: 1; } .banner-puertas-abiertas .banner-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(13, 13, 17, 0.65) 0%, rgba(13, 13, 17, 0.85) 100%); z-index: 2; } .banner-puertas-abiertas .banner-content { position: relative; z-index: 3; width: 100%; max-width: 100%; } .banner-puertas-abiertas .banner-badge { display: inline-block; font-size: 0.78rem; padding: 5px 12px; margin-bottom: 12px; } .banner-puertas-abiertas .banner-titulo { font-size: 1.55rem; line-height: 1.25; margin: 0 0 14px 0; color: #ffffff; } .banner-puertas-abiertas .banner-detalles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .banner-puertas-abiertas .banner-dato { display: inline-block; width: fit-content; padding: 6px 12px; } .banner-puertas-abiertas .dato-texto { font-size: 0.88rem; } .banner-puertas-abiertas .banner-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 12px 20px; font-size: 0.95rem; } } @media (max-width: 390px) { #homepage-hero-slideshow, #homepage-hero-slideshow .views-slideshow-cycle-main-frame, #homepage-hero-slideshow .views-slideshow-cycle-main-frame-row, #homepage-hero-slideshow .cycle-slide, .banner-puertas-abiertas { min-height: 480px !important; } .banner-puertas-abiertas { padding: 30px 16px 50px 16px; } .banner-puertas-abiertas .banner-titulo { font-size: 1.35rem; } }

.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/bs-in-computer-science-and-game-design-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/bsai-in-computer-science-in-artificial-intelligence-im.webp'); } #homepage-hero-slideshow .views-slideshow-cycle-main-frame, #homepage-hero-slideshow .views-slideshow-cycle-main-frame-row, #homepage-hero-slideshow .cycle-slide, .slider-cuatro-caminos { overflow: visible !important; } .slider-cuatro-caminos { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); height: 100%; min-height: 500px; background-color: #0d0d11; font-family: 'Proxima Nova', sans-serif, system-ui; box-sizing: border-box; } #homepage-hero-slideshow .hero-controls, #homepage-hero-slideshow .cycle-pager, #homepage-hero-slideshow .views-slideshow-controls-bottom { background: #0d0d11; background-color: #0d0d11; border: none; box-shadow: none; } .slider-cuatro-caminos .slider-titulo-central { position: absolute; top: calc(100% + 55px); left: 40%; transform: translateY(-50%); z-index: 99; color: #ffffff; background-color: #e6474a; padding: 10px 24px; font-size: 1.7rem; border-radius: 6px; font-style: italic; font-weight: 800; text-shadow: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); pointer-events: none; white-space: nowrap; } .slider-cuatro-caminos .accordion-container { display: flex; width: 108%; height: 100%; min-height: 500px; 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: 70px; 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%; } .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; } .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); } /* Vista apilada en tablets y dispositivos móviles */ @media (max-width: 1024px) { #homepage-hero-slideshow, #homepage-hero-slideshow .views-slideshow-cycle-main-frame, #homepage-hero-slideshow .views-slideshow-cycle-main-frame-row, #homepage-hero-slideshow .cycle-slide, .slider-cuatro-caminos { position: relative; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; background-color: #0d0d11; overflow: hidden !important; } #homepage-hero-slideshow .cycle-slide { top: 0; left: 0; } .slider-cuatro-caminos { width: 100vw; left: 50%; transform: translateX(-50%); padding: 12px 16px 4px 16px; box-sizing: border-box; display: block; } .slider-cuatro-caminos .slider-titulo-central { position: relative; top: 0; left: 0; transform: none; display: block; margin: 0 auto 10px auto; font-style: italic; font-weight: 800; background: transparent; color: #e6474a; box-shadow: none; text-align: center; white-space: nowrap; font-size: 1.3rem; padding: 0; } .slider-cuatro-caminos .accordion-container { position: relative; height: auto; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; } .slider-cuatro-caminos .accordion-item { position: relative; transform: none; flex: none; width: 100%; border-right: none; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); display: block; } .slider-cuatro-caminos .accordion-item .item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1); background-size: cover; background-position: center; } .slider-cuatro-caminos .accordion-item .item-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 2; } .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 { position: absolute; top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%); width: 92%; text-align: center; z-index: 3; } .slider-cuatro-caminos .subtitulo { display: none; } .slider-cuatro-caminos .accordion-container:hover .accordion-item { flex: none; filter: none; } #homepage-hero-slideshow .views-slideshow-controls-bottom, #homepage-hero-slideshow .hero-controls, #homepage-hero-slideshow .cycle-pager { position: relative; width: 100%; background-color: #0d0d11; padding: 8px 0 12px 0; margin: 6px 0 0 0; border: none; display: flex; justify-content: center; align-items: center; } } @media (max-width: 390px) { .slider-cuatro-caminos .slider-titulo-central { font-size: 1.15rem; } .slider-cuatro-caminos .accordion-container { max-width: 350px; gap: 6px; } .slider-cuatro-caminos .accordion-item { height: 58px; } .slider-cuatro-caminos .badge { font-size: 0.82rem; padding: 5px 12px; border-top-width: 3px; } } @media (min-width: 391px) and (max-width: 767px) { .slider-cuatro-caminos .slider-titulo-central { font-size: 1.25rem; margin-bottom: 8px; } .slider-cuatro-caminos .accordion-container { max-width: 440px; gap: 6px; } .slider-cuatro-caminos .accordion-item { height: 66px; } .slider-cuatro-caminos .badge { font-size: 0.88rem; padding: 6px 14px; border-top-width: 3px; } } @media (min-width: 768px) and (max-width: 1024px) { .slider-cuatro-caminos .slider-titulo-central { font-size: 1.5rem; margin-bottom: 12px; } .slider-cuatro-caminos .accordion-container { max-width: 620px; gap: 12px; } .slider-cuatro-caminos .accordion-item { height: 105px; } .slider-cuatro-caminos .badge { font-size: 1.05rem; padding: 8px 18px; border-top-width: 4px; } } @media (min-width: 768px) and (max-width: 1024px) and (max-height: 700px) { .slider-cuatro-caminos .slider-titulo-central { font-size: 1.2rem; margin-bottom: 6px; } .slider-cuatro-caminos .accordion-container { max-width: 500px; gap: 6px; } .slider-cuatro-caminos .accordion-item { height: 52px; } .slider-cuatro-caminos .badge { font-size: 0.85rem; padding: 4px 12px; border-top-width: 3px; } }