@import url("https://fonts.googleapis.com/css2?family=Alice&family=Poppins:wght@400&display=swap");
html {
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
scroll-behavior: smooth !important;
}
body {
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background: #def0f7 !important;
}
body .wp-site-blocks,
body .wp-block-post-content,
body .entry-content,
body .entry-content-wrap,
body .site-content,
body .site-main,
body main,
body article,
body .wp-block-group,
body .wp-block-group__inner-container {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body .wp-site-blocks > header,
body .wp-site-blocks > footer,
body header.wp-block-template-part,
body footer.wp-block-template-part,
body .wp-block-post-title,
body .entry-title {
display: none !important;
}
#hijoland-coming-soon,
#hijoland-coming-soon * {
box-sizing: border-box;
}
#hijoland-coming-soon {
position: relative;
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
overflow: hidden;
background: #def0f7;
font-family: "Poppins", Arial, sans-serif;
}
.hijo-hero {
position: relative;
width: 100%;
margin: 0;
padding: 0;
background: #def0f7;
}
.hijo-hero__stage {
position: relative;
width: 100%;
aspect-ratio: 1280 / 732;
margin: 0;
padding: 0;
overflow: hidden;
background: #def0f7;
}
.hijo-hero__image {
position: absolute;
z-index: 1;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none !important;
margin: 0;
padding: 0;
object-fit: contain;
object-position: center top;
image-rendering: auto;
-ms-interpolation-mode: bicubic;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
animation: hijoHeroIn 1.4s cubic-bezier(.22,1,.36,1) both;
}
.hijo-clouds-wrap {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
animation: hijoCloudWrapIn 1.8s cubic-bezier(.22,1,.36,1) .12s both;
}
.hijo-hero__clouds {
position: absolute;
top: -1%;
left: -3%;
display: block;
width: 106%;
height: auto;
max-width: none !important;
margin: 0;
padding: 0;
opacity: 1;
image-rendering: auto;
pointer-events: none;
will-change: transform;
animation: hijoCloudDrift 10s ease-in-out 1.9s infinite alternate;
}
.hijo-hero__logo {
position: absolute;
z-index: 6;
top: 8.7%;
left: 50%;
display: block;
width: clamp(84px, 15.6vw, 190px);
height: auto;
max-width: none !important;
margin: 0;
padding: 0;
image-rendering: auto;
transform: translateX(-50%);
animation: hijoLogoIn 1s cubic-bezier(.22,1,.36,1) .32s both;
}
.hijo-hero__copy {
position: absolute;
z-index: 6;
top: 34.2%;
left: 50%;
width: 100%;
margin: 0;
padding: 0 20px;
transform: translateX(-50%);
text-align: center;
color: #ffffff;
animation: hijoCopyIn 1.1s cubic-bezier(.22,1,.36,1) .48s both;
}
.hijo-hero__copy h2 {
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-family: "Alice", Georgia, "Times New Roman", serif !important;
font-size: clamp(21px, 3.55vw, 54px) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-shadow:
0 2px 4px rgba(0,0,0,.35),
0 1px 9px rgba(0,0,0,.2) !important;
}
.hijo-hero__copy p {
margin: 5px 0 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-family: "Poppins", Arial, sans-serif !important;
font-size: clamp(10px, 1.65vw, 24px) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-shadow:
0 2px 4px rgba(0,0,0,.28),
0 1px 7px rgba(0,0,0,.15) !important;
}
.hijo-hero__curve {
position: absolute;
z-index: 4;
left: 0;
bottom: -1px;
display: block;
width: 100%;
height: clamp(24px, 4.95vw, 95px);
max-width: none !important;
overflow: visible;
pointer-events: none;
}
.hijo-hero__tail {
position: relative;
width: 100%;
height: clamp(115px, 12vw, 185px);
margin: 0;
padding: 0;
background: #def0f7;
}
.hijo-arrow {
position: absolute !important;
z-index: 10;
top: 0;
left: 50%;
display: flex !important;
align-items: center;
justify-content: center;
width: clamp(38px, 3vw, 48px);
height: clamp(38px, 3vw, 48px);
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: transparent !important;
line-height: 0 !important;
text-decoration: none !important;
transform: translateX(-50%) !important;
cursor: pointer;
animation: hijoArrowIn 1s cubic-bezier(.22,1,.36,1) .85s both;
}
.hijo-arrow svg {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
pointer-events: none;
}
.hijo-arrow:hover,
.hijo-arrow:active,
.hijo-arrow:focus,
.hijo-arrow:visited {
top: 0 !important;
left: 50% !important;
width: clamp(38px, 3vw, 48px) !important;
height: clamp(38px, 3vw, 48px) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
text-decoration: none !important;
transform: translateX(-50%) !important;
}
#hijo-coming-content {
scroll-margin-top: 0;
}
.hijo-body {
position: relative;
width: 100%;
min-height: clamp(620px, 78vh, 850px);
margin: 0;
padding: clamp(80px, 7vw, 125px) 24px 55px;
background: #def0f7;
text-align: center;
}
.hijo-coming {
width: 100%;
margin: 0;
padding: 0;
opacity: 1;
visibility: visible;
text-align: center;
animation: hijoComingIn 1.15s cubic-bezier(.22,1,.36,1) .15s both;
}
.hijo-coming h1 {
display: block !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
color: #08779c !important;
font-family: "Poppins", Arial, sans-serif !important;
font-size: clamp(46px, 5.8vw, 90px) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: -2.8px !important;
text-transform: none !important;
}
.hijo-coming p {
display: block !important;
margin: clamp(22px, 2vw, 32px) auto 0 !important;
padding: 0 !important;
max-width: 540px;
opacity: 1 !important;
visibility: visible !important;
color: #60686b !important;
font-family: "Poppins", Arial, sans-serif !important;
font-size: clamp(12px, .95vw, 16px) !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
}
.hijo-follow {
width: 100%;
margin-top: clamp(60px, 6vw, 90px);
padding: 0;
opacity: 1;
visibility: visible;
text-align: center;
animation: hijoContentIn 1.15s cubic-bezier(.22,1,.36,1) .35s both;
}
.hijo-follow__label {
margin: 0 0 14px !important;
padding: 0 !important;
color: #60686b !important;
font-family: "Poppins", Arial, sans-serif !important;
font-size: clamp(11px, .8vw, 14px) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
.hijo-follow__icons {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.hijo-follow__icons a {
display: flex;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
color: #626a6d !important;
text-decoration: none !important;
transition: opacity .25s ease;
}
.hijo-follow__icons a:hover {
opacity: .7;
}
.hijo-follow__icons svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.hijo-follow__icons circle,
.hijo-follow__icons rect,
.hijo-follow__icons path {
fill: none;
stroke: currentColor;
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.hijo-follow__icons .hijo-fill {
fill: currentColor;
stroke: none;
}
.hijo-follow__icons a:first-child path,
.hijo-follow__icons a:last-child path {
fill: currentColor;
stroke: none;
}
.hijo-copyright {
width: 100%;
margin-top: clamp(85px, 8vw, 130px);
padding: 0 20px;
opacity: 1;
visibility: visible;
color: #687074;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(8px, .62vw, 11px);
font-weight: 400;
line-height: 1.4;
text-align: center;
animation: hijoContentIn 1.15s cubic-bezier(.22,1,.36,1) .5s both;
}
@keyframes hijoHeroIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hijoCloudWrapIn {
0% {
opacity: 0;
transform: translateY(-16px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hijoCloudDrift {
0% {
transform: translate3d(-1.6%, .15%, 0);
}
25% {
transform: translate3d(-.6%, -.45%, 0);
}
50% {
transform: translate3d(.5%, .05%, 0);
}
75% {
transform: translate3d(1.4%, -.35%, 0);
}
100% {
transform: translate3d(2.1%, .2%, 0);
}
}
@keyframes hijoLogoIn {
0% {
opacity: 0;
transform: translate(-50%, -14px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes hijoCopyIn {
0% {
opacity: 0;
transform: translate(-50%, 22px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes hijoArrowIn {
0% {
opacity: 0;
transform: translate(-50%, -10px);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes hijoComingIn {
0% {
opacity: 0;
transform: translateY(28px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hijoContentIn {
0% {
opacity: 0;
transform: translateY(22px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (min-width: 1281px) {
.hijo-hero__image {
object-fit: cover;
object-position: center center;
}
}
@media screen and (max-width: 767px) {
.hijo-hero__logo {
top: 8%;
}
.hijo-hero__copy {
top: 33.5%;
padding: 0 15px;
}
.hijo-hero__curve {
height: 5.3vw;
min-height: 20px;
}
.hijo-hero__tail {
height: clamp(95px, 19vw, 125px);
}
.hijo-arrow,
.hijo-arrow:hover,
.hijo-arrow:active,
.hijo-arrow:focus,
.hijo-arrow:visited {
top: 0 !important;
width: clamp(34px, 9vw, 42px) !important;
height: clamp(34px, 9vw, 42px) !important;
}
.hijo-body {
min-height: 590px;
padding: 70px 20px 42px;
}
.hijo-coming h1 {
font-size: clamp(42px, 11vw, 58px) !important;
letter-spacing: -1.8px !important;
}
.hijo-coming p {
max-width: 340px;
margin-top: 21px !important;
font-size: clamp(10px, 2.8vw, 13px) !important;
}
.hijo-follow {
margin-top: 58px;
}
.hijo-follow__label {
font-size: 10px !important;
}
.hijo-follow__icons a {
width: 32px;
height: 32px;
}
.hijo-copyright {
margin-top: 82px;
font-size: 8px;
}
}
@media screen and (max-width: 480px) {
.hijo-hero__logo {
top: 7.5%;
}
.hijo-hero__copy {
top: 32.5%;
}
.hijo-hero__copy h2 {
font-size: clamp(19px, 5.5vw, 24px) !important;
}
.hijo-hero__copy p {
margin-top: 3px !important;
font-size: clamp(9px, 2.7vw, 11px) !important;
}
.hijo-hero__tail {
height: 88px;
}
.hijo-arrow,
.hijo-arrow:hover,
.hijo-arrow:active,
.hijo-arrow:focus,
.hijo-arrow:visited {
top: 0 !important;
width: 34px !important;
height: 34px !important;
}
.hijo-body {
min-height: 550px;
padding-top: 62px;
}
.hijo-coming h1 {
font-size: clamp(39px, 11.5vw, 48px) !important;
}
.hijo-coming p {
max-width: 300px;
font-size: 10px !important;
}
.hijo-follow {
margin-top: 50px;
}
.hijo-copyright {
margin-top: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.hijo-hero__image,
.hijo-clouds-wrap,
.hijo-hero__clouds,
.hijo-hero__logo,
.hijo-hero__copy,
.hijo-arrow,
.hijo-coming,
.hijo-follow,
.hijo-copyright {
animation: none !important;
}
}
