/* <-- CSS RESET FILE --> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquotebefore, blockquoteafter,
qbefore, qafter {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* <-- \CSS RESET FILE --> */
/* <-- ROOT --> */
:root{
width: 100dvw;
height: 100dvh;
width: 100vw;
height: 100vh;
background-color: #160038;
overflow: hidden;
font-family: Helvetica, sans-serif, Arial;
--color: #c1f3f3;
--focus-color: #10a7a7;
--input-blue-color: #006595;
}
@keyframes page-load {
from{
opacity: 0;
scale: 1.15;
}
to{
opacity: 1;
scale: 1;
}
}
/* <-- \ROOT --> */
/* <-- PARALLAX SETTINGS --> */
.parallax {
width: 100%;
height: 100%;
position: relative;
z-index: 0;
display: grid;
grid-template-areas: "stack";
animation: page-load linear 1.5s;
}
.parallax>*{
grid-area: stack;
}
.parallax>img{
width: 100vw;
height: 100vh;
object-fit: cover;
user-select: none;
}
.para{
scale: 1.05;
}
/* <-- \PARALLAX SETTINGS --> */
/* <-- \FORM SETTINGS --> */
.header-container{
display: flex;
align-items: center;
justify-content: center;
}
h1{
color: var(--color);
font-size: 22px;
margin-bottom: 10%;
font-weight: bold;
}
h2{
color: var(--color);
font-size: 16px;
font-weight: bold;
}
.form-container{
top: 12%;
left: 38%;
right: 38%;
bottom: 18%;
top: 12vh;
left: 38vw;
right: 38vw;
bottom: 18vh;
min-height: 600px;
min-width: 400px;
position: absolute;
background-color: var(--background-color);
background-color: rgba(0, 13, 31, 0.7);
}
form{
display: flex;
flex-direction: column;
padding: 15% 15%;
}
.gap{
margin-top: 15px;
}
input{
background-color: rgba(0, 13, 31, 1);
color: #ffffff;
border: none;
outline: none;
border-top: 1px solid black;
border-bottom: 1px solid var(--input-blue-color);
font-size: 16px;
padding: 1% 5%;
}
input::placeholder{
color: var(--input-blue-color);
}
input:focus::placeholder{
background-color: rgba(0, 13, 31, 1);
color: var(--focus-color);
}
input:focus{
outline: none;
border: 1px solid var(--focus-color);
box-shadow: 0 0 10px var(--focus-color);
}
input:-webkit-autofill{
-webkit-text-fill-color: white;
-webkit-background-clip: text;
}
#h2-info{
margin-top: 15px;
}
#input-email, #input-phone-num, #input-site-url{
margin-top: 15px;
}
#pass-err-output, #email-err-output, #phone-err-output, #site-url-err-output{
color: var(--color);
font-size: 12px;
}
#btn-submit {
border-radius: 15px;
padding: 0.6rem 1.7rem;
background-image: linear-gradient(to right, #1A428F 0%, #10a7a7 51%, #1A428F 100%);
transition: 0.5s;
background-size: 200% auto;
color: var(--color);
border: none;
display: block;
cursor: pointer;
transition-duration: 0.4s;
min-width: 100px;
}
#btn-submit:hover {
background-position: right center;
text-decoration: none;
cursor: pointer;
}
/* <-- BTN SUBMIT ANIMATIONS --> */
#btn-submit:active{
animation: btn-submit 0.15s ease-in-out;
}
.btn-submit-active{
animation: btn-submit 0.3s ease-in-out;
}
@keyframes btn-submit {
from{
transform: scale(1);
}
to{
transform: scale(0.95);
}
}
#btn-container{
display: inline-block;
position: relative;
margin-left: auto;
margin-top: 10%;
}
#btn-flex-container{
margin-top: auto;
display: flex;
}
button:after {
content: "";
display: block;
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
box-shadow: 0 0 10px 20px #10a7a7;
border-radius: 15px;
}
button:active:after {
box-shadow: 0 0 0 0 #10a7a7;
border-radius: 15px;
position: absolute;
left: 0;
top:0;
opacity: 1;
transition: 0s;
}
button:focus{
outline: 2px solid var(--focus-color);
}
/* <-- \BTN SUBMIT ANIMATIONS --> */
/* <-- \FORM SETTINGS --> */
/* <-- PARALLAX SETTINGS --> */
.roll-out-form {
animation: form-remove linear 1.2s forwards;
}
@keyframes form-remove {
from {
}
to {
scale: 1.5;
opacity: 0;
}
}
.roll-out-para-1{
animation: parallax-1 linear 1.5s forwards;
}
.roll-out-para-2{
animation: parallax-1 linear 1.5s forwards;
}
.roll-out-para-3{
animation: parallax-3 linear 2s forwards;
}
.roll-out-para-4{
animation: parallax-4 linear 2s forwards;
}
.roll-out-para-5{
animation: parallax-down linear 2s forwards;
}
.roll-out-para-6{
animation: parallax-down linear 2s forwards;
}
.roll-out-para-7{
animation: parallax-down linear 2s forwards;
}
.roll-out-para-8{
animation: parallax-down linear 2s forwards;
}
.sunrise-background-color{
animation: root-background linear 2s forwards;
}
#para-14{
scale: 0.7;
}
@keyframes parallax-1 {
from {
}
to {
transform: translateY(15vh);
scale: 2.5;
opacity: 0;
}
}
@keyframes parallax-3 {
from {
}
to {
transform: translateX(-110vw);
}
}
@keyframes parallax-4 {
from {
}
to {
transform: translateX(110vw);
}
}
@keyframes parallax-down {
from {
}
to {
transform: translateY(110vh);
}
}
@keyframes root-background{
from {
background-color: #160038;
}
to {
background-color: #5C0C43;
}
}
/* <-- SUNRISE SETTINGS --> */
.para-sunrise{
display: none;
}
.para-sunrise-settings{
display: block;
}
.para-night-sky{
display: none;
}
.sunrise-roll-in-para-9{
animation: sunrise-9 linear 2s;
}
.sunrise-9-end{
opacity: 1;
}
.sunrise-roll-in-para-10{
animation: sunrise-10 linear 2s;
}
.sunrise-roll-in-para-12{
animation: sunrise-12 linear 1.5s;
}
.sunrise-roll-in-para-13{
animation: sunrise-13 linear 1.5s;
}
.sunrise-roll-in-para-14{
animation: birds-fade-in linear 1.5s;
}
.sunrise-10-12-13-end{
opacity: 1;
transform: translateY(0vh);
}
/* SUNRISE ANIMATIONS */
@keyframes sunrise-9 {
from {
opacity: 0;
scale: 95%;
}
to {
opacity: 1;
scale: 1.05;
}
}
@keyframes sunrise-10 {
from {
opacity: 0;
transform: translateY(20vh);
}
to {
opacity: 1;
transform: translateY(0vh);
}
}
@keyframes sunrise-12 {
from {
opacity: 0;
transform: translateX(40vw);
}
to {
opacity: 1;
transform: translateY(0vh);
}
}
@keyframes sunrise-13 {
from {
opacity: 0;
transform: translateX(-40vw);
}
to {
opacity: 1;
transform: translateY(0vh);
}
}
@keyframes birds-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* <-- \SUNRISE SETTINGS --> */
/* <-- \PARALLAX SETTINGS --> */
#landing-page-container{
display: grid;
place-items: center;
align-content: center;
top: 12%;
left: 28%;
right: 28%;
bottom: 18%;
top: 12vh;
left: 28vw;
right: 28vw;
bottom: 18vh;
position: absolute;
padding: 3rem;
background: linear-gradient(65deg, rgba(111, 17, 59, 0.7), rgba(255, 56, 76, 0.7));
}
section#landing-page-container.no-display{
display: none;
}
.no-display-text{
display: none;
}
.landing-page-transition{
animation: landing-transition ease-in-out 2s;
}
@keyframes landing-transition {
0% {
opacity: 0;
scale: 0;
}
70% {
opacity: 1;
scale: 1.05;
}
100% {
scale: 1;
}
}
.announcer-message{
color: var(--color);
margin: 0;
font-size: 2.5vh;
}
.info-display-container{
min-height: 7vh;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.info-text{
color: #460038;
margin: 0;
font-size: 3.5vh;
}
.h1-transition{
animation: landing-transition ease-in-out 2s;
}
.transition-user-info{
animation: transition-user-info ease-in-out 2s forwards;
}
@keyframes transition-user-info {
from{
opacity: 0;
}
to {
opacity: 1;
}
}