[ad_1] <![CDATA[ :root { /* Brand Colors */ --accent-steel: #71B8F2; --light-steel: #4F6984; --dark-steel: #2E3F4D; --light-slate: #8298ab; --medium-slate: #4F6984; --dark-slate: #4E505B; --obsidian-black: #000000; --dark-gradient: linear-gradient(var(--obsidian-black), #09192B); --slate-lens-glare: radial-gradient( 100% 650% at 100% -100%, rgba(113, 184, 242, 0.25) 20%, rgba(130, 152, 171, 0.15) 40%, rgba(78, 80, 91, 0.25) 85%, rgba(150, 200, 0, 0.07) 95%, rgba(200, 80, 80, 0.1) 100% ); /* Color Assignments */ --link-color: var(--accent-steel); --primary-component-gradient: var(--slate-lens-glare); --primary-body-gradient: var(--dark-gradient); } /* Footer */ footer { margin-inline: auto; max-width: 960px; } /* Content Trays */ .content-tray-section .content-tray-button-group button { opacity: 0.5; transition: 0.2s all ease; } .content-tray-section .content-tray-button-group button:hover { opacity: 1; transform: scale(1) !important; } /* Hot Fix for Nav a11y */ nav .js-hamburger:focus { box-shadow: none; outline: 2px solid white; outline-offset: 2px; border-radius: 4px; } nav>ul:first-of-type { display: block !important; } nav>ul:nth-of-type(2) { display: none !important; } @media screen and (min-width: 576px) { nav>ul:first-of-type { display: none !important; } nav>ul:nth-of-type(2) { display: table !important; } } @media screen and (min-width: 1132px) { nav>ul:nth-of-type(2) { display: none !important; } } ]]> <![CDATA[ /** * ---------------------------------------- * General * ---------------------------------------- */ :root { /* 16/9 ratio (100%/16)*9 = 56.25% */ --ratio-16-9: 56.25vw; --nav-height: 53px; --slate-lens-glare: radial-gradient( 100% 650% at 100% -100%, rgba(113, 184, 242, 0.25) 20%, rgba(130, 152, 171, 0.15) 40%, rgba(78, 80, 91, 0.25) 85%, rgba(150, 200, 0, 0.07) 95%, rgba(200, 80, 80, 0.1) 100% ); } h1 { display: inline-block; float: left; vertical-align: top; font-size: 1.0625rem !important; margin-bottom: 0rem !important; margin-top: 0rem !important; line-height: 1.6; } /** * ---------------------------------------- * Hero - OLD * ---------------------------------------- */ .max-stlp-hero-parent img { max-width: 75%; margin-bottom: 1rem; } .max-stlp-hero-parent h6 { display: inline-block; float: left; text-transform: uppercase; margin-right: 1rem; margin-top: 0.5rem; } .max-stlp-hero-parent h6:empty { display: none; } .max-stlp-hero-parent { position: relative; background-position: top; } .max-stlp-hero-parent::before { content: ""; position: absolute; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 19.6%), radial-gradient(97.07% 97.07% at 80% 0%, rgba(0, 0, 0, 0) 56.64%, #07071C 100%); background-size: cover; width: 100%; height: 100%; } .hero-cta-parent { position: relative; } /* .hero-cta-parent::before { content:""; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, #060212 20%, rgba(0, 0, 0, 0) 85%); position: absolute; z-index: 0; }*/ .max-stlp-hero .col-md-8 { height: 80vh; } @media(max-width: 767px) { .max-stlp-hero-parent { background-image: none !important; } .max-stlp-hero-parent::before { display: none !important; } .max-stlp-hero .col-md-8 { height: auto !important; } .hero-img-mobile-parent { position: relative; margin-top: var(--nav-height); background-repeat: no-repeat; background-size: 100% 100%; width: 100%; height: var(--ratio-16-9); } .hero-img-mobile-parent .img-fluid{ width: 100%; } .hero-img-mobile-parent .img-wrapper-override{ width: 100% !important; } .hero-img-mobile-parent::before { content: ""; background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%); position: absolute; height: 100%; width: 100%; z-index: 100; } } /** * ---------------------------------------- * Hero - New * ---------------------------------------- */ /*body {*/ /* background-color: #060212; */ /*}*/ /*article.w-100 { */ /* background-attachment: initial;*/ /* background: linear-gradient(48deg, #070739 0%, #060212 35%);*/ /*}*/ .max-section-stlp-hero-parent { position: relative; background-position: top; } .max-section-stlp-hero-parent::before { background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%); content: ""; height: calc(var(--ratio-16-9) + 1px); position: absolute; width: 100%; z-index: 0; } .max-section-stlp-hero .layout { max-height: 100vh; height: 900px; padding-bottom: 1rem; } .max-section-stlp-hero .column.column-content { padding-bottom: 2rem; order: 3; } .max-section-stlp-hero .column.column-callout { order: 1; } .max-section-stlp-hero .column.column-content h1 { font-size: 2.75rem; } .max-section-stlp-hero .column.column-content h5 { font-weight: bold; } .max-section-stlp-hero .column.column-content h6 { float: left; text-transform: uppercase; margin-right: .5rem; margin-bottom: 0; } .max-section-stlp-hero .column.column-content h6:last-child { margin-right: 0; } .max-section-stlp-hero .column.column-callout.col-md-6 { max-width: 100%; flex: inherit; } .max-section-stlp-hero .column.column-content.col-md-6 p { margin-top: 1rem; } .max-section-stlp-hero .column.column-content.col-md-6 a { width: 70%; margin-top: 0.25rem; margin-bottom: 1rem; } .max-section-stlp-hero .column.column-callout p { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0; } .max-section-stlp-hero .column.column-content img { max-width: 300px; margin-bottom: 1rem; } .max-section-stlp-hero .layout { max-height: none; height: auto; min-height: 90vh; } .max-section-stlp-hero .column.column-content.col-md-6 { max-width: 100%; -webkit-flex: unset; -moz-box-flex: unset; flex: unset; } @media screen and (min-width: 576px){/* SM */} @media screen and (min-width: 768px){ } @media screen and (min-width: 992px){/* LG */} @media screen and (min-width: 1024px){ /* ~LG */ .desktop-text-left .text-center { text-align: left !important; } .max-section-stlp-hero .layout { max-height: 80vh; padding-bottom: 1rem; } .max-section-stlp-hero .column.column-content.col-md-6 { justify-content: start !important; order: -1; flex-direction: row !important; } .max-section-stlp-hero .column.column-content h6 { margin-right: 1rem; } .max-section-stlp-hero .column.column-content.col-md-6 a { width: auto; margin-bottom: 1rem; } .max-section-stlp-hero .column.column-content.col-md-6 a:nth-of-type(2) { margin-left: 1rem; } .max-section-stlp-hero .column.column-callout.col-md-6 { justify-content: flex-end !important; padding-bottom: 2rem; height: auto; max-width: 50%; -webkit-flex: 0 0 50%; -moz-box-flex: 0; flex: 0 0 50%; } .max-section-stlp-hero .column.column-content p { text-align: left !important; } .max-section-stlp-hero .column.column-content h1 { font-size: 3.0rem; text-align: left !important; } .max-section-stlp-hero .column.column-content img { max-width: 370px; } .max-section-stlp-hero .column.column-content.col-md-6 { max-width: 50%; -webkit-flex: 0 0 50%; -moz-box-flex: 0; flex: 0 0 50%; } .max-section-stlp-hero .column.column-callout p { font-size: 1rem; } } @media screen and (min-width: 1025px){ .max-section-stlp-hero-parent::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 19.6%), radial-gradient(97.07% 97.07% at 60.4% -13.07%, rgba(0, 0, 0, 0) 56.64%, #000000 100%); height: 100%; } } @media screen and (min-width: 1200px){/* XL */} @media screen and (min-width: 1400px){/* XXL */} @media (max-width: 1024px) { .max-section-stlp-hero .layout { min-height: auto; margin-top: var(--ratio-16-9); } .max-section-stlp-hero-parent{ background-size: 100%; background-repeat: no-repeat; margin-top: var(--nav-height); } } /* Watch Trailer Button Style */ section:not(:first-child) a.btn--secondary { } section:not(:first-child) a.btn--secondary:hover { } /** * ---------------------------------------- * Episodes * ---------------------------------------- */ .episodes .row .col-md-6:nth-child(3) { padding: 0 !important; } .episodes .row.d-flex .col-md-6:nth-child(2) .dropdown svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (min-width: 359px) and (max-width: 767px) { .episodes .row.d-flex :where(.col-md-6:first-child, .col-md-6:nth-child(2)) { width: 50%; } .episodes .row.d-flex .col-md-6:nth-child(2) { display: flex; justify-content: flex-end; padding-top: 1.5rem; padding-bottom: 1rem; } } /** * ---------------------------------------- * More Details * ---------------------------------------- */ .details-parent h4, .details-parent h3 { font-size: 1.0625rem; } .details .genres p { text-transform: capitalize; } /** * ---------------------------------------- * Sign Up Ribbon * ---------------------------------------- */ .max-section-all-here-ribbon-parent { backdrop-filter: blur(12px); background: var(--slate-lens-glare); } /** * ---------------------------------------- * No Hero Image * ---------------------------------------- */ @media (max-width: 1024px) { .stlp-no-hero-image .layout { margin-top: 3rem !important; } .stlp-no-hero-image-parent { background-size: cover !important; } .stlp-no-hero-image-parent::before { background: linear-gradient(0deg, rgb(6 2 18) 0%, rgba(0, 0, 0, 0) 20%); bottom: 0; } } /** * ---------------------------------------- * Hide Lang * ---------------------------------------- */ .max-hide-es-parent:lang(es) { display: none !important; } .max-hide-en-parent:lang(en) { display: none !important; } ]]> <![CDATA[ /** * ---------------------------------------- * GLOBAL * ---------------------------------------- */ :root { --black: #000000; --white: #fafafa; --dark-green: #3f701d; --med-green: #759b0b; --light-green: #c4d497; --gray: #d6d6d6; --dark-blue: #033945; --med-blue: #06c9d1; --light-blue: #90f9fd; --section-headline-font-family: 'MinecraftTenv2'; --section-headline-font-style: 'Normal'; --section-headline-font-weight: '400'; --section-headline-font-size: 2.5rem; --subheads-font-family: 'MinecraftFivev2'; --subheads-font-style: 'Normal'; --subheads-font-weight: '400'; --subheads-font-size: 1rem; --headline-background: linear-gradient(180deg, #f2e2d7 0%, #a1958b 100%); --body-font-size: 1.125rem; --body-line-height: 1.875rem; --text-spacing: 1.2px; --cta-font-family: 'Minecraft'; --cta-font-style: 'Normal'; --cta-font-weight: '700'; --cta-font-size: 1rem; } article { background: var(--black) !important; } nav { background-color: transparent !important; } nav.scroll-nav { background-color: rgba(0, 0, 0, .7) !important; } body { background: var(--black) !important; } .minecraft h1, .minecraft h5, .minecraft h6 { font-weight: var(--subheads-font-weight); } .minecraft h2, .minecraft h5, .minecraft h6, .minecraft a.btn { letter-spacing: var(--text-spacing); text-transform: uppercase; } .minecraft h1, .minecraft p { color: var(--white); line-height: var(--body-line-height); font-size: var(--body-font-size); } .minecraft h2 { font-family: var(--section-headline-font-family); font-style: var(--section-headline-font-style); font-size: var(--section-headline-font-size); font-weight: var(--section-headline-font-weight); position: relative; color: #606060; overflow: hidden; max-width: fit-content; line-height: 4rem; padding-top: 0.75rem; margin-top: 0; margin-bottom: 0; } .minecraft h2::before { background: linear-gradient(180deg, #f2e2d7 30%, #a1958b 60%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; bottom: 4px; left: 0; } .minecraft.color-bg h2 { margin-bottom: .5rem !important; } .minecraft.color-bg h2::before { background: linear-gradient(180deg, #fff3eb 20%, #cec5be 60%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .minecraft h2::after { -webkit-text-stroke: 1px rgba(188, 176, 166, .4); color: transparent; position: absolute; bottom: 4px; left: 0; filter: blur(3px); } .minecraft.color-bg h2::after { -webkit-text-stroke: 1px rgba(176, 165, 156, .8); filter: none; } .minecraft.max-section-synopsis h2::before, .minecraft.max-section-synopsis h2::after { content: 'SYNOPSIS'; } .minecraft.max-section-character-carousel h2::before, .minecraft.max-section-character-carousel h2::after { content: 'CAST'; } .minecraft.max-gallery h2::before, .minecraft.max-gallery h2::after { content: 'GALLERY'; } .minecraft.max-section-extras h2::before, .minecraft.max-section-extras h2::after { content: 'Trailer'; } .minecraft.max-section-credits h2::before, .minecraft.max-section-credits h2::after { content: 'A MINECRAFT MOVIE'; } .minecraft h5 { font-size: var(--subheads-font-size); } .minecraft h5, .minecraft h6 { color: var(--light-green); font-family: var(--subheads-font-family); font-style: var(--subheads-font-style); font-weight: var(--subheads-font-weight); font-size: var(--subheads-font-size); line-height: 1.5; } .minecraft a.btn { font-family: var(--cta-font-family); font-style: var(--cta-font-style); font-weight: var(--cta-font-weight); transition: all .5s ease; -webkit-transition: all .5s ease; font-size: var(--cta-font-size); padding: 1rem 1.1rem; text-decoration: none; border-top: 1px solid var(--light-green); border-bottom: 4px solid var(--med-green); letter-spacing: 1.5px; } .minecraft a.btn--primary { background-color: var(--dark-green); color: var(--white); border-radius: 0; } .minecraft a.btn--primary:hover, .minecraft a.btn--primary:focus { background-color: var(--light-green); color: var(--black); } .minecraft a.btn--secondary { background-color: var(--light-green); color: var(--black); border-radius: 0; outline: none; } .minecraft a.btn--secondary:hover, .minecraft a.btn--secondary:focus { background-color: var(--dark-green); color: var(--white); } @media (max-width: 767px) { .minecraft h2 { margin: 0 auto; } } @media (max-width: 575px) { .max-section-credits-heading h2 { width: 90%; line-height: 3rem; } .max-section-credits-heading h2::before { background: linear-gradient(180deg, #f2e2d7 9%, #a1958b 40%, #f2e2d7 60%, #a1958b 80%); background-clip: text; -webkit-background-clip: text; } } /** * ---------------------------------------- * FOOTER * ---------------------------------------- */ .max-section-footer { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 2rem !important; padding-bottom: 3rem !important; } /**********************/ /* SCROLL IN VIEW ANIMATION */ /**********************/ .element-scroll { opacity: 0; -webkit-opacity: 0; transition: opacity 500ms; -webkit-transition: opacity 500ms; } .element-scroll.scrolled { opacity: 1; -webkit-opacity: 1; } .scrolled.slide-up { animation: slideUp .5s ease 1 normal both; -webkit-animation: slideUp .5s ease 1 normal both; } .scrolled.slide-up02 { animation: slideUp .5s ease .2s 1 normal both; -webkit-animation: slideUp .5s ease .2s 1 normal both; } .scrolled.slide-up-big { animation: slideUpBig 1s ease .1s 1 normal both; -webkit-animation: slideUpBig 1s ease .1s 1 normal both; } .scrolled.slide-up-big02 { animation: slideUpBig 1s ease .3s 1 normal both; -webkit-animation: slideUpBig 1s ease .3s 1 normal both; } /*.scrolled.slide-left {*/ /* animation: slideLeft 1.3s ease .2s 1 normal both;*/ /* -webkit-animation: slideLeft 1.3s ease .2s 1 normal both;*/ /*}*/ /*.scrolled.slide-right {*/ /* animation: slideRight 1.3s ease .2s 1 normal both;*/ /* -webkit-animation: slideRight 1.3s ease .2s 1 normal both;*/ /*}*/ .scrolled.slide-down-left { animation: slideDownLeft 1.3s ease .2s 1 normal both; -webkit-animation: slideDownLeft 1.3s ease .2s 1 normal both; } .scrolled.slide-up-short { animation: slideUpShort .4s ease 1 normal both; -webkit-animation: slideUpShort .4s ease 1 normal both; } .scrolled.slide-up-short02 { animation: slideUpShort .4s ease .15s 1 normal both; -webkit-animation: slideUpShort .4s ease .15s 1 normal both; } .scrolled.slide-up-short03 { animation: slideUpShort .4s ease .3s 1 normal both; -webkit-animation: slideUpShort .4s ease .3s 1 normal both; } @media (max-width: 767px) { .scrolled.slide-up-phone { animation: slideUp .5s ease 1 normal both; -webkit-animation: slideUp .5s ease 1 normal both; } .scrolled.slide-up-phone02 { animation: slideUp .5s ease .2s 1 normal both; -webkit-animation: slideUp .5s ease .2s 1 normal both; } .scrolled.slide-up-phone03 { animation: slideUp .5s ease .4s 1 normal both; -webkit-animation: slideUp .5s ease .4s 1 normal both; } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(50px); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideUp { 0% { -webkit-opacity: 0; -webkit-transform: translateY(50px); } 70% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateY(0); } } @keyframes slideUpBig { 0% { opacity: 0; transform: translateY(70px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideUpBig { 0% { -webkit-opacity: 0; -webkit-transform: translateY(70px); } 30% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateY(0); } } @keyframes slideLeft { 0% { opacity: 0; transform: translateX(100px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes slideLeft { 0% { -webkit-opacity: 0; -webkit-transform: translateX(100px); } 30% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateX(0); } } @keyframes slideRight { 0% { opacity: 0; transform: translateX(-100px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes slideRight { 0% { -webkit-opacity: 0; -webkit-transform: translateX(-100px); } 30% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateX(0); } } @keyframes slideDownLeft { 0% { opacity: 0; transform: translate(100px, -50px); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes slideDownLeft { 0% { -webkit-opacity: 0; -webkit-transform: translateX(100px, 50px); } 30% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateX(0); } } @keyframes slideUpShort { 0% { opacity: 0; transform: translateY(25px); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideUpShort { 0% { -webkit-opacity: 0; -webkit-transform: translateY(25px); } 70% { -webkit-opacity: 1; } 100% { -webkit-opacity: 1; -webkit-transform: translateY(0); } } ]]> [ad_2] Source link
