html {
font-size: 144px;
}
:root {
--endcrawl-landing-text-font-family: 'ITC Franklin Gothic LT';
--endcrawl-landing-condensed-font-family: 'ITC Franklin Gothic LT Condensed';
--endcrawl-landing-text-font-weight: 400;
--endcrawl-landing-text-font-size: 0.111rem;
--endcrawl-landing-text-font-letter-spacing: 0;
--endcrawl-landing-text-font-line-height: 1.4;
--grid-size: 24px;
--nav-height: calc(var(--grid-size) * 3);
--content-min-width: 900px;
--content-max-width: 1440px;
--posters-height: 125vh;
--poster-peek-height: 10vh;
--intro-height: calc(100vh - var(--poster-peek-height));
--intro-min-height: 722px;
--intro-max-height: 4320px; /* intentionally too tall to be encountered in practice */
--finish-your-movie-line-height: 0.917;
--finish-your-movie-opacity: 0.7;
--signup-form-width: 720px;
--signup-form-height: calc(100% - (var(--nav-height) * 2));
--upload-area-height: calc(3 * var(--grid-size));
--field-background-color: 34, 41, 52;
--subscribe-button-color: 255, 195, 0;
--quotes-fully-dim: 0.85;
--quotes-max-count: 10;
--quotes-pip-font-size: 150%;
--quotes-pip-size: 1em;
--quotes-pip-max-size: 1.4em;
--quotes-pip-spacing: 1em;
--quotes-pip-color-inactive: var(--endcrawl-gold);
--quotes-pip-color-active: var(--endcrawl-gold);
--quotes-pip-opacity-inactive: 0.8;
--quotes-pip-opacity-active: 1;
--quotes-animation-duration: 0.3s;
--question-color-active: 255, 187, 3, 0.9;
--question-height: calc(3 * var(--grid-size));
--question-y-offset: calc(11 * var(--grid-size));
--benefit-height: calc(55 / 4 * var(--grid-size));
--benefit-roller-width: calc(58 / 3 * var(--grid-size));
--pricing-min-height: 1536px;
--pricing-max-height: 2000px;
}
* {
box-sizing: border-box;
}
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
body {
font-family: var(--endcrawl-landing-text-font-family);
font-weight: var(--endcrawl-landing-text-font-weight);
font-size: var(--endcrawl-landing-text-font-size);
letter-spacing: var(--endcrawl-landing-text-font-letter-spacing);
line-height: var(--endcrawl-landing-text-font-line-height);
color: white;
background: var(--endcrawl-slate-black);
}
h1, h2, h3, h4, h5 {
font-family: var(--endcrawl-display-font-family);
font-weight: 500;
}
h1 { font-size: 1.000rem; }
h2 { font-size: 0.667rem; }
h3 { font-size: 0.250rem; }
h4 { font-size: 0.125rem; }
h1, h2 {
text-transform: uppercase;
}
h3 {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.021em;
line-height: 3;
}
h4 {
color: inherit;
font-family: var(--endcrawl-landing-text-font-family);
font-weight: 600;
}
b {
font-weight: 600;
}
a, a:link, a:active, a:hover, a:visited {
text-decoration: none;
color: inherit;
}
/* global input field styling */
input,
select,
label,
button, .button {
height: calc(2 * var(--grid-size));
box-shadow: none;
}
button, .button {
margin: 0;
padding: 0;
border: none;
font-family: var(--endcrawl-display-font-family);
font-size: 0.139rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: uppercase;
cursor: pointer;
}
input {
margin: 0;
padding: 0;
border: none;
padding: 0 calc(2.0 / 3 * var(--grid-size));
font-family: var(--endcrawl-landing-text-font-family);
color: rgba(255, 255, 255, 0.8);
-webkit-appearance: none;
-webkit-border-radius: 0px;
height: 48px;
font-size: 0.111rem;
font-weight: 500;
}
input,
select,
label,
button {
background: rgba(var(--field-background-color), 0.8);
}
select,
button,
label {
color: rgba(var(--endcrawl-light-grey), 0.25);
}
select:hover,
select:focus,
button:hover,
label:hover {
color: rgba(var(--endcrawl-light-grey), 1);
}
input::placeholder,
select::placeholder {
color: rgba(var(--endcrawl-light-grey),0.25)
}
input:hover::-webkit-input-placeholder {
color: rgba(var(--endcrawl-light-grey), 1);
}
input:hover::-moz-placeholder {
color: rgba(var(--endcrawl-light-grey), 1);
}
input:hover:-ms-input-placeholder {
color: rgba(var(--endcrawl-light-grey), 1);
}
input:hover:-moz-placeholder {
color: rgba(var(--endcrawl-light-grey), 1);
}
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input:-moz-placeholder {
color: rgba(var(--endcrawl-light-grey), 0.8);
}
input:focus::-webkit-input-placeholder {
color: rgba(var(--endcrawl-light-grey), 0.4);
}
input:focus::-moz-placeholder {
color: rgba(var(--endcrawl-light-grey), 0.4);
}
input:focus:-ms-input-placeholder {
color: rgba(var(--endcrawl-light-grey), 0.4);
}
input:focus:-moz-placeholder {
color: rgba(var(--endcrawl-light-grey), 0.4);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: rgba(var(--endcrawl-light-grey), 1);
caret-color: rgba(var(--endcrawl-light-grey), 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(var(--field-background-color), 0.9);
}
input:-webkit-autofill::first-line {
font-family: var(--endcrawl-landing-text-font-family);
font-size: 0.111rem;
font-weight: 500;
}
::-ms-clear {
display: none;
}
input:disabled,
select:disabled,
input:read-only {
opacity: 0.7;
cursor: not-allowed;
}
input,
select,
label,
button, .button {
transition: opacity calc(1s/12) ease-in-out;
}
/* hide native number spin buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
select {
appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
border: none;
/* svg export of hs-caret-down : https://fortawesome.com/kits/753fd89a/icons/1209121 */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 1.3em top 50%;
background-size: 1.25em auto;
}
select:hover,
select:disabled {
color: rgba(var(--endcrawl-light-grey), 0.8);
background-image: url('data:image/svg+xml;utf8,');
}
select:focus {
color: rgba(var(--endcrawl-light-grey), 1.0);
background-image: url('data:image/svg+xml;utf8,');
}
/* general page section structure */
main {
margin-top: calc(-1 * var(--nav-height));
scroll-behavior: smooth;
}
main > *:not(.full-bleed),
#nav {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: stretch;
justify-content: start;
position: relative;
z-index: 1;
}
main > *:not(.full-bleed) > *,
#nav > * {
flex: 1 1 var(--content-max-width);
min-width: var(--content-min-width);
max-width: var(--content-max-width);
}
main > *:not(.full-bleed)::before,
main > *:not(.full-bleed)::after,
#nav::before,
#nav::after {
content: ' ';
display: block;
flex: 1 1 1px;
}
#nav::before,
#nav::after {
height: 100%;
}
main > *:not(.full-bleed):not(#nav):not(#get-started):not(#footer) > *,
main > *:not(.full-bleed):not(#nav):not(#get-started):not(#footer)::before,
main > *:not(.full-bleed):not(#nav):not(#get-started):not(#footer)::after {
background: var(--endcrawl-slate-black);
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
#nav {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
justify-content: start;
position: sticky;
top: 0;
width: 100%;
height: var(--nav-height);
z-index: 3;
background-color: transparent;
}
#nav .content {
height: 100%;
}
#nav .content,
#nav::before,
#nav::after {
background-color: rgba(0, 0, 0, 0.88);
}
#nav .logo {
display: flex;
flex: 0 0 auto;
height: 100%;
}
#nav .logomark {
position: relative;
flex: 0 0 calc(2 * var(--grid-size));
width: calc(2 * var(--grid-size));
height: 100%;
z-index: 4;
background-image: url(../img/endcrawl-app-logomark-2020@2x.png);
background-size: calc(var(--nav-height) / 2.5);
background-repeat: no-repeat;
background-position: top 50% right calc(var(--nav-height) / 8);
}
#nav .wordmark {
flex: 0 0 118px;
position: relative;
height: 100%;
z-index: 4;
background-image: url(../img/endcrawl-app-wordmark-2020@2x.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0;
}
#nav .spacer {
flex: 1 1 50%;
}
#nav button,
#nav .button {
height: 100%;
line-height: var(--nav-height);
text-align: center;
color: rgba(255,255,255,0.8);
background-color: transparent;
}
#nav button:hover,
#nav .button:hover {
color: hsla(185.7, 80%, 96%, 1);
background-color: hsla(197, 100%, 75%, 0.18);
}
#nav .signup,
#nav .benefits,
#nav .pricing,
#nav .login {
flex: 0 0 auto;
padding-left: 1.5em;
padding-right: 1.5em;
}
#nav .button.login i {
margin-left: 0.15em;
margin-right: -0.3em;
font-size: 0.138rem;
color: hsla(185.7, 80%, 96%, 0.5);
}
#nav .button.benefits {
letter-spacing: 0.03em;
}
#nav .button.pricing {
letter-spacing: 0.04em;
}
#nav .button.signup {
letter-spacing: 0.02em;
}
#nav .button.login {
letter-spacing: 0.02em;
}
#get-started {
height: var(--intro-height);
min-height: var(--intro-min-height);
max-height: var(--intro-max-height);
}
#get-started::before,
#get-started::after {
background: black;
}
#get-started .content {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
justify-content: start;
width: 100%;
height: 100%;
background-image: url(../img/crowd_blue.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
#get-started .cta {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: start;
flex: 1 0 640px;
min-width: 640px;
max-width: 50%;
margin-right: auto;
height: 100%;
padding: calc(2 * var(--grid-size));
padding-top: var(--nav-height);
background: black;
}
#get-started .cta h1 {
flex: 1 0 50%;
text-align: right;
line-height: var(--finish-your-movie-line-height);
}
#get-started .cta h1 > * {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
#get-started .cta h1 em {
font-weight: 600;
color: rgba(var(--endcrawl-magenta), var(--finish-your-movie-opacity));
-webkit-text-fill-color: rgba(var(--endcrawl-magenta), var(--finish-your-movie-opacity));
-webkit-background-clip: text;
background-clip: text;
background-image: url(../img/crowd_blue.jpg);
background-size: auto var(--intro-height);
background-repeat: repeat-y;
}
#get-started .cta h1 > *:nth-child(1) em { background-position: top 0 right 0; }
#get-started .cta h1 > *:nth-child(2) em { background-position: top calc(-1rem * var(--finish-your-movie-line-height)) right 0; }
#get-started .cta h1 > *:nth-child(3) em { background-position: top calc(-2rem * var(--finish-your-movie-line-height)) right 0; }
#get-started .cta h1 .fa {
padding-bottom: 0.42em;
margin-top: -0.42em;
padding-left: calc(1.5 * var(--grid-size));
font-size: calc(1.6 * var(--grid-size));
line-height: 1;
color: rgba(var(--endcrawl-light-grey), 0.8);
}
#get-started .cta h1 .fa-hs-align-gutter {
font-size: calc(1.6 * var(--grid-size));
line-height: 1;
opacity: 0.3;
}
#get-started .cta h1 .fa-hs-balanced-on {
opacity: 0.5;
}
#get-started .cta h1 .fa-hs-splice-here {
margin-left: calc(-0.45 * var(--grid-size));
font-size: calc(2.5 * var(--grid-size));
line-height: 0.95;
background: transparent;
cursor: pointer;
opacity: 0.7;
}
#get-started .cta p {
flex: 0 0 100%;
text-align: left;
color: rgba(var(--endcrawl-light-grey), 1);
padding-right: 13em;
line-height: 1.4;
font-weight: 400;
font-size: 0.1458333rem;
letter-spacing: 0.01em;
}
#get-started .cta .subscribe {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: start;
position: relative;
flex: 0 0 100%;
height: calc(2.25 * var(--grid-size));
}
#get-started .cta .subscribe [name="email"] {
flex: 1 1 0;
width: 50%;
height: 100%;
}
#get-started .cta .subscribe [name="subscribe"] {
flex: 0 0 calc(8 * var(--grid-size));
height: 100%;
font-family: var(--endcrawl-landing-text-font-family);
font-size: 0.111rem;
font-weight: 500;
color: rgba(var(--subscribe-button-color), 0.8);
background: rgba(var(--field-background-color), 0.8);
opacity: 1;
transition: color 0.25s ease-out;
}
#get-started .cta .subscribe [name="email"]:invalid ~ [name="subscribe"] {
opacity: 1;
pointer-events: none;
color: rgba(255,255,255, 0.4);
background: rgba(var(--field-background-color), 0.8);
}
#get-started .cta .subscribe [name="email"]:invalid ~ [name="subscribe"] i.fa.fa-hs-guillemet-right {
opacity: 0;
}
#get-started .cta .subscribe [name="subscribe"]:hover,
#get-started .cta .subscribe [name="subscribe"]:focus {
opacity: 1.0;
color: rgba(var(--endcrawl-gold), 0.99);
background-color: hsla(27, 35%, 45%, 0.5);
}
#get-started .subscribe button[name="subscribe"] i.fa.fa-hs-guillemet-right {
margin-right: 0.1em;
transition: margin-right 0.25s ease-out;
}
#get-started .subscribe [name="email"]:invalid ~ button[name="subscribe"] i.fa.fa-hs-guillemet-right {
margin-right: 2em;
transition: margin-right 0.25s ease-out;
}
#get-started #subscribe-form .thank-you {
padding-left: 0;
}
/* post-submit states */
#subscribe-form .thank-you {
display: none;
padding-left: 0;
}
#subscribe-form.success .subscribe > *:not(.thank-you) {
display: none;
}
#subscribe-form.success .thank-you {
display: inline-block;
}
#subscribe-form.success .thank-you a,
#subscribe-form.success .thank-you a:link,
#subscribe-form.success .thank-you a:hover,
#subscribe-form.success .thank-you a:visited {
white-space: nowrap;
color: rgb(var(--endcrawl-gold));
opacity: 0.8;
}
#subscribe-form.success .thank-you a:hover {
opacity: 1;
}
#signup {
position: fixed;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
justify-content: start;
top: 0;
left: 0;
width: 100%;
height: 100vh;
min-height: 1024px;
box-sizing: content-box;
border-top: 100vh solid rgba(0, 0, 0, 0);
z-index: 4;
opacity: 0;
transition:
border-top-width 0.25s ease-in-out,
opacity 1s ease-in-out;
pointer-events: none;
}
#signup::before,
#signup::after {
content: ' ';
display: block;
flex: 1 1 1px;
height: 100%;
background: transparent;
}
#signup:target {
border-top-width: 0;
opacity: 1;
transition:
border-top-width 0.5s ease-in-out,
opacity 0.5s ease-in-out;
pointer-events: auto;
}
#signup .content {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex: 0 0 100%;
min-width: var(--content-min-width);
padding: 0;
background-color: rgba(0, 0, 0, 0.95);
}
#signup form,
#signup .thank-you {
display: flex;
position: relative;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
align-content: start;
justify-content: flex-start;
flex: 0 0 var(--signup-form-width);
height: var(--signup-form-height);
overflow-x: hidden;
overflow-y: scroll;
scroll-behavior: smooth;
}
#signup form {
padding-bottom: calc(12 * var(--grid-size));
}
#signup form::-webkit-scrollbar {
width: 0;
background: transparent;
}
#signup form > * {
flex: 0 0 100%;
order: -1;
}
#signup form > p {
order: 1;
line-height: 1.5em;
margin-top: 0.25em;
margin-bottom: 1.5em;
}
#signup form > label.door {
order: 0;
}
#signup form > .door0 {
order: 1;
}
#signup form > .door1 {
order: 2;
}
#signup form > [name="is_demo"] {
order: 3;
}
#signup h2 {
line-height: 1;
font-size: 0.4444rem;
padding: 0;
margin: 0.75em 0 0.25em 0;
text-transform: none;
}
#signup h2:nth-of-type(1) {
margin-top: 0;
}
#signup .thank-you h2 {
margin: 0 0 0.5em 0;
}
#signup h2 p {
font-family: var(--endcrawl-landing-text-font-family);
font-size: 0.111rem;
font-weight: 400;
padding: 1em 8em 0.25em 0.125em;
line-height: 1.4;
}
#signup input,
#signup select,
#signup label,
#signup button,
#signup h3 {
height: calc(2.25 * var(--grid-size));
margin: calc(1/4 * var(--grid-size)) 0;
}
#signup input,
#signup select,
#signup label,
#signup button {
padding: calc(1/4 * var(--grid-size)) var(--grid-size);
border: none;
line-height: calc(2 * var(--grid-size));
font-family: var(--endcrawl-landing-text-font-family);
font-size: 0.111rem;
font-weight: 500;
text-transform: none;
}
#signup select,
#signup select:invalid:hover {
color: rgba(var(--endcrawl-light-grey), 1);
}
#signup select:invalid {
color: rgba(var(--endcrawl-light-grey), 0.25);
}
#signup button,
#signup select {
padding: 0 var(--grid-size);
}
#signup h3 {
padding: calc(1/2 * var(--grid-size)) var(--grid-size);
border: none;
line-height: calc(2 * var(--grid-size));
font-family: var(--endcrawl-landing-text-font-family);
font-size: 0.111rem;
font-weight: 500;
text-transform: none;
}
/* fields that are half width */
#signup form > [name="first_name"],
#signup form > [name="last_name"],
#signup form > label.door,
#signup form > [name="film_kind"][data-chosen$="-series"],
#signup form > [name="film_kind"][data-chosen$="-series"] ~ [name="episode_count"] {
flex: 0 0 calc(50% - 1/4 * var(--grid-size));
}
#signup [name="first_name"],
#signup form > label.door:nth-of-type(1),
#signup form > [name="film_kind"][data-chosen$="-series"] {
margin-right: calc(1/4 * var(--grid-size));
}
#signup [name="last_name"],
#signup form > label.door:nth-of-type(2),
#signup form > [name="film_kind"][data-chosen$="-series"] ~ [name="episode_count"] {
margin-left: calc(1/4 * var(--grid-size));
}
/* this field only displayed if episodic */
#signup form > [name="episode_count"] {
display: none;
}
#signup form > [name="film_kind"][data-chosen$="-series"] ~ [name="episode_count"] {
display: inline-block;
}
/* used to detect non-persons */
#signup [name="nonperson_url"] {
display: none;
}
/* native radio buttons are hidden in favor of associated labels */
#signup [name="is_demo"][type="radio"] {
flex: 0 0 1px;
display: inline-block;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
margin-top: calc(2 * var(--grid-size));
}
#signup label.door {
cursor: pointer;
}
/* hide doors until top fields are filled */
#signup form > [name="is_demo"] ~ .doorstop,
#signup form > [name="is_demo"]:nth-of-type(1) ~ label.door:nth-of-type(1),
#signup form > [name="is_demo"]:nth-of-type(2) ~ label.door:nth-of-type(2) {
opacity: 1;
transition: opacity 0.33s ease-out;
}
#signup form > [name="is_demo"] ~ *:invalid ~ .doorstop,
#signup form > [name="is_demo"]:nth-of-type(1) ~ *:invalid ~ label.door:nth-of-type(1),
#signup form > [name="is_demo"]:nth-of-type(2) ~ *:invalid ~ label.door:nth-of-type(2) {
opacity: 0;
transition: opacity 0.33s ease-out;
pointer-events: none;
}
/* door ui states */
#signup label.door {
color: rgba(255,255,255,0.6);
background-color: rgba(var(--field-background-color), 0.6);
height: calc(4.5 * var(--grid-size));
}
#signup label.door:hover {
color: rgba(255,255,255,0.8);
background-color: rgba(var(--field-background-color), 0.8);
}
#signup [name="is_demo"]:nth-of-type(1):checked ~ label.door:nth-of-type(1),
#signup [name="is_demo"]:nth-of-type(2):checked ~ label.door:nth-of-type(2) {
color: rgba(255,255,255,1);
background-color: rgba(var(--field-background-color), 1);
opacity: 1;
}
#signup [name="is_demo"]:checked ~ label.door {
color: rgba(255,255,255,0.35);
background-color: rgba(var(--field-background-color), 0.4);
}
#signup [name="is_demo"]:checked ~ label.door:hover {
opacity: 1;
}
/* hide door fields when other door is open, or doors themselves are still hidden */
#signup [name="is_demo"][value="0"]:not(:checked) ~ .door0,
#signup [name="is_demo"][value="1"]:not(:checked) ~ .door1,
#signup form > *:invalid ~ .doorstop ~ .door0,
#signup form > *:invalid ~ .doorstop ~ .door1,
#signup form > [name="is_demo"][value="0"]:checked ~ *:invalid ~ .doorstop ~ .upload.door0 {
opacity: 0;
pointer-events: none;
}
#signup [name="is_demo"][value="0"]:checked ~ .door1,
#signup [name="is_demo"][value="1"]:checked ~ .door0 {
display: none;
}
/* keep post-door content scrolled down below, and centered when it appears */
#signup h2.door0,
#signup h2.door1 {
height: calc(var(--grid-size) * 4);
margin: calc(var(--grid-size) * 2) 0;
}
#signup label.door {
margin-bottom: 0;
}
#signup form > *:invalid ~ label.door {
margin-bottom: 0;
}
#signup [type="submit"].door0 {
margin-top: calc(1/4 * var(--grid-size));
}
#signup [type="submit"].door1 {
margin-top: calc(1/4 * var(--grid-size) + var(--upload-area-height) + 2 * 1/4 * var(--grid-size));
}
/* show up caret to scroll back to pre-door fields */
#signup h2.door0,
#signup h2.door1 {
position: relative;
}
#signup label.caret {
display: block;
position: relative;
top: calc(-0.75 * var(--grid-size));
left: 0;
width: 100%;
height: calc(2 * var(--grid-size));
max-height: 0;
overflow: hidden;
border: 0;
padding: 0;
margin: 0;
font-size: calc(2.25 * var(--grid-size));
line-height: 1;
text-align: center;
background-color: transparent;
color: rgb(var(--endcrawl-light-grey));
transition: max-height 0.33s ease-out;
cursor: pointer;
}
#signup form > [name="is_demo"]:checked ~ .doorstop label.caret {
max-height: none;
}
#signup label.caret .fa {
opacity: 0.3;
}
#signup label.caret .fa:hover {
opacity: 0.8;
}
/* personal demo projects have asterisk text */
#signup i.asterisk {
position: absolute;
bottom: 12.5%;
left: 0;
padding-left: var(--grid-size);
display: inline-block;
width: 100%;
font-size: 25%;
text-transform: none;
line-height: 1;
}
/* the file upload area */
#signup [name="is_demo"][value="0"]:checked ~ .upload.door0 {
display: flex;
}
#signup .upload {
flex-wrap: wrap;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: center;
height: var(--upload-area-height);
border: none;
color: inherit;
background: transparent;
opacity: 0.8;
transition: opacity 0.25s ease-in-out;
cursor: pointer;
}
#signup .upload:not(.uploaded):hover {
border: 4px dashed rgba(255, 255, 255, 0.25);
opacity: 1.0;
}
#signup .upload > * {
flex: 0 0 100%;
text-align: center;
line-height: 1.8em;
}
#signup .upload * {
pointer-events: none; /* prevent dnd events bubbling up from children */
}
#signup input[type="file"] {
position: absolute;
left: -9999em;
height: 0;
}
/* the upload dragging over state */
#signup .upload:not(.dragging) .dragging {
display: none;
}
#signup .upload.dragging > *:not(.dragging) {
display: none;
}
#signup .upload.dragging {
border: 4px dashed rgba(var(--endcrawl-gold), 0.5);
opacity: 1.0;
}
/* the upload in progress state */
#signup .upload:not(.uploading) .uploading {
display: none;
}
#signup .upload.uploading > *:not(.uploading) {
display: none;
}
/* the upload succeeded, rough credits attached state */
#signup .upload:not(.uploaded) .uploaded {
display: none;
}
#signup .upload.uploaded > *:not(.uploaded) {
display: none;
}
#signup .upload.uploaded > .uploaded {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-items: center;
}
#signup .upload .filename {
padding: 0 0.5em;
}
#signup .upload .uploaded .attached,
#signup .upload .uploaded .detach {
color: rgba(var(--endcrawl-gold), 0.7);
}
#signup .upload .uploaded .detach {
font-size: 120%;
}
#signup .upload.uploaded {
pointer-events: none;
}
#signup .upload.uploaded .uploaded .detach {
pointer-events: auto;
}
#signup .upload.uploaded .uploaded .detach:hover {
color: rgba(var(--endcrawl-gold), 1.0);
}
/* the upload error state */
#signup .upload:not(.error) .error {
display: none;
}
#signup .upload.error > *:not(.error) {
display: none;
}
/* disable submit buttons until fields are valid */
#signup [type="submit"] {
height: calc(3.5 * var(--grid-size));
margin-top: 2em;
}
#signup [type="submit"].door0,
#signup [type="submit"].door1 {
opacity: 1;
cursor: pointer;
pointer-events: all;
color: rgba(var(--endcrawl-gold), 0.7);
background-color: hsla(32, 32%, 50%, 0.30);
transition: color 0.25s ease-out, background-color 0.25s ease-out;
}
#signup [type="submit"].door0:hover,
#signup [type="submit"].door1:hover {
color: rgba(var(--endcrawl-gold), 0.9);
background-color: hsla(32, 35%, 45%, 0.45);
}
#signup [name="is_demo"][value="0"]:checked ~ .door0:invalid ~ [type="submit"].door0,
#signup [name="is_demo"][value="1"]:checked ~ .door1:invalid ~ [type="submit"].door1 {
color: rgba(var(--endcrawl-gold), 0.33);
background-color: rgba(var(--field-background-color), 0.6);
cursor: not-allowed;
pointer-events: none;
}
/* the form x button */
#signup .content {
position: relative;
}
#signup .close {
position: absolute;
display: block;
top: var(--grid-size);
right: calc((100vw - var(--signup-form-width)) / 2);
width: auto;
height: calc(2 * var(--grid-size));
font-size: 0.1666rem;
line-height: 1;
color: var(--endcrawl-light-grey);
color: rgba(var(--endcrawl-dark-grey), 0.8);
transition: color 0.2s ease-out;
opacity: 1;
}
#signup a.close {
display: flex;
align-items: center;
font-size: 0.18rem;
}
#signup a.close .close-text {
font-family: var(--endcrawl-display-font-family);
font-size: 0.115rem;
margin-right: 0.33em;
}
#signup .close:hover {
opacity: 1;
color: rgba(255,0,220, 0.9);
transition: color 0.2s ease-out;
}
/* some miscellaneous signup form animations */
#signup .doorstop,
#signup .caret .fa,
#signup .close {
transition: opacity calc(1s/12) ease-in-out;
}
/* post-submit states */
#signup .thank-you {
display: none;
}
#signup.success form {
display: none;
}
#signup.success .thank-you {
display: flex;
overflow: hidden;
}
#signup.success .thank-you > * {
display: inline-block;
width: 100%;
text-align: center;
}
#signup.success .thank-you p {
margin: 0 calc((100% - 400px) / 2) 1.5em calc((100% - 400px) / 2);
padding: 0 0 1em 0;
text-align: left;
}
#signup .thank-you ul {
padding-left: 2em;
}
#signup .thank-you ul li {
list-style: outside;
padding-left: 0;
text-align: left;
margin: 0 calc((100% - 400px) / 2) 1em calc((100% - 400px) / 2) ;
}
#signup .thank-you ul li:last-of-type {
margin-bottom: 2em;
}
#quotes {
position: absolute;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
justify-content: center;
top: 100vh;
left: 0;
height: 100vh;
width: 100%;
z-index: 2;
transition: opacity 0.05s linear;
}
#quotes::before {
content: ' ';
display: block;
position: absolute;
top: -100%;
bottom: -100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, var(--quotes-fully-dim));
--t: calc(var(--intersection-ratio) - 1);
opacity: calc(1 - var(--t) * var(--t));
transition: opacity 0.05s linear;
z-index: -1;
pointer-events: none;
}
/* quotes carousel (non-scrolling) */
#quotes .content,
#quotes::after {
background: transparent;
}
#quotes .content {
display: block;
position: relative;
height: 100%;
width: 100vw;
max-width: var(--content-max-width);
overflow: hidden;
opacity: var(--intersection-ratio);
}
#quotes .content > *:not(.pips) {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 100%;
width: 100%;
height: 100%;
padding: calc(2 * var(--grid-size));
}
#quotes .quote {
text-align: center;
padding: 0;
}
/* cross dissolve quotes when transitioning */
#quotes .quote .text,
#quotes .quote .credit,
#quotes .quote:target ~ .quote:nth-child(5) .text,
#quotes .quote:target ~ .quote:nth-child(5) .credit {
opacity: 0;
transition: opacity var(--quotes-animation-duration) ease-in-out;
animation-name: quote-blur;
animation-iteration-count: 1;
animation-duration: var(--quotes-animation-duration);
animation-delay: 0;
}
#quotes .quote:target .text,
#quotes .quote:target .credit,
#quotes .quote:nth-child(5) .text,
#quotes .quote:nth-child(5) .credit {
opacity: 1;
transition: opacity var(--quotes-animation-duration) ease-in-out var(--quotes-animation-duration);
animation-name: quote-unblur;
animation-iteration-count: 1;
animation-duration: calc(2 * var(--quotes-animation-duration));
animation-delay: var(--quotes-animation-duration);
}
@keyframes quote-blur {
0% { filter: blur(0px); }
100% { filter: blur(8px); }
}
@keyframes quote-unblur {
0% { filter: blur(8px); }
90% { filter: blur(0.5px); }
100% { filter: none; }
}
/* keep guillemets steady, don't dissolve */
#quotes .quote .prev,
#quotes .quote .next,
#quotes .quote:target ~ .quote:nth-child(5) .prev,
#quotes .quote:target ~ .quote:nth-child(5) .next {
visibility: hidden;
}
#quotes .quote:target .prev,
#quotes .quote:target .next,
#quotes .quote:nth-child(5) .prev,
#quotes .quote:nth-child(5) .next {
visibility: visible;
z-index: 2;
}
/* quote navigation pips */
#quotes .pips {
position: absolute;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: center;
top: 20vh;
left: 50%;
height: var(--quotes-pip-max-size);
width: calc(var(--quotes-max-count) * (var(--quotes-pip-max-size) + var(--quotes-pip-spacing)));
margin-left: calc(-1/2 * var(--quotes-max-count) * (var(--quotes-pip-max-size) + var(--quotes-pip-spacing)));
z-index: 3;
font-size: var(--quotes-pip-font-size);
}
#quotes .pip {
display: inline-block;
text-align: center;
width: var(--quotes-pip-max-size);
margin: 0 var(--quotes-pip-spacing);
padding: calc(var(--quotes-pip-max-size)) 0;
}
#quotes .pip .star {
content: '';
display: inline-block;
width: var(--quotes-pip-size);
height: var(--quotes-pip-size);
opacity: var(--quotes-pip-opacity-inactive);
fill: rgba(var(--quotes-pip-color-inactive), 0.7);
transform: rotate(0deg);
transition:
width var(--quotes-animation-duration) ease-in-out,
height var(--quotes-animation-duration) ease-in-out,
opacity var(--quotes-animation-duration) ease-in-out;
}
/* pip states */
#quotes .pip:hover .star,
#quotes .quote:nth-child(5) ~ .pips .pip:nth-child(5) .star,
#quotes .quote:nth-child(5):target ~ .pips .pip:nth-child(5) .star,
#quotes .quote:nth-child(4):target ~ .pips .pip:nth-child(4) .star,
#quotes .quote:nth-child(3):target ~ .pips .pip:nth-child(3) .star,
#quotes .quote:nth-child(2):target ~ .pips .pip:nth-child(2) .star,
#quotes .quote:nth-child(1):target ~ .pips .pip:nth-child(1) .star {
opacity: var(--quotes-pip-opacity-active);
fill: rgb(var(--quotes-pip-color-active));
}
#quotes .quote:nth-child(5) ~ .pips .pip:nth-child(5) .star,
#quotes .quote:nth-child(5):target ~ .pips .pip:nth-child(5) .star,
#quotes .quote:nth-child(4):target ~ .pips .pip:nth-child(4) .star,
#quotes .quote:nth-child(3):target ~ .pips .pip:nth-child(3) .star,
#quotes .quote:nth-child(2):target ~ .pips .pip:nth-child(2) .star,
#quotes .quote:nth-child(1):target ~ .pips .pip:nth-child(1) .star {
width: var(--quotes-pip-max-size);
height: var(--quotes-pip-max-size);
}
#quotes .quote:nth-child(5):target ~ .pips .pip:nth-child(5) .star,
#quotes .quote:nth-child(4):target ~ .pips .pip:nth-child(4) .star,
#quotes .quote:nth-child(3):target ~ .pips .pip:nth-child(3) .star,
#quotes .quote:nth-child(2):target ~ .pips .pip:nth-child(2) .star,
#quotes .quote:nth-child(1):target ~ .pips .pip:nth-child(1) .star {
transform: rotate(144deg);
transition:
width var(--quotes-animation-duration) ease-in-out,
height var(--quotes-animation-duration) ease-in-out,
opacity var(--quotes-animation-duration) ease-in-out,
transform var(--quotes-animation-duration) ease-in-out;
}
#quotes .quote:nth-child(5) ~ .pips .pip:nth-child(5),
#quotes .quote:nth-child(5):target ~ .pips .pip:nth-child(5),
#quotes .quote:nth-child(4):target ~ .pips .pip:nth-child(4),
#quotes .quote:nth-child(3):target ~ .pips .pip:nth-child(3),
#quotes .quote:nth-child(2):target ~ .pips .pip:nth-child(2),
#quotes .quote:nth-child(1):target ~ .pips .pip:nth-child(1) {
pointer-events: none;
}
#quotes .quote:not(:nth-child(5)):target ~ .pips .pip:nth-child(5) .star {
opacity: var(--quotes-pip-opacity-inactive);
fill: rgba(var(--quotes-pip-color-inactive), 0.7);
}
#quotes .quote:not(:nth-child(5)):target ~ .pips .pip:nth-child(5):hover .star {
opacity: var(--quotes-pip-opacity-active);
fill: rgb(var(--quotes-pip-color-active));
}
#quotes .quote:not(:nth-child(5)):target ~ .pips .pip:nth-child(5) .star {
width: var(--quotes-pip-size);
height: var(--quotes-pip-size);
transform: rotate(0deg);
}
#quotes .quote:not(:nth-child(5)):target ~ .pips .pip:nth-child(5) {
pointer-events: auto;
}
/* re-order pips so initially active star is middle one */
#quotes .pips .pip:nth-of-type(1) { order: 1; }
#quotes .pips .pip:nth-of-type(2) { order: 2; }
#quotes .pips .pip:nth-of-type(3) { order: 4; }
#quotes .pips .pip:nth-of-type(4) { order: 5; }
#quotes .pips .pip:nth-of-type(5) { order: 3; }
#quotes .quotation {
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 40vh;
margin-top: 10vh;
text-transform: none;
font-family: var(--endcrawl-landing-condensed-font-family);
font-size: 0.56rem;
line-height: 1.1em;
}
#quotes .quotation a {
flex: 0 0 0.75em;
font-size: 150%;
font-weight: 400;
opacity: 0.7;
transition: opacity 0.1s ease-in-out;
padding: 0 0.1em;
}
#quotes .quotation a[href=""] {
pointer-events: none;
}
#quotes .quotation a:hover {
opacity: 1;
}
#quotes .quotation a::before {
font-family: 'EndcrawlApp';
font-size: 0.5rem;
padding-left: 0.5em;
padding-right: 0.5em;
color: rgb(var(--endcrawl-gold));
}
#quotes .quotation a.prev::before {
content: '\f111';
}
#quotes .quotation a.next::before {
content: '\f110';
}
#quotes .credit {
font-size: 0.24rem;
}
#quotes .credit .name,
#quotes .credit .titles {
font-weight: 500;
}
#quotes .credit .name {
text-transform: none;
font-variant: small-caps;
}
#quotes .credit .titles {
text-transform: uppercase;
}
#quotes .credit .role {
padding: 0 0.25em;
text-transform: none;
font-size: 0.18rem;
font-weight: 300;
}
#quotes .credit {
white-space: nowrap;
}
/* set up pure css parallax effect for page + posters layer */
main {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
transform: translateZ(0);
}
.quilt {
display: block;
position: absolute;
top: calc(2.75 * 15vw);
left: 0;
width: calc(100vw / 3);
height: 100vh;
transform: translateX(-100vw) translateY(calc(var(--intro-height) + var(--posters-height) + 15 * 15vw)) translateZ(-2px) scale(3);
transform-origin: 0 0;
z-index: -3;
}
.quilt::after {
display: block;
content: '';
width: 300%;
height: 100%;
background-size: 100% auto;
background-image: url('../img/posters_landing_019.jpg');
background-repeat: repeat;
}
.quilt:nth-of-type( 1) { z-index: -3; }
.quilt:nth-of-type( 2) { z-index: -5; }
.quilt:nth-of-type( 3) { z-index: -7; }
.quilt:nth-of-type( 4) { z-index: -9; }
.quilt:nth-of-type( 5) { z-index: -11; }
.quilt:nth-of-type( 6) { z-index: -13; }
.quilt:nth-of-type( 7) { z-index: -15; }
.quilt:nth-of-type( 8) { z-index: -17; }
.quilt:nth-of-type( 9) { z-index: -19; }
.quilt:nth-of-type(10) { z-index: -21; }
.quilt:nth-of-type(11) { z-index: -23; }
.quilt:nth-of-type(12) { z-index: -25; }
.quilt:nth-of-type(13) { z-index: -27; }
.quilt:nth-of-type(14) { z-index: -29; }
.quilt:nth-of-type(15) { z-index: -31; }
.quilt:nth-of-type( 1)::after { margin-top: calc( -1 * 15vw); }
.quilt:nth-of-type( 2)::after { margin-top: calc( -2 * 15vw); }
.quilt:nth-of-type( 3)::after { margin-top: calc( -3 * 15vw); }
.quilt:nth-of-type( 4)::after { margin-top: calc( -4 * 15vw); }
.quilt:nth-of-type( 5)::after { margin-top: calc( -5 * 15vw); }
.quilt:nth-of-type( 6)::after { margin-top: calc( -6 * 15vw); }
.quilt:nth-of-type( 7)::after { margin-top: calc( -7 * 15vw); }
.quilt:nth-of-type( 8)::after { margin-top: calc( -8 * 15vw); }
.quilt:nth-of-type( 9)::after { margin-top: calc( -9 * 15vw); }
.quilt:nth-of-type(10)::after { margin-top: calc(-10 * 15vw); }
.quilt:nth-of-type(11)::after { margin-top: calc(-10 * 15vw); }
.quilt:nth-of-type(12)::after { margin-top: calc(-11 * 15vw); }
.quilt:nth-of-type(13)::after { margin-top: calc(-12 * 15vw); }
.quilt:nth-of-type(14)::after { margin-top: calc(-13 * 15vw); }
.quilt:nth-of-type(15)::after { margin-top: calc(-14 * 15vw); }
.quilt:nth-of-type( 1)::after { background-position: left calc(-2 * 3 * 15vw); }
.quilt:nth-of-type( 2)::after { background-position: left calc( 1 * 3 * 15vw); }
.quilt:nth-of-type( 3)::after { background-position: left calc( 0 * 3 * 15vw); }
.quilt:nth-of-type( 4)::after { background-position: left calc(-1 * 3 * 15vw); }
.quilt:nth-of-type( 5)::after { background-position: left calc(-2 * 3 * 15vw); }
.quilt:nth-of-type( 6)::after { background-position: left calc( 1 * 3 * 15vw); }
.quilt:nth-of-type( 7)::after { background-position: left calc( 0 * 3 * 15vw); }
.quilt:nth-of-type( 8)::after { background-position: left calc(-1 * 3 * 15vw); }
.quilt:nth-of-type( 9)::after { background-position: left calc(-2 * 3 * 15vw); }
.quilt:nth-of-type(10)::after { background-position: left calc( 1 * 3 * 15vw); }
.quilt:nth-of-type(11)::after { background-position: left calc( 0 * 3 * 15vw); }
.quilt:nth-of-type(12)::after { background-position: left calc(-1 * 3 * 15vw); }
.quilt:nth-of-type(13)::after { background-position: left calc(-2 * 3 * 15vw); }
.quilt:nth-of-type(14)::after { background-position: left calc( 1 * 3 * 15vw); }
.quilt:nth-of-type(15)::after { background-position: left calc( 0 * 3 * 15vw); }
.curtain {
display: block;
content: '';
position: absolute;
top: calc(var(--intro-height) + var(--posters-height));
width: 10vw;
height: 150vh;
transform-origin: 0 0;
transform: translateZ(-1px) scale(2);
z-index: -2;
}
.curtain::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-image: url('../img/scroll_tfs_512_alpha.png');
background-size: cover;
background-position: top;
background-repeat: none;
}
.curtain::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background: transparent;
background: linear-gradient(
180deg,
rgba(0,0,0,0.0) 0%,
rgba(0,0,0,0.3) 10%,
rgba(0,0,0,0.5) 25%,
rgba(0,0,0,0.7) 40%,
rgba(0,0,0,0.7) 90%,
rgba(0,0,0,0.0) 0%
);
}
@media (max-height: 1023px) {
.curtain:nth-of-type(11) { display: none; }
.curtain:nth-of-type(12) { display: none; }
.curtain:nth-of-type(13) { display: none; }
.curtain:nth-of-type(14) { display: none; }
.curtain:nth-of-type(15) { display: none; }
.curtain:nth-of-type(16) { display: none; }
.curtain:nth-of-type(17) { display: none; }
.curtain:nth-of-type(18) { display: none; }
.curtain:nth-of-type(19) { display: none; }
.curtain:nth-of-type(20) { display: none; }
}
@media (min-height: 1024px) {
.curtain:nth-of-type(1) { display: none; }
.curtain:nth-of-type(2) { display: none; }
.curtain:nth-of-type(3) { display: none; }
.curtain:nth-of-type(4) { display: none; }
.curtain:nth-of-type(5) { display: none; }
.curtain:nth-of-type(6) { display: none; }
.curtain:nth-of-type(7) { display: none; }
.curtain:nth-of-type(8) { display: none; }
.curtain:nth-of-type(9) { display: none; }
.curtain:nth-of-type(10) { display: none; }
}
.curtain:nth-of-type( 1) { left: calc(50% + (1 - 6) * 20%); }
.curtain:nth-of-type( 2) { left: calc(50% + (2 - 6) * 20%); }
.curtain:nth-of-type( 3) { left: calc(50% + (3 - 6) * 20%); }
.curtain:nth-of-type( 4) { left: calc(50% + (4 - 6) * 20%); }
.curtain:nth-of-type( 5) { left: calc(50% + (5 - 6) * 20%); }
.curtain:nth-of-type( 6) { left: calc(50% + (6 - 6) * 20%); }
.curtain:nth-of-type( 7) { left: calc(50% + (7 - 6) * 20%); }
.curtain:nth-of-type( 8) { left: calc(50% + (8 - 6) * 20%); }
.curtain:nth-of-type( 9) { left: calc(50% + (9 - 6) * 20%); }
.curtain:nth-of-type(10) { left: calc(50% + (10 - 6) * 20%); }
.curtain:nth-of-type(11) { left: calc(50% + (1 - 6) * 20%); }
.curtain:nth-of-type(12) { left: calc(50% + (2 - 6) * 20%); }
.curtain:nth-of-type(13) { left: calc(50% + (3 - 6) * 20%); }
.curtain:nth-of-type(14) { left: calc(50% + (4 - 6) * 20%); }
.curtain:nth-of-type(15) { left: calc(50% + (5 - 6) * 20%); }
.curtain:nth-of-type(16) { left: calc(50% + (6 - 6) * 20%); }
.curtain:nth-of-type(17) { left: calc(50% + (7 - 6) * 20%); }
.curtain:nth-of-type(18) { left: calc(50% + (8 - 6) * 20%); }
.curtain:nth-of-type(19) { left: calc(50% + (9 - 6) * 20%); }
.curtain:nth-of-type(20) { left: calc(50% + (10 - 6) * 20%); }
.curtain:nth-of-type( 1) { z-index: -12; }
.curtain:nth-of-type( 2) { z-index: -18; }
.curtain:nth-of-type( 3) { z-index: -10; }
.curtain:nth-of-type( 4) { z-index: -14; }
.curtain:nth-of-type( 5) { z-index: -12; }
.curtain:nth-of-type( 6) { z-index: -10; }
.curtain:nth-of-type( 7) { z-index: -20; }
.curtain:nth-of-type( 8) { z-index: -10; }
.curtain:nth-of-type( 9) { z-index: -12; }
.curtain:nth-of-type(10) { z-index: -10; }
.curtain:nth-of-type(11) { z-index: -8; }
.curtain:nth-of-type(12) { z-index: -10; }
.curtain:nth-of-type(13) { z-index: -6; }
.curtain:nth-of-type(14) { z-index: -10; }
.curtain:nth-of-type(15) { z-index: -12; }
.curtain:nth-of-type(16) { z-index: -8; }
.curtain:nth-of-type(17) { z-index: -8; }
.curtain:nth-of-type(18) { z-index: -10; }
.curtain:nth-of-type(19) { z-index: -12; }
.curtain:nth-of-type(20) { z-index: -6; }
.curtain:nth-of-type( 1) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type( 2) { margin-top: calc( 2 * 2 * 15vw); }
.curtain:nth-of-type( 3) { margin-top: calc(-1 * 2 * 15vw); }
.curtain:nth-of-type( 4) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type( 5) { margin-top: calc( 0 * 2 * 15vw); }
.curtain:nth-of-type( 6) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type( 7) { margin-top: calc( 2 * 2 * 15vw); }
.curtain:nth-of-type( 8) { margin-top: calc( 0 * 2 * 15vw); }
.curtain:nth-of-type( 9) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type(10) { margin-top: calc( 0 * 2 * 15vw); }
.curtain:nth-of-type(11) { margin-top: calc(-2 * 2 * 15vw); }
.curtain:nth-of-type(12) { margin-top: calc( 0 * 2 * 15vw); }
.curtain:nth-of-type(13) { margin-top: calc(-1 * 2 * 15vw); }
.curtain:nth-of-type(14) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type(15) { margin-top: calc(-1 * 2 * 15vw); }
.curtain:nth-of-type(16) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type(17) { margin-top: calc(-1 * 2 * 15vw); }
.curtain:nth-of-type(18) { margin-top: calc(-1 * 2 * 15vw); }
.curtain:nth-of-type(19) { margin-top: calc( 1 * 2 * 15vw); }
.curtain:nth-of-type(20) { margin-top: calc( 0 * 2 * 15vw); }
.curtain:nth-of-type( 1)::before { background-position: 0 calc(-1 * 2 * 15vw); }
.curtain:nth-of-type( 2)::before { background-position: 0 calc(-6 * 2 * 15vw); }
.curtain:nth-of-type( 3)::before { background-position: 0 calc( 1 * 2 * 15vw); }
.curtain:nth-of-type( 4)::before { background-position: 0 calc(-1 * 2 * 15vw); }
.curtain:nth-of-type( 5)::before { background-position: 0 calc( 0 * 2 * 15vw); }
.curtain:nth-of-type( 6)::before { background-position: 0 calc(-3 * 2 * 15vw); }
.curtain:nth-of-type( 7)::before { background-position: 0 calc( 4 * 2 * 15vw); }
.curtain:nth-of-type( 8)::before { background-position: 0 calc( 0 * 2 * 15vw); }
.curtain:nth-of-type( 9)::before { background-position: 0 calc(-5 * 2 * 15vw); }
.curtain:nth-of-type(10)::before { background-position: 0 calc(-2 * 2 * 15vw); }
.curtain:nth-of-type(11)::before { background-position: 0 calc(-3 * 2 * 15vw); }
.curtain:nth-of-type(12)::before { background-position: 0 calc(-3 * 2 * 15vw); }
.curtain:nth-of-type(13)::before { background-position: 0 calc(-5 * 2 * 15vw); }
.curtain:nth-of-type(14)::before { background-position: 0 calc(-2 * 2 * 15vw); }
.curtain:nth-of-type(15)::before { background-position: 0 calc( 0 * 2 * 15vw); }
.curtain:nth-of-type(16)::before { background-position: 0 calc( 3 * 2 * 15vw); }
.curtain:nth-of-type(17)::before { background-position: 0 calc( 4 * 2 * 15vw); }
.curtain:nth-of-type(18)::before { background-position: 0 calc( 0 * 2 * 15vw); }
.curtain:nth-of-type(19)::before { background-position: 0 calc(-1 * 2 * 15vw); }
.curtain:nth-of-type(20)::before { background-position: 0 calc(-2 * 2 * 15vw); }
#how-it-works {
margin-top: calc(var(--intro-height) + var(--posters-height));
}
#how-it-works .content {
flex-direction: column;
min-height: 100vh;
max-height: 1440px;
padding: calc(5 * var(--grid-size)) 0 0 0;
}
#how-it-works h2 {
text-align: center;
padding-bottom: var(--grid-size);
}
#how-it-works .benefits {
display: grid;
grid-template-columns: 1fr var(--benefit-roller-width) 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#how-it-works .benefit:nth-child(1),
#how-it-works .benefit:nth-child(2),
#how-it-works .benefit:nth-child(3) {
grid-column: 1 / span 2;
padding-right: calc(var(--benefit-roller-width) + 2 * var(--grid-size));
}
#how-it-works .benefit:nth-child(1) {
grid-row: 1 / 1;
}
#how-it-works .benefit:nth-child(2) {
grid-row: 2 / 2;
}
#how-it-works .benefit:nth-child(3) {
grid-row: 3 / 3;
}
#how-it-works .benefit:nth-child(4),
#how-it-works .benefit:nth-child(5),
#how-it-works .benefit:nth-child(6) {
grid-column: 2 / span 2;
padding-left: calc(var(--benefit-roller-width) + 4 * var(--grid-size));
}
#how-it-works .benefit:nth-child(4) {
grid-row: 1 / 1;
}
#how-it-works .benefit:nth-child(5) {
grid-row: 2 / 2;
}
#how-it-works .benefit:nth-child(6) {
grid-row: 3 / 3;
}
#how-it-works .benefit {
position: relative;
height: var(--benefit-height);
padding: calc(2 * var(--grid-size));
padding-left: calc(4 * var(--grid-size));
}
#how-it-works .benefit:nth-child(1),
#how-it-works .benefit:nth-child(2),
#how-it-works .benefit:nth-child(3),
#how-it-works .benefit:nth-child(4):hover,
#how-it-works .benefit:nth-child(5):hover,
#how-it-works .benefit:nth-child(6):hover {
z-index: 3;
}
#how-it-works .benefit:nth-child(4),
#how-it-works .benefit:nth-child(5),
#how-it-works .benefit:nth-child(6) {
z-index: 2;
}
#how-it-works .benefits::after {
content: '';
grid-column: 2 / 2;
grid-row: 1 / span 3;
background-image: url('../img/benefit-roller.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
opacity: 0.18;
}
#how-it-works .benefit img {
display: block;
position: absolute;
top: 0;
width: var(--benefit-roller-width);
height: 100%;
}
#how-it-works .benefit:nth-child(1) img,
#how-it-works .benefit:nth-child(2) img,
#how-it-works .benefit:nth-child(3) img {
right: 0;
}
#how-it-works .benefit:nth-child(4) img,
#how-it-works .benefit:nth-child(5) img,
#how-it-works .benefit:nth-child(6) img {
left: 0;
}
#how-it-works h3 {
position: relative;
line-height: 1;
opacity: 0.8;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover h3 {
opacity: 0.99;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit h3 em {
position: absolute;
top: 0;
left: calc(-2 * var(--grid-size));
width: calc(2 * var(--grid-size));
height: calc(2 * var(--grid-size));
font-size: 70%;
line-height: 0.265rem;
}
#how-it-works .benefit h3 em.fa.fa-infinity {
font-size: 0.18rem;
}
#how-it-works .benefit h3 em.fa.fa-forward {
font-size: 0.17rem;
}
#how-it-works .benefit h3 em.fa.fa-new-keys {
font-size: 0.20rem;
line-height: 0.34rem;
}
#how-it-works .benefit h3 em.fa.fa-hs-typography1 {
font-size: 0.21rem;
line-height: 0.25rem;
}
#how-it-works .benefit h3 em.fa.fa-hs-spade {
font-size: 0.17rem;
}
#how-it-works .benefit h3 em.fa.fa-hd-double-check {
font-size: 0.17rem;
}
#how-it-works .benefit:nth-of-type(2n+1) h3 em {
color: rgb(var(--endcrawl-magenta));
opacity: 0.7;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover:nth-of-type(2n+1) h3 em {
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:nth-of-type(2n) h3 em {
color: rgb(var(--endcrawl-cyan));
opacity: 0.7;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover:nth-of-type(2n) h3 em {
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:nth-of-type(2) h3 em {
color: rgb(var(--endcrawl-gold));
opacity: 0.7;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover:nth-of-type(2) h3 em {
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
#how-it-works p {
margin: 1em 0;
font-size: 0.111rem;
font-weight: 400;
line-height: 1.5;
opacity: 0.6;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover p {
font-weight: 400;
opacity: 0.9;
}
#how-it-works .benefit::after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
pointer-events: none;
}
#how-it-works .benefit::after {
background-color: black;
}
#how-it-works #cards-and-mains.benefit::after {
background-color: #0f0f0f;
}
#how-it-works .benefit::after,
#how-it-works .benefit img {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
#how-it-works .benefit:hover::after,
#how-it-works .benefit:hover img {
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
#team .content {
flex-direction: column;
max-width: 1152px;
padding: calc(5 * var(--grid-size)) 0;
}
#team .persons {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: center;
width: 100%;
margin-top: 0;
}
#team .persons > * {
margin-top: calc(2 * var(--grid-size));
margin-bottom: calc(2 * var(--grid-size));
display: inline-block;
width: calc(12 * var(--grid-size));
text-align: center;
}
#team .portrait {
height: calc(5 * var(--grid-size));
width: calc(5 * var(--grid-size));
margin-left: auto;
margin-right: auto;
border-radius: 100%;
background-color: #444;
background-size: cover;
}
#team h3 {
color: var(--endcrawl-light-grey);
margin-top: 0.5em;
line-height: 1;
}
#team h4 {
margin-top: 0.5em;
font-size: 0.08333rem;
text-transform: uppercase;
}
#team h4.occupation {
margin-top: 0em;
font-family: var(--endcrawl-display-font-family);
font-size: 0.125rem;
font-weight: 500;
text-transform: none;
}
#team h4.role {
margin-top: 1.25em;
}
#team h4.role.founder {
color: rgb(var(--endcrawl-cyan));
}
#team h4.role.advisor {
color: rgb(var(--endcrawl-magenta));
}
#team h4.role.investor {
color: rgb(var(--endcrawl-gold));
}
#team #alan .portrait { background-image: url('../img/team-alan-grow.jpg'); }
#team #pliny .portrait { background-image: url('../img/team-pliny.jpg'); }
#team #emily .portrait { background-image: url('../img/team-emily-best.jpg'); }
#team #steven .portrait { background-image: url('../img/team-steven-klein.jpg'); }
#team #tyler .portrait { background-image: url('../img/team-tyler-tringas.jpg'); }
#team #sahil .portrait { background-image: url('../img/team-sahil-lavinga.jpg'); }
#team #juan .portrait { background-image: url('../img/team-juan-salvo.jpg'); }
#team #katie .portrait { background-image: url('../img/team-katie-hinsen.jpg'); }
#faq {
min-height: 100vh;
}
#faq .content {
flex-direction: column;
padding: calc(6 * var(--grid-size)) 0 calc(2 * var(--grid-size)) 0;
}
#faq h2 {
padding-bottom: var(--grid-size);
}
#faq .questions {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
width: 100%;
height: 440px;
margin-top: var(--grid-size);
}
/* a single question */
#faq .questions dt {
flex: 0 0 var(--question-height);
box-sizing: content-box;
max-width: 50%;
width: calc(50% - calc(1 * var(--grid-size)));
padding-right: calc(1 * var(--grid-size));
font-family: var(--endcrawl-display-font-family);
font-size: 0.25rem;
font-weight: 500;
letter-spacing: 0.3;
text-transform: uppercase;
text-align: right;
line-height: 1;
color: rgba(var(--endcrawl-light-grey), 0.6);
z-index: 2;
}
#faq .questions dt a {
pointer-events: auto;
}
/* a default inactive q&a pair */
#faq .questions dt a:hover {
color: rgba(255,255,255,0.9);
}
#faq .questions dd,
#faq .questions .parallelograms {
margin-left: -10000px;
flex: 0 0 100%;
order: 100;
width: 50%;
max-width: 28em;
padding-left: calc(1 * var(--grid-size));
line-height: 1.5;
opacity: 0;
}
/* the default parallelogram watermark */
#faq .questions .parallelograms {
display: block;
flex: 0 0 100%;
height: calc(5.75 * var(--question-height));
width: calc(5.75 * var(--question-height));
margin-top: 0.25em;
margin-left: 0;
opacity: 1;
}
#faq .questions dt:target ~ .parallelograms {
display: none;
}
#faq .questions .parallelograms .top { fill: #242528; }
#faq .questions .parallelograms .middle { fill: #202123; }
#faq .questions .parallelograms .bottom { fill: #1c1d20; }
/* the active q&a pair */
#faq .questions dt:nth-of-type(1):target {
padding-top: calc(var(--question-y-offset) + 0 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 0 * var(--question-height)));
}
#faq .questions dt:nth-of-type(2):target {
padding-top: calc(var(--question-y-offset) + 1 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 1 * var(--question-height)));
}
#faq .questions dt:nth-of-type(3):target {
padding-top: calc(var(--question-y-offset) + 2 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 2 * var(--question-height)));
}
#faq .questions dt:nth-of-type(4):target {
padding-top: calc(var(--question-y-offset) + 3 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 3 * var(--question-height)));
}
#faq .questions dt:nth-of-type(5):target {
padding-top: calc(var(--question-y-offset) + 4 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 4 * var(--question-height)));
}
#faq .questions dt:nth-of-type(6):target {
padding-top: calc(var(--question-y-offset) + 5 * var(--question-height));
margin-top: calc(-1 * (var(--question-y-offset) + 5 * var(--question-height)));
}
#faq .questions dt:target {
z-index: 1;
}
#faq .questions dt:target a {
color: rgba(var(--question-color-active));
}
#faq .questions dt:target a {
pointer-events: none;
}
#faq .questions dt:target + dd {
margin-left: 0;
opacity: 1;
transition: opacity 0.5s ease-in;
}
/* q&a text */
#faq .questions p {
padding-bottom: 2em;
}
/* q&a bullets */
#faq .questions dd li:before {
content: "\2022";
display: inline-block;
width: 1em;
margin-left: 1em;
}
#faq .questions dd ul {
margin-bottom: 2em;
}
/* q&a links */
#faq .questions dd a,
#signup .thank-you p a {
color: rgba(255, 187, 3, 1);
opacity: 1;
}
#faq .questions dd a:hover,
#signup .thank-you p a:hover {
text-decoration: underline;
}
main > .pricing:not(:target) {
display: none;
}
main > #pricing {
display: flex;
}
main > .pricing:target ~ #pricing,
main > .pricing:target ~ #episodic {
display: none;
}
main > #compare-pricing:target ~ #pricing,
main > #compare-episodic-pricing:target ~ #episodic {
display: flex;
}
.pricing .content {
flex-direction: column;
justify-content: start;
align-items: center;
padding: calc(5 * var(--grid-size)) calc(1 * var(--grid-size)) 0 calc(1 * var(--grid-size));
min-height: 930px;
max-height: 930px;
transition: height 0.5s ease-out;
z-index: 2;
}
#episodic .content {
max-height: 1024px;
}
#compare-pricing,
#compare-episodic-pricing {
width: 100%;
height: 0;
margin-bottom: -260px;
}
#compare-pricing ~ #pricing .content,
#compare-episodic-pricing ~ #episodic .content {
max-height: var(--pricing-min-height);
transition: max-height 0.3s ease-in-out;
}
#compare-pricing:target ~ #pricing .content,
#compare-episodic-pricing:target ~ #episodic .content {
min-height: var(--pricing-min-height);
max-height: var(--pricing-max-height);
}
main > .pricing > * {
background: var(--endcrawl-slate-black);
}
main > .pricing::before,
main > .pricing::after {
background: var(--endcrawl-slate-black);
}
.pricing .categories {
font-family: var(--endcrawl-display-font-family);
font-weight: 500;
font-size: 0.25rem;
letter-spacing: 0.024em;
}
.pricing .categories > * {
display: inline-block;
width: 5.5em;
padding: var(--grid-size) 0;
text-align: center;
}
.pricing .categories a {
text-transform: uppercase;
text-decoration: none;
color: inherit;
opacity: 0.3;
transition: opacity 0.1s ease-in-out;
}
.pricing .categories a::after {
display: inline-block;
}
.pricing .categories .feature a::after { content: 'Feature Film'; }
.pricing .categories .short a::after { content: 'Short Film'; }
.pricing .categories .episodic a::after { content: 'TV & Episodic'; }
#pricing .categories > .feature a,
#shorts .categories > .short a,
#episodic .categories > .episodic a,
.pricing .categories a:hover {
opacity: 1;
}
#pricing .categories > .feature a::after,
#shorts .categories > .short a::after,
#episodic .categories > .episodic a::after,
.pricing .categories a:hover::after {
text-decoration: solid underline 0.05em;
text-underline-offset: 0.175em;
}
.pricing .tiers {
position: relative;
width: 100%;
line-height: 1.5;
}
.pricing .overview th,
.pricing .details td {
padding: var(--grid-size);
}
.pricing .overview th > * {
display: inline-block;
width: 100%;
}
.pricing .details td.masks {
width: 0;
padding: 0;
}
.pricing .overview th::after,
.pricing .details td.masks > * {
content: ' ';
position: absolute;
top: 0;
height: 100%;
z-index: 2;
pointer-events: none;
opacity: 0;
}
.pricing .overview:hover th::after {
background-color: var(--endcrawl-slate-black);
opacity: 0.5;
}
/* pricing table hover tints */
#pricing .overview th:nth-child(1),
#pricing .details .masks > *:nth-child(1) {
--tint-color: var(--tier-color--1);
}
#pricing .overview th:nth-child(2),
#pricing .details .masks > *:nth-child(2) {
--tint-color: var(--tier-color-3);
}
#pricing .overview th:nth-child(3),
#pricing .details .masks > *:nth-child(3) {
--tint-color: var(--tier-color-4);
}
#pricing .overview th:nth-child(4),
#pricing .details .masks > *:nth-child(4) {
--tint-color: var(--tier-color-5);
}
#episodic .overview th:nth-child(1),
#episodic .details .masks > *:nth-child(1) {
--tint-color: var(--tier-color--1);
}
#episodic .overview th:nth-child(2),
#episodic .details .masks > *:nth-child(2) {
--tint-color: var(--tier-color-4);
}
#episodic .overview th:nth-child(3),
#episodic .details .masks > *:nth-child(3) {
--tint-color: var(--tier-color-5);
}
#shorts .overview th:nth-child(1) {
--tint-color: var(--tier-color--1);
}
#shorts .overview th:nth-child(2) {
--tint-color: var(--tier-color-0);
}
#shorts .overview th:nth-child(3) {
--tint-color: var(--tier-color-1);
}
/* hover tint elements */
#pricing .overview th:hover::after,
#shorts .overview th:hover::after,
#episodic .overview th:hover::after,
#pricing .details tr:hover td:nth-child(1):hover ~ td.masks > *:nth-child(1),
#pricing .details tr:hover td:nth-child(2):hover ~ td.masks > *:nth-child(2),
#pricing .details tr:hover td:nth-child(3):hover ~ td.masks > *:nth-child(3),
#pricing .details tr:hover td:nth-child(4):hover ~ td.masks > *:nth-child(4),
#episodic .details tr:hover td:nth-child(1):hover ~ td.masks > *:nth-child(1),
#episodic .details tr:hover td:nth-child(2):hover ~ td.masks > *:nth-child(2),
#episodic .details tr:hover td:nth-child(3):hover ~ td.masks > *:nth-child(3) {
z-index: -1;
background-color: rgb(var(--tint-color));
opacity: 0.1;
}
.pricing .details tr:hover td:nth-child(1) ~ td.masks > *:nth-child(1),
.pricing .details tr:hover td:nth-child(2) ~ td.masks > *:nth-child(2),
.pricing .details tr:hover td:nth-child(3) ~ td.masks > *:nth-child(3),
.pricing .details tr:hover td:nth-child(4) ~ td.masks > *:nth-child(4) {
background-color: var(--endcrawl-slate-black);
opacity: 0.5;
}
#pricing .details tr:not(.less-detail):hover,
#episodic .details tr:not(.less-detail):hover {
background-color: rgba(255, 255, 255, calc(3 * var(--endcrawl-elevation)));
}
#pricing .details tr:not(.less-detail):hover td:not(.masks),
#episodic .details tr:not(.less-detail):hover td:not(.masks) {
position: relative;
z-index: 3;
}
/* feature pricing table columns */
#pricing .overview th,
#pricing .overview th::after,
#pricing .details td,
#pricing .details td.masks > * {
width: 25%;
}
#pricing .overview th:nth-child(1)::after,
#pricing .details td.masks > *:nth-child(1) {
left: 0;
}
#pricing .overview th:nth-child(2)::after,
#pricing .details td.masks > *:nth-child(2) {
left: 25%;
}
#pricing .overview th:nth-child(3)::after,
#pricing .details td.masks > *:nth-child(3) {
left: 50%;
}
#pricing .overview th:nth-child(4)::after,
#pricing .details td.masks > *:nth-child(4) {
left: 75%;
}
/* episodic pricing table columns */
#episodic .overview th {
padding: calc(2 * var(--grid-size));
padding-top: var(--grid-size);
}
#episodic .details td:not(.masks) {
padding-left: calc(2 * var(--grid-size));
padding-right: calc(2 * var(--grid-size));
}
#episodic .overview th,
#episodic .overview th::after,
#episodic .details td,
#episodic .details td.masks > * {
width: calc(100% / 3);
}
#episodic .overview th:nth-child(1)::after,
#episodic .details td.masks > *:nth-child(1) {
left: 0;
}
#episodic .overview th:nth-child(2)::after,
#episodic .details td.masks > *:nth-child(2) {
left: calc(100% / 3);
}
#episodic .overview th:nth-child(3)::after,
#episodic .details td.masks > *:nth-child(3) {
left: calc(100% * 2 / 3);
}
/* shorts pricing table columns */
#shorts .overview th,
#shorts .overview th::after {
width: calc(100% / 3);
}
#shorts .overview th:nth-child(1)::after {
left: 0;
}
#shorts .overview th:nth-child(2)::after {
left: calc(100% * 1 / 3);
}
#shorts .overview th:nth-child(3)::after {
left: calc(100% * 2 / 3);
}
/* pricing content */
.pricing .tiers h3,
.pricing .tiers .price {
font-size: 0.4rem;
font-weight: 600;
line-height: 1.5;
}
.pricing #demo h3 { color: rgb(var(--tier-color--1)); }
.pricing #basic h3 { color: rgb(var(--tier-color-3)); }
.pricing #pro h3 { color: rgb(var(--tier-color-4)); }
.pricing #plus h3 { color: rgb(var(--tier-color-5)); }
.pricing #episodic-demo h3 { color: rgb(var(--tier-color--1)); }
.pricing #episodic-pro h3 { color: rgb(var(--tier-color-4)); }
.pricing #episodic-plus h3 { color: rgb(var(--tier-color-5)); }
.pricing #short-demo h3 { color: rgb(var(--tier-color--1)); }
.pricing #short-basic h3 { color: rgb(var(--tier-color-0)); }
.pricing #short-pro h3 { color: rgb(var(--tier-color-1)); }
.pricing .tiers .price::before {
display: inline-block;
content: '$';
padding-right: 0.25em;
font-size: 50%;
font-weight: 500;
}
#episodic .tiers .price::before {
opacity: 0.3;
}
.pricing .tiers .price {
font-family: var(--endcrawl-display-font-family);
color: white;
line-height: 3;
}
.pricing .tiers #plus .price-plus {
font-weight: 500;
font-size: 0.3rem;
padding-left: 0.1em;
}
.pricing .tiers .price::after {
display: inline-block;
content: 'flat/film';
padding-left: 0.65em;
font-family: var(--endcrawl-landing-condensed-font-family);
font-weight: var(--endcrawl-landing-text-font-weight);
font-size: var(--endcrawl-landing-text-font-size);
letter-spacing: var(--endcrawl-landing-text-font-letter-spacing);
font-size: 0.1rem;
}
#episodic .tiers .price::after {
content: 'USD';
font-family: var(--endcrawl-display-font-family);
font-weight: 500;
font-size: 45%;
letter-spacing: var(--endcrawl-display-font-letter-spacing);
opacity: 0.3;
}
.pricing .tiers #short-demo .price::after,
.pricing .tiers #demo .price::after {
content: '';
}
#episodic form {
height: calc(var(--grid-size) * 7.5);
}
#episodic .price {
display: block;
width: 100%;
line-height: 1.75;
margin-left: -0.33em;
}
#episodic fieldset {
display: inline-flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
margin-left: calc(-1 * var(--grid-size) * 3/2);
}
#episodic fieldset,
#episodic .details td.mask {
margin-left: calc(-1 * var(--grid-size) * 3/2);
}
#episodic label:first-of-type {
display: inline-block;
width: calc(var(--grid-size) * 3 / 2);
}
#episodic label:last-of-type {
margin-right: calc(var(--grid-size) / 2);
}
#episodic input,
#episodic label,
#episodic button {
line-height: calc(var(--grid-size) * 2);
background: transparent;
color: white;
}
#episodic [type="number"] {
width: calc(var(--grid-size) * 2);
height: calc(var(--grid-size) * 2);
padding-left: 0;
padding-right: 0;
font-family: var(--endcrawl-display-font-family);
font-size: calc(var(--grid-size) * 2);
font-weight: 600;
}
#episodic-pro [type="number"] {
color: rgb(var(--tier-color-4));
}
#episodic-plus [type="number"] {
color: rgb(var(--tier-color-5));
}
#episodic .stepper {
display: inline-block;
width: var(--grid-size);
font-size: var(--grid-size);
text-align: center;
}
#episodic .stepper[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
#episodic .stepper.up {
padding-top: 0.05em;
}
#episodic .stepper.down {
margin-top: -0.05em;
}
#episodic b {
white-space: nowrap;
}
#episodic b em {
font-weight: inherit;
}
.pricing ul.summary {
list-style-type: disc;
margin-left: 0;
padding-left: 0.5em;
}
.pricing ul.summary li::marker {
font-size: 50%;
}
.pricing .button {
display: inline-block;
bottom: calc(2 * var(--grid-size));
left: 50%;
margin-top: calc(2 * var(--grid-size));
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 0;
border: none;
width: calc(8 * var(--grid-size));
height: calc(2 * var(--grid-size));
line-height: calc(2 * var(--grid-size));
font-family: var(--endcrawl-display-font-family);
text-align: center;
font-weight: 600;
font-size: 0.2083rem;
text-transform: uppercase;
text-decoration: none;
color: black;
cursor: pointer;
}
.pricing .button.compare,
.pricing .button.less-detail {
background-color: rgba(var(--endcrawl-magenta), 0.8);
letter-spacing: 0.01em;
font-weight: 500;
padding-left: 0.3em;
}
.pricing .button.less-detail i.fa.fa-hs-guillemet-up:before,
.pricing .button.compare i.fa.fa-hs-guillemet-down:before {
font-size: 0.16rem;
}
.pricing .button.compare:hover,
.pricing .button.less-detail:hover {
background-color: rgba(var(--endcrawl-magenta), 1);
}
#compare-pricing:target ~ #pricing .button.compare,
#compare-episodic-pricing:target ~ #episodic .button.compare {
display: none;
}
#compare-pricing ~ #pricing .details,
#compare-episodic-pricing ~ #episodic .details {
display: none;
}
#compare-pricing:target ~ #pricing .details,
#compare-episodic-pricing:target ~ #episodic .details {
display: table-row-group;
}
#compare-pricing ~ #pricing .button.less-detail,
#compare-episodic-pricing ~ #episodic .button.less-detail {
display: none;
}
#compare-pricing:target ~ #pricing .button.less-detail,
#compare-episodic-pricing:target ~ #episodic .button.less-detail {
display: inline-block;
}
.pricing .details .less-detail a {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.025em;
opacity: 0.5;
}
.pricing .details .less-detail a:hover {
opacity: 1;
}
.pricing .details .less-detail a .fa {
margin-left: 0.25em;
}
#footer {
background-color: black;
}
#footer .content {
flex-direction: column;
padding: calc(1 * var(--grid-size)) 0 calc(3 * var(--grid-size));
height: auto;
}
#footer .toc {
padding: var(--grid-size) 0;
}
#footer .toc,
#footer .logo-bug {
display: block;
width: 100%;
text-align: center;
}
#footer .toc > * {
display: inline-block;
padding: 0 1em;
}
#footer p {
padding-top: var(--grid-size);
padding-top: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--endcrawl-light-grey);
opacity: 0.4;
font-family: var(--endcrawl-display-font-family);
font-weight: 500;
font-size: 0.111111rem;
line-height: 1.8em;
}
#footer p .name {
font-size: 170%;
letter-spacing: 0.1;
}
#footer p .name:before,
#footer p .name:after {
content: "\00a0";
font-size: 50%;
}
#footer p sub {
text-transform: none;
}
#footer p i.fa-hs-endcrawl-logo-mono {
font-size: 0.21rem;
padding-top: 1em;
}
#footer .toc a {
color: rgba(255,255,255,0.85)
}
#footer .toc a:hover {
color: rgba(255,255,255,1)
}
/* Responsive no man's land: narrow desktop views that aren't quite mobile. */
@media only screen and (max-width: 1279px) {
:root {
--signup-form-width: calc(100vw - 2 * var(--grid-size));
--signup-form-height: calc(100vh - 8 * var(--grid-size));
--benefit-height: calc(2/3 * 55 / 4 * var(--grid-size));
--benefit-roller-width: calc(2/3 * 58 / 3 * var(--grid-size));
--question-height: calc(2 * var(--grid-size));
--question-y-offset: calc(10 * var(--grid-size));
}
#how-it-works h2 {
font-size: calc(2/3 * 0.667rem);
}
#how-it-works h3 {
font-size: calc(2/3 * 0.250rem);
}
#how-it-works p {
font-size: calc(3/4 * 0.111rem);
}
#how-it-works .benefit {
padding-top: var(--grid-size);
padding-bottom: var(--grid-size);
}
#how-it-works .content {
padding: calc(3 * var(--grid-size)) 0 0 0;
}
#faq .questions dt {
font-size: 0.18rem;
}
#faq .questions dt,
#faq .questions dd {
padding-left: calc(var(--grid-size));
padding-right: calc(var(--grid-size));
}
#faq .questions p {
padding-top: 1.1em;
}
main > .pricing {
font-size: 85%;
}
.pricing .content {
padding: var(--grid-size);
padding-top: calc(3 * var(--grid-size));
}
.pricing .overview th,
.pricing .details td {
padding: calc(var(--grid-size) / 2);
}
}
/* Screens that might be plenty wide, but not very tall, like Macbook Air. */
@media only screen and (min-width: 1279) and (max-height: 799px) {
#signup form {
padding-bottom: calc(6 * var(--grid-size));
}
#signup label.door {
height: calc(3 * var(--grid-size));
}
#quotes {
top: 200vh;
}
}
/* Responsive mobile views. */
@media only screen and (max-width: 899px) {
:root {
--content-min-width: 375px;
--content-max-width: calc(899px - 2 * var(--grid-size));
--question-height: calc(1.625 * var(--grid-size));
--question-y-offset: calc(7.5 * var(--grid-size));
}
html {
font-size: 108px;
}
.content {
font-size: 0.1296rem;
}
main > *:not(.full-bleed) {
height: auto;
}
h2,
#how-it-works h2 {
font-size: 0.555rem;
}
h3 {
line-height: 1.4em;
}
input,
#get-started .cta .subscribe [name="subscribe"] {
font-size: 0.12rem;
}
#nav .benefits,
#nav .pricing,
#nav .login {
display: none;
}
#nav .signup {
padding: 0 0.75em;
}
#nav button,
#nav .button {
font-size: 0.185rem;
}
#nav button:hover,
#nav .button:hover {
background-color: inherit;
}
#get-started {
min-height: 608px;
max-height: 608px;
}
#get-started .cta {
flex: 1 0 50%;
min-width: 375px;
max-width: 60%;
padding: var(--nav-height) 0 0 0;
background-color: rgba(0, 0, 0, 0.7);
}
#get-started .cta p {
font-size: 0.16rem;
}
#get-started .cta > * {
padding-left: var(--grid-size);
padding-right: var(--grid-size);
}
#get-started .cta h1 {
padding-top: 0.15em;
padding-left: var(--grid-size);
padding-right: var(--grid-size);
font-size: 0.889rem;
line-height: 1.0;
}
#get-started .cta h1 em {
color: rgb(var(--endcrawl-magenta));
opacity: calc(1.0 - 1/4 * (1.0 - var(--finish-your-movie-opacity)));
background-image: none;
}
#get-started .cta h1 .fa {
padding-left: var(--grid-size);
}
#get-started .cta p {
padding-right: var(--grid-size);
}
#get-started .cta .subscribe [name="subscribe"] {
flex: 0 0 calc(6 * var(--grid-size));
}
#signup .content {
padding: calc(3 * var(--grid-size)) var(--grid-size) calc(5 * var(--grid-size)) var(--grid-size);
align-items: flex-start;
}
#signup form {
padding-bottom: var(--grid-size);
}
#signup .close {
top: calc(1/2 * var(--grid-size));
right: calc(var(--grid-size));
width: calc(2 * var(--grid-size));
height: calc(2 * var(--grid-size));
font-size: calc(2 * var(--grid-size));
}
#signup a.close .close-text {
font-size: 0.175rem;
}
#signup h2 {
font-size: calc(1rem / 3);
line-height: 2;
}
#signup input,
#signup select,
#signup label,
#signup button {
font-size: 0.13rem;
}
#signup h2,
#signup h3 {
padding-left: calc(1/4 * var(--grid-size));
padding-right: calc(1/4 * var(--grid-size));
}
#signup .doorstop {
order: 1;
margin-bottom: 0;
}
#signup label.door {
height: calc(3 * var(--grid-size));
line-height: calc(3 * var(--grid-size));
margin: calc(1/4 * var(--grid-size)) 0;
padding-top: 0;
padding-bottom: 0;
}
#signup label:nth-of-type(1) {
margin-top: calc(2 * var(--grid-size));
}
#signup h2.door0 {
height: calc(6 * var(--grid-size));
}
#signup h2.door1 {
height: calc(7 * var(--grid-size));
}
#signup h2.door0,
#signup h2.door1 {
margin-top: 0;
margin-bottom: 0;
}
#signup h2 p {
padding-right: 2em;
}
#signup [type="submit"].door0,
#signup [type="submit"].door1 {
margin-top: calc(1/4 * var(--grid-size));
}
#signup .door1 {
padding-bottom: calc(1/4 * var(--grid-size));
}
#signup form > [name="first_name"],
#signup form > [name="last_name"],
#signup form > label.door:nth-of-type(1n),
#signup form > [name="film_kind"][data-chosen$="-series"],
#signup form > [name="film_kind"][data-chosen$="-series"] ~ [name="episode_count"] {
flex: 0 0 100%;
margin-right: 0;
margin-left: 0;
}
#signup .upload {
height: 0;
visibility: hidden;
margin: 0;
padding: 0;
border: none;
}
#signup [type="submit"] {
line-height: calc(3.5 * var(--grid-size));
}
#quotes .content {
max-width: 100vw;
}
#quotes .content > *:not(.pips) {
padding-left: 0;
padding-right: 0;
}
#quotes .quotation {
font-size: 0.3rem;
height: 40vh;
margin-top: 0;
}
#quotes .quotation a:nth-of-type(1)::before,
#quotes .quotation a:nth-of-type(2)::before {
font-size: 0.36rem;
padding-left: 0.1em;
padding-right: 0.1em;
}
#quotes .credit::before {
content: '';
}
#quotes .credit .role,
#quotes .credit .name,
#quotes .credit .titles {
display: block;
line-height: 1.5;
}
main {
perspective: 0;
}
.quilt {
position: initial;
display: none;
}
/* use only half of the quilt: 5 posters across instead of 10, and 4 down.
stagger the second and third quilts to avoid obvious repeats. */
.quilt:nth-of-type(1),
.quilt:nth-of-type(2),
.quilt:nth-of-type(3) {
display: block;
width: calc(5 * 20vw);
height: 120vw;
transform: none;
}
.quilt:nth-of-type(3) {
height: 90vw;
}
.quilt:nth-of-type(1)::after,
.quilt:nth-of-type(2)::after,
.quilt:nth-of-type(3)::after {
margin-top: 0;
width: 100%;
background-size: 200%;
}
.quilt:nth-of-type(1)::after {
background-position: 0 0;
}
.quilt:nth-of-type(2)::after {
background-position: 100vw 0;
}
.quilt:nth-of-type(3)::after {
background-position: 140vw 0;
}
.curtain {
display: none;
}
#how-it-works {
margin-top: 0;
}
#how-it-works .content {
max-height: none;
}
#how-it-works .benefits {
display: flex;
flex-direction: column;
margin-top: calc(0.5 * var(--grid-size));
}
#how-it-works .benefits li:nth-of-type(1) { order: 1; }
#how-it-works .benefits li:nth-of-type(2) { order: 3; }
#how-it-works .benefits li:nth-of-type(3) { order: 5; }
#how-it-works .benefits li:nth-of-type(4) { order: 2; }
#how-it-works .benefits li:nth-of-type(5) { order: 3; }
#how-it-works .benefits li:nth-of-type(6) { order: 6; }
#how-it-works .benefit:nth-child(1n) {
height: auto;
padding-top: 0;
padding-left: calc(1.8 * var(--grid-size));
padding-right: calc(2 * var(--grid-size));
padding-bottom: calc(2.5 * var(--grid-size));
padding: 0;
}
#how-it-works .benefit:nth-child(1n) img {
opacity: 1;
position: relative;
width: 100%;
height: auto;
}
#how-it-works .benefit h3 {
text-align: center;
font-size: 0.3rem;
padding: 0 0.5em 0.25em 0.5em;
}
#how-it-works .benefit h3 em {
position: static;
display: block;
text-align: center;
width: 100%;
height: auto;
padding-bottom: 0.4em;
}
#how-it-works .benefit h3 em:before {
font-size: 0.3rem;
line-height: 1em;
}
#how-it-works .benefit p {
padding: 0 3em;
text-align: center;
}
#how-it-works .benefit img {
padding-bottom: 8em;
}
#how-it-works .benefit:nth-of-type(1n) h3 em {
left: calc(-1.25 * var(--grid-size));
font-size: 50%;
}
#how-it-works p {
font-size: inherit;
}
#how-it-works .benefit::after {
display: none;
}
#how-it-works .benefit h3 em.fa.fa-infinity:before {
font-size: 0.3rem;
line-height: 1em;
}
#how-it-works .benefit h3 em.fa.fa-forward:before {
font-size: 0.26rem;
line-height: 1.55em;
}
#how-it-works .benefit h3 em.fa.fa-new-keys:before {
font-size: 0.3rem;
line-height: 1.5em;
}
#how-it-works .benefit h3 em.fa.fa-hs-typography1:before {
font-size: 0.3rem;
line-height: 1.3em;
}
#how-it-works .benefit h3 em.fa.fa-hs-spade:before {
font-size: 0.26rem;
line-height: 1.5em;
}
#how-it-works .benefit h3 em.fa.fa-hd-double-check:before {
font-size: 0.27rem;
line-height: 1.6em;
}
#faq .content {
padding: calc(2 * var(--grid-size)) calc(1 * var(--grid-size)) 0 calc(1 * var(--grid-size));
}
#faq h2 {
line-height: 1.1;
}
#faq .questions {
flex-wrap: nowrap;
min-height: 640px;
margin-top: calc(var(--grid-size) / 4);
}
#faq .questions dt {
font-size: 0.24rem;
}
#faq .questions dd p {
padding: 0.75em 0;
}
#faq .questions dd p:last-of-type {
padding-bottom: 2em;
}
#faq .questions .parallelograms {
display: none;
}
/* full width questions */
#faq .questions dt,
#faq .questions dd {
order: 1;
width: 100%;
min-width: 100%;
max-width: 100%;
text-align: left;
padding-left: 0;
padding-right: 0;
}
/* full width inline answers */
#faq .questions dd {
margin-left: 0;
max-height: 0;
transition: height 0.25s ease-in-out;
overflow-y: hidden;
}
#faq .questions dt:target + dd {
flex: 0 0 auto;
max-height: none;
}
main > .pricing {
font-size: 100%;
}
.pricing .content {
padding: calc(4 * var(--grid-size)) 0 0 0;
min-height: 1200px;
max-height: auto;
}
.pricing .categories {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 0 calc(2 * var(--grid-size));
font-size: 0.225rem;
}
.pricing .categories > * {
flex: 1 1 calc(100%/3);
width: calc(100%/3);
padding-top: 0;
padding-bottom: 0;
line-height: 1.35;
}
.pricing .categories > *:first-child {
text-align: left;
}
.pricing .categories > *:last-child {
text-align: right;
}
.pricing .categories .feature a::after { content: 'Features'; }
.pricing .categories .short a::after { content: 'Shorts'; }
.pricing .categories .episodic a::after { content: 'TV & Episodic'; }
.pricing table.tiers,
.pricing table.tiers thead.overview {
display: block;
}
.pricing#pricing .overview,
.pricing#shorts .overview,
.pricing#episodic .overview {
height: auto;
width: 100%;
padding-top: calc(1/2 * var(--grid-size));
}
.pricing .overview > tr {
display: flex;
height: 100%;
width: 100%;
margin: 0;
flex-wrap: nowrap;
flex-direction: column;
justify-content: start;
align-items: flex-end;
}
.pricing#pricing .overview th,
.pricing#shorts .overview th,
.pricing#episodic .overview th {
position: relative;
flex: 1 0 auto;
width: 100%;
padding: var(--grid-size) calc(2 * var(--grid-size));
}
.pricing#episodic .overview th {
padding-top: calc(2 * var(--grid-size));
}
#episodic th h3 {
display: inline;
}
#episodic form {
height: calc(3 * var(--grid-size));
}
#episodic-demo form {
height: 0;
}
#episodic .price {
top: calc(2 * var(--grid-size));
width: auto;
height: auto;
line-height: 1.5;
}
#episodic .price::after {
display: none;
}
#episodic [type="number"] {
height: auto;
}
#episodic .stepper {
width: calc(1.5 * var(--grid-size));
}
#episodic .overview th > br {
display: none;
}
#episodic .pricing ul.summary {
padding-top: var(--grid-size);
}
.pricing .tiers .price {
position: absolute;
display: block;
width: calc(3.75 * var(--grid-size));
height: calc(4 * var(--grid-size));
top: calc(var(--grid-size));
right: calc(2 * var(--grid-size));
line-height: 1.5;
text-align: right;
}
.pricing .tiers .price::after {
display: block;
}
.pricing .tiers #demo .price::after,
.pricing .tiers #short-demo .price::after {
display: none;
}
.pricing#pricing .tiers #plus .price {
margin-right: -0.4em;
}
.pricing#pricing .tiers #plus .price::after {
margin-right: 1.35em;
}
.pricing ul.summary {
padding-left: 0;
padding-top: 1.5em;
}
.pricing .overview th::after {
display: none;
}
.pricing .details,
.pricing .button.compare {
display: none;
}
#team .content {
justify-content: left;
padding: calc(3 * var(--grid-size)) calc(2 * var(--grid-size));
}
#team .persons {
margin-top: 0;
}
#team .persons > * {
margin-top: calc(2 * var(--grid-size));
width: calc(7 * var(--grid-size));
}
#team .persons > *:nth-of-type(n+5) {
margin-top: 0;
}
#team .portrait {
width: calc(4 * var(--grid-size));
height: calc(4 * var(--grid-size));
}
#footer .content {
padding: 1em 0.25em 2em 0.25em;
}
#footer .toc > * {
padding: 0 0.5em;
}
#footer .legal {
font-size: 65%;
}
}
@media only screen and (max-width: 768px) {
#team .persons > *:nth-of-type(n+4) {
margin-top: 0;
}
}
@media only screen and (max-width: 601px) {
#team .persons > *:nth-of-type(n+3) {
margin-top: 0;
}
}
/* Responsive phone portrait. */
@media only screen and (max-width: 400px) {
#get-started .cta {
margin: 0;
min-width: 100%;
max-width: 100%;
}
#team .content {
padding: calc(3 * var(--grid-size)) 0;
}
}