h1:focus { outline: none; } body { padding-block-start: calc(1rem + clamp(2.375rem, 1.851rem + 1.456vw, 3.125rem)); } input::placeholder { color: #cccccc !important; } .navbar-brand { padding-top: 0; padding-bottom: 0; } .navbar-brand img { height: clamp(2.375rem, 1.851rem + 1.456vw, 3.125rem) } .hero-background { background: url("/img/PrimeGateLogoScreen.jpg") no-repeat; background-size: cover; width: 100%; height: auto; aspect-ratio: 1920 / 1080; } .hero2 { font-size: clamp(1.375rem, 2.4vw + 0.75rem, 2.75rem); font-weight: 700; letter-spacing: -0.01562em; line-height: 1.2; } .hero3 { font-size: clamp(1rem, 2vw + 0.5rem, 2rem); letter-spacing: -0.00833em; line-height: 1.2; } .hero4 { font-size: clamp(0.75rem, 2vw + 0.25rem, 1.5rem); line-height: 1.1; } .hero5 { font-size: clamp(0.75rem, 1.4vw + 0.4rem, 1.5rem); letter-spacing: 0.00833em; line-height: 1; font-weight: 500; } .hero-button { --bs-btn-padding-y: clamp(0.152rem, 0.014rem + 0.383vw, 0.35rem); --bs-btn-padding-x: clamp(0.625rem, 0.188rem + 1.214vw, 1.25rem); --bs-btn-font-size: clamp(1rem, 2vw + 0.5rem, 2rem); } .videocontainer { aspect-ratio: 360/640; max-height: min(480px, 70vw); } .videocontainer video { width: 100%; height: 100%; } .bg-dark-primegate { background-color: #01000e !important; } .bg-gray-default { background-color: #78909C; } .bg-gray-light { background-color: #455A64; } .bg-gray-lighter { background-color: #546E7A; } .box-shadow { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } .contenttypes { display: inline-flex; margin-inline: 2px; } .contenttypes ul { overflow: hidden; position: relative; margin: 0; width: 190px; font-size: var(--bs-body-font-size); height: 24px; padding: 0 8px; border-radius: 4px; color: var(--bs-highlight-color); background-color: var(--bs-highlight-bg); } .contenttypes li { display: block; height: 100%; animation: rotate-the-words 10s infinite; } @keyframes rotate-the-words { 0% { transform: translateY(100%); } 2%, 10% { transform: translateY(-0%); } 12%, 20% { transform: translateY(-100%); } 22%, 30% { transform: translateY(-200%); } 32%, 40% { transform: translateY(-300%); } 42%, 50% { transform: translateY(-400%); } 52%, 60% { transform: translateY(-500%); } 62%, 70% { transform: translateY(-600%); } 72%, 80% { transform: translateY(-700%); } 82%, 90% { transform: translateY(-800%); } 92%, 100% { transform: translateY(-900%); } } .video-container { margin-block-start: 0.75rem; max-width: 720px; } .faq { max-width: 80ch; } .accordion { --bs-accordion-active-color: #fff; --bs-accordion-active-bg: #5D8AA8; margin: 0 auto; } .accordion-button:focus { box-shadow: none; } .preloader { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; margin: 0; padding: 0; } .preloader img { max-width: 100%; height: auto; } .cms-section-slope { position: relative; } .cms-section-slope:after { content: ""; position: absolute; inset: 0; bottom: -1px; right: -1px; background-color: rgba(255,255,255,1); -webkit-clip-path: polygon(85% 0%, 100% 0%, 100% 100%, 100% 100%); clip-path: polygon(85% 0%, 100% 0%, 100% 100%, 100% 100%); } .cms-section-lines { background-image: url('data:image/svg+xml,'); background-position: center; background-repeat: no-repeat; background-size: cover; } .lifecycle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .segment { display: flex; align-items: center; position: relative; width: 800px; height: 400px; border-radius: 0 200px 200px 0; margin-left: -600px; transition: all 0.6s ease-in-out; flex-shrink: 0; cursor: pointer; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); color: white; } .segment:nth-child(1) { background: linear-gradient(to bottom right, #816dff, #4b3cee); z-index: 4; } .segment:nth-child(2) { background: linear-gradient(to bottom right, #745cff, #4330e3); z-index: 3; } .segment:nth-child(3) { background: linear-gradient(to bottom right, #674cff, #3b2cd9); z-index: 2; } .segment:nth-child(4) { background: linear-gradient(to bottom right, #5c4dff, #392acc); z-index: 1; } .segment:hover, .segment:focus-within { margin-left: -200px; } .segment-content { display: flex; align-items: center; } .details { width: 600px; overflow: hidden; padding-inline-start: 220px; padding-inline-end: 30px; } .step { text-align: center; width: 190px; padding: 0 0.75rem; } @media (max-width: 992px) { .lifecycle { flex-direction: column; } .segment { align-items: start; padding: 0.75rem; margin: 0.75rem 0; width: 90%; height: auto; border-radius: 4px; transform: none !important; } .segment:hover, .segment:focus-within { margin-left: 0px; } .segment-content { flex-direction: column-reverse; align-items: start; } .step { width: 100%; } .details { width: 100%; padding-inline-start: 0; font-size: clamp(0.688rem, 0.207rem + 1.335vw, 1.375rem); } } .logo-animate { animation: logo-zoom 8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; transform-origin: center; } @keyframes logo-zoom { 0%, 100% { transform: scale(1) rotate(0deg) translateX(0); } 40% { transform: scale(2) rotate(45deg) translateX(70px); } 50% { transform: scale(2) rotate(45deg) translateX(70px); } 90% { transform: scale(1) rotate(0deg) translateX(0); } } .block { padding: 5rem 0; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; background-color: #FFFFFF; } .fs-7 { font-size: 0.75rem; } .fs-8 { font-size: 0.625rem; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } article { max-width: 90ch !important; } .image-placeholder { display: none; } .cookie-consent-container { position: fixed; bottom: 0; width: 100%; z-index: 1000; } .academy-background { background: url("/img/academy/PrimeGateAcademyHeader.jpg") no-repeat; background-size: cover; width: 100%; height: auto; aspect-ratio: 1280 / 416; } .academy-subtitle { background-color: rgba(0, 0, 0, 1); } .academy-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; } .academy-tutorial { cursor: pointer; } @media (min-width: 992px) { .academy-tutorial:first-child { grid-column: span 2; cursor: default; } }