@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:ital,wght@0,300;0,400;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
:root {
--background: #EBEBEB;
--primary-colour: #001029;
--text-colour: var(--primary-colour);
--alt-section-bg: white;
--videos-section-bg: var(--background);
--section-bg: #EBEBEB;
--footer-bg: #EBEBEB;
--footer-bg-img: url('data:image/svg+xml;utf8,');
--secondary-button-text: white;
--secondary-button-hover-text: var(--background);
--secondary-button-bg: linear-gradient(180deg, #2c71ff, #2c71ff 25%, #ffffff00 0, #ffffff00 50%, #001029 0, #001029);
--primary-button: var(--primary-colour);
--input-bg: #f1f1f1;
--input-selected: #fafafa;
--input-border: .1rem solid #f5f5f5;
--input-text: var(--text-colour);
--ticker-colour: #bac7da;
}
[data-theme='dark'] {
--background: #04091C;
--primary-colour: #0529A2;
--text-colour: white;
--alt-section-bg: var(--background);
--videos-section-bg: #000d3c;
--section-bg: #000d3c;
--footer-bg: #000d3c;
--footer-bg-img: url('data:image/svg+xml;utf8,');
--secondary-button-text: white;
--secondary-button-hover-text: var(--background);
--secondary-button-bg: linear-gradient(180deg, #2c71ff, #2c71ff 25%, #00112900 0, #00112900 50%, #ffffff 0, #ffffff);
--primary-button: var(--text-colour);
--input-bg: #000d3c;
--input-selected: #27335A;
--input-border: none;
--input-text: #ffffff;
--ticker-colour: #505d91;
}
.page__header {
color: var(--text-colour);
min-height: 100vh;
}
.page__header {
color: var(--text-colour);
min-height: 100vh;
}
span.header-logo__text {
color: var(--text-color);
}
.header {
padding: 3rem 0 4rem;
display: flex;
align-items: center;
justify-content: center
}
.header > .header__focus-trap {
position: absolute;
right: 4rem;
}
@media (min-width: 768px) {
.header {
padding: 4rem 0 6rem
}
}
.page__header main {
display: flex;
flex-direction: column;
align-items: center;
}
.page__header--home main.grid {
display: flex;
flex-direction: row;
align-items: flex-start;
}
main span.heading {
text-align: center;
line-height: 100%;
font-size: 3.8rem;
font-weight: bold;
text-transform: uppercase;
}
.page__header--home main p.subheading {
margin-top: -7rem;
}
main p.subheading {
margin-bottom: 2rem;
font-family: Montserrat, sans-serif;
font-style: italic;
font-size: 1.8rem;
text-align: center;
padding: 0 1.5rem;
}
.page__header--extras main p.subheading {
margin-top: 2rem;
}
@media (min-width: 320px) {
main span.heading {
font-size: 4.3rem;
}
.page__header--extras main span.heading {
font-size: 3.8rem;
}
.primary-button {
padding: 2.5rem 4rem !important;
font-size: 2rem !important;
}
.page__header--home main p.subheading {
margin-top: -5rem;
font-size: 2.1rem;
}
}
@media (min-width: 375px) {
main span.heading {
font-size: 5rem;
}
.page__header--extras main span.heading {
font-size: 4.3rem;
}
.page__header--home main p.subheading {
margin-top: -6rem;
}
main p.subheading {
font-size: 2.2rem;
}
}
@media (min-width: 410px) {
main span.heading {
font-size: 5.5rem;
}
.page__header--extras main span.heading {
font-size: 5rem;
}
}
@media (min-width: 700px) {
.page__header--extras main span.heading {
font-size: 7rem;
}
main span.heading {
font-size: 10rem;
}
main p.subheading {
padding: 0 3rem;
font-size: 3.2rem;
}
.page__header--home main p.subheading {
margin-top: -18rem;
}
.hero__image {
margin-top: -9rem !important
}
.header {
padding: 3rem 0 4rem;
display: flex;
justify-content: space-between
}
.primary-button {
margin-bottom: 5rem;
padding: 2.5rem 7rem !important;
font-size: 2.5rem !important;
}
}
@media (min-width: 1024px) {
.page__header--extras main span.heading {
font-size: 8rem;
}
main span.heading {
margin-top: 10rem;
font-size: 7.5rem;
text-align: left;
}
main p.subheading {
font-size: 2rem;
padding: 0;
text-align: left;
margin: 4rem 0 !important;
}
.hero__image {
margin-top: -5rem !important;
width: 155% !important;
margin-left: -9rem !important;
}
.primary-button {
font-size: 2rem !important;
width: fit-content !important;
}
main.grid .column {
display: flex;
flex-direction: column;
}
main.grid .column:first-child {
width: 50%;
margin-left: 10rem;
}
main.grid .column:last-child {
width: 100%;
}
}
@media (min-width: 1280px) {
.hero__image {
margin-top: -9rem !important;
width: 115% !important;
margin-left: -8rem !important;
}
}
.hero__image {
margin-top: -5rem;
width: 130%;
filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.2));
}
.navigation__item {
cursor: pointer;
}
.navigation__item-dropdown {
position: relative;
}
.navigation__dropdown {
position: absolute;
top: 1.5rem;
padding-top: 1.25rem;
transition: all 0.3s ease;
overflow: hidden;
}
@media (max-width: 768px) {
.navigation__dropdown {
position: relative;
padding-top: 0;
margin-bottom: 1.25rem;
padding-bottom: 0;
}
}
.navigation__dropdown--opened::before {
content: '';
position: absolute;
top: 1rem;
left: 1rem;
z-index: 50;
height: 1.25rem;
width: 1.25rem;
transform: rotate(45deg);
background: white;
}
@media (max-width: 768px) {
.navigation__dropdown::before {
display: none;
}
}
[data-theme='dark'] .navigation__dropdown::before {
background: #000d3c;
}
.navigation__dropdown__container {
background: white;
}
[data-theme='dark'] .navigation__dropdown__container {
background: #000d3c;
}
.navigation__dropdown__container--inner {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2.5rem;
}
@media (max-width: 768px) {
.navigation__dropdown__container--inner {
align-items: center;
}
}
.navigation__link--dropdown {
width: fit-content;
white-space: nowrap;
text-transform: uppercase;
font-size: 1.5rem;
}
@media (min-width: 768px) {
.navigation__link--dropdown {
font-size: 1.2rem;
}
}
.navigation__link--dropdown::after {
display: none;
}
button.themeButton {
cursor: pointer;
background: none;
border: none;
}
button.themeButton svg {
fill: var(--text-colour);
}
.page__header--extras {
min-height: auto;
}
.page__header--extras main .heading {
text-align: center;
}
.page__header--extras main p.subheading {
font-style: normal;
text-align: center;
}
@media (min-width: 768px) {
.page__header--extras .page__title {
font-size: 6.5rem;
}
}
.section {
padding: 6rem 0;
width: 100%;
color: var(--text-colour);
background-color: var(--section-bg);
}
section.section {
display: flex;
flex-direction: column;
align-items: center;
}
.alt-section {
background-color: var(--alt-section-bg);
color: var(--text-colour);
}
.section h1 {
text-align: center;
font-family: 'Playfair Display';
font-weight: 300;
font-size: 4rem;
text-transform: uppercase;
padding: 2rem 0;
}
@media (min-width: 1200px) {
.section h1 {
font-size: 5rem;
}
}
.videos__section {
background-color: var(--videos-section-bg);
color: var(--text-colour);
display: grid;
grid-template-columns: 1fr;
justify-items: center;
margin-top: 5rem;
}
@media (max-width: 400px) {
.videos__section > div > div > div {
margin: 0;
}
}
.video__panel {
width: 100%;
}
.video__info {
display: flex;
flex-direction: column;
align-items: center;
}
.video {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin: 3rem 0 0 0;
}
.video__container iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.video__container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.video__description {
display: block;
font-family: 'Montserrat';
font-weight: 400;
font-size: 1.8rem;
line-height: 1.1;
padding: 1.2rem 0;
}
.video__title {
display: block;
font-family: 'Playfair Display';
font-weight: 700;
font-size: 3rem;
text-align: center;
line-height: 1.1;
padding: 2rem 0;
}
.parallax-mobile > .parallax-inner {
display: flex;
}
@media (min-width: 768px) {
.featured__video {
margin-top: 5rem;
}
.video {
flex-direction: column;
align-items: center;
padding-top: 4rem;
justify-content: center;
max-width: 85%;
}
.video__panel {
transition: transform ease .4s;
width: 100%;
height: 100%;
}
.video__description {
margin: 2rem;
padding-bottom: 5rem;
text-align: start;
}
.video__title {
margin: 2rem;
text-align: start;
}
}
@media (min-width: 1024px) {
.video {
max-width: 75%;
}
}
.videos__section a:hover {
color: var(--background);
background-color: var(--primary-colour);
}
.socials {
fill: var(--text-colour);
margin-top: 3rem;
display: flex;
flex-direction: row;
justify-content: center;
}
.socials a {
margin: 0 0.5rem;
width: 25px;
}
@media (min-width: 1024px) {
.socials {
margin-top: 0rem;
flex-direction: column;
}
.socials a {
margin: 0.5rem 0;
width: 25px;
}
}
.footer {
padding: 3.4rem 0 2.8rem;
background: var(--footer-bg);
color: var(--text-colour);
transition: background .6s cubic-bezier(.645,.045,.355,1);
}
@media (min-width: 768px) {
.footer {
padding:4.2rem 0 3.3rem;
background-image: var(--footer-bg-img);
background-size: 25%;
background-repeat: no-repeat;
background-position: 55% 3rem;
}
}
@media (min-width: 992px) {
.footer {
padding:5.8rem 0 5.2rem
}
}
@media (min-width: 1440px) {
.footer {
background-position: 55% -3rem;
}
}
body.dark .footer {
background: #040a18
}
@media (min-width: 768px) {
.footer__main {
display: flex;
justify-content: space-between;
}
}
.footer__base {
display: grid;
padding: 0
}
@media (min-width: 768px) {
.footer__base {
padding:4rem 0 0;
grid-template-columns: repeat(2,1fr)
}
}
.footer__connect {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.4rem;
font-weight: 400
}
@media (min-width: 768px) {
.footer__connect {
font-size:1.3rem;
align-items: flex-end;
text-align: right
}
}
.footer__connect-list {
list-style: none;
margin: 0 0 2.5rem
}
.footer__connect-item+.footer__connect-item {
margin: .2rem 0 0
}
.footer__connect-link {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8);
text-decoration: none
}
body.dark .footer__connect-link {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.footer__connect-link {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .footer__connect-link {
background: rgba(44,113,255,0)
}
.footer__connect-link:active,
.footer__connect-link:focus,
.footer__connect-link:hover {
background: rgba(93,216,233,.3);
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .footer__connect-link:active,
body.dark .footer__connect-link:focus,
body.dark .footer__connect-link:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.footer__legalese {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 2rem 0 0
}
@media (min-width: 768px) {
.footer__legalese {
justify-content:flex-end;
margin: 0
}
}
.footer__navigation {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
}
@media (min-width: 768px) {
.footer__navigation {
text-align: start;
gap: 2.2rem;
}
}
.footer__navigation--tertiary {
display: block
}
.footer__list {
list-style: none
}
.footer__list--inline {
display: flex
}
@media (min-width: 768px) {
.footer__list--inline {
display:grid;
grid-template-columns: repeat(2,1fr)
}
}
.footer__list-item {
text-align: start;
}
.footer__list-item+.footer__list-item {
margin: 1em 0 0
}
.footer__list-item--inline+.footer__list-item--inline {
margin: 0 0 0 2.2rem
}
@media (min-width: 768px) {
.footer__list-item--inline+.footer__list-item--inline {
margin:0
}
}
.footer__list-item--hidden {
display: none
}
.footer__list-link {
font-size: 1.1rem
}
.footer__list-link--primary {
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
font-size: 1.2rem;
letter-spacing: .2rem;
position: relative
}
.footer__list-link--primary:after {
content: "";
display: block;
height: .1rem;
background: currentColor;
position: absolute;
left: .1rem;
bottom: -.2rem;
opacity: 0;
width: 0;
transition: width .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)
}
.footer__list-link--primary:active:after,
.footer__list-link--primary:focus:after,
.footer__list-link--primary:hover:after,
.footer__list-link--primary:visited:after {
width: calc(100% - .5rem);
opacity: .6
}
.footer__list-link:not(.footer__list-link--primary) {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8)
}
body.dark .footer__list-link:not(.footer__list-link--primary) {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.footer__list-link:not(.footer__list-link--primary) {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .footer__list-link:not(.footer__list-link--primary) {
background: rgba(44,113,255,0)
}
.footer__list-link:not(.footer__list-link--primary):active,
.footer__list-link:not(.footer__list-link--primary):focus,
.footer__list-link:not(.footer__list-link--primary):hover {
background: rgba(93,216,233,.3);
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .footer__list-link:not(.footer__list-link--primary):active,
body.dark .footer__list-link:not(.footer__list-link--primary):focus,
body.dark .footer__list-link:not(.footer__list-link--primary):hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.footer__social {
display: none
}
@media (min-width: 768px) {
.footer__social {
display:block
}
}
.footer__copyright {
font-size: 1.1rem;
margin: 0
}
@media (min-width: 768px) {
.footer__copyright {
text-align:right
}
}
.footer__copyright a {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8);
text-decoration: none
}
body.dark .footer__copyright a {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.footer__copyright a {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .footer__copyright a {
background: rgba(44,113,255,0)
}
.footer__copyright a:active,
.footer__copyright a:focus,
.footer__copyright a:hover {
background: rgba(93,216,233,.3);
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .footer__copyright a:active,
body.dark .footer__copyright a:focus,
body.dark .footer__copyright a:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.footer__copyright-span {
display: block
}
@media (min-width: 576px) {
.footer__copyright-span {
display:inline
}
}
@media (min-width: 768px) {
.footer__copyright-span {
display:block
}
}
@media (min-width: 992px) {
.footer__copyright-span {
display:inline
}
}
.footer__logo {
color: currentColor;
transition: color .3s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.footer__logo {
margin-left:2.6rem
}
}
.footer__logo:active,
.footer__logo:focus,
.footer__logo:hover {
color: #127f95
}
body.dark .footer__logo:active,
body.dark .footer__logo:focus,
body.dark .footer__logo:hover {
color: #17a6c3
}
.footer__logo svg {
width: 2.5rem;
fill: currentColor
}
@media (min-width: 768px) {
.footer__logo svg {
width:2rem
}
}
body {
background: var(--background)
}
.arrow-button .secondary-button {
border: .2rem solid var(--secondary-button);
color: var(--secondary-button-text);
}
.arrow-button.secondary-button:active,
.arrow-button.secondary-button:focus,
.arrow-button.secondary-button:hover {
color: var(--secondary-button-hover-text);
background: var(--text-colour);
}
.arrow-button .primary-button {
border: .2rem solid var(--secondary-button);
color: var(--secondary-button-text);
}
.arrow-button.primary-button:active,
.arrow-button.secondary-button:focus,
.arrow-button.secondary-button:hover {
color: var(--secondary-button-hover-text);
background: var(--text-colour);
}
.arrow-button:active,
.arrow-button:focus,
.arrow-button:hover {
color: var(--background);
background: var(--text-colour);
}
.arrow-button {
text-transform: uppercase;
text-decoration: none;
font-size: 1.4rem;
line-height: 1;
letter-spacing: .1rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 1.3rem 1.6rem;
border: .2rem solid var(--text-colour);
color: var(--text-colour);
background: rgba(0,0,0,0);
opacity: 1;
position: relative;
overflow: hidden;
cursor: pointer;
transition: color .3s cubic-bezier(.645,.045,.355,1),border-color .3s cubic-bezier(.645,.045,.355,1),background .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)
}
.arrow-button__inner {
display: flex;
justify-content: center;
z-index: 1;
width: 100%;
max-height: 1em
}
@media (min-width: 576px) {
.arrow-button__inner {
justify-content:space-between
}
}
a {
text-decoration: none;
}
.arrow-button svg {
transform: rotate(-90deg);
width: 1.1rem;
margin: -.15rem 0 0 .5rem
}
@media (min-width: 576px) {
.arrow-button svg {
margin-left:1.8rem
}
}
@media (min-width: 576px) {
.arrow-button {
display:inline-flex;
width: max-content;
min-width: 20rem
}
}
@media (min-width: 768px) {
.arrow-button {
background:0 0
}
.arrow-button:before {
content: "";
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400%;
z-index: 0;
background-image: var(--secondary-button-bg);
transform: translate3d(0,-25%,0);
transition: transform .3s cubic-bezier(.645,.045,.355,1),background-image .6s cubic-bezier(.645,.045,.355,1)
}
.arrow-button:active,
.arrow-button:focus,
.arrow-button:hover {
background: 0 0
}
.arrow-button:active:before,
.arrow-button:focus:before,
.arrow-button:hover:before {
transform: translate3d(0,-50%,0)
}
}
main .primary-button {
cursor: pointer;
margin-bottom: 5rem;
padding: 2.5rem 4rem;
border: none;
color: white;
background-color: var(--primary-colour);
border: 3px solid var(--primary-colour);
font-size: 1.7rem;
font-family: Montserrat, sans-serif;
font-weight: 800;
transition: all 0.2s;
}
main .primary-button:hover {
border-color: var(--primary-button);
color: var(--primary-button);
background: none;
}
@media (min-width: 320px) {
main .primary-button {
padding: 2.5rem 4rem !important;
font-size: 2rem !important;
}
}
@media (min-width: 1024px) {
main .primary-button {
font-size: 2rem !important;
width: fit-content !important;
}
}
.contact__column {
width: 100%;
}
.contact {
padding-top: 6rem;
padding-bottom: 6rem
}
@media (min-width: 768px) {
.contact {
padding-top:8.7rem;
padding-bottom: 8.7rem
}
}
.contact__content {
font-size: 1.6rem
}
.contact__column+.contact__column {
margin-top: 2.6rem
}
@media (min-width: 992px) {
.contact__column+.contact__column {
margin-top:0
}
}
.contact__title {
display: none
}
.contact__note {
font-size: 1.1rem;
font-style: italic;
margin: 3.9rem 0 0;
max-width: 32rem;
opacity: .8
}
.contact__note p {
margin: 0;
display: inline
}
.contact__address {
display: block;
margin: 1em 0 0
}
.contact__address span:after {
content: ", "
}
.contact__address span:last-child:after,
.contact__address span:nth-last-child(2):after {
content: ""
}
.contact__address span:last-child {
display: block
}
.contact__address a {
display: none
}
.contact__url {
display: block;
margin: 1em 0 0
}
.arrow-button--contact:active,
.arrow-button--contact:focus,
.arrow-button--contact:hover {
color: #111;
background: #49dced
}
@media (min-width: 768px) {
.arrow-button--contact {
background:0 0
}
.arrow-button--contact:before {
background-image: linear-gradient(180deg,#2c71ff,#2c71ff 25%,#fff 0,#fff 50%,#49dced 0,#49dced)
}
}
.arrow-button--submitting {
cursor: not-allowed !important;
pointer-events: none !important;
background: var(--input-bg);
color: var(--input-text);
border: var(--input-border);
}
.contact-form {
opacity: 1;
transform: translateZ(0);
transition: opacity .3s cubic-bezier(.645,.045,.355,1)
}
.contact-form--disabled {
opacity: .4
}
.contact-form__form-error,
.contact__form-error {
color: #d53f3f
}
.contact-form__success {
font-size: 1.8rem;
color: #35a593
}
.contact-form__section {
margin: 0 0 1.5rem
}
.contact-form__section--submit {
margin: 2.6rem 0;
grid-gap: 3rem;
display: flex;
flex-direction: column;
}
.contact-form__label {
display: none
}
.contact-form__input {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
width: 100%;
color: var(--input-text);
font-size: 1.4rem;
line-height: 1;
font-weight: 700;
padding: 1.3rem 1.9rem;
border: var(--input-border);
background: var(--input-bg);
transition: color .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1),box-shadow .6s cubic-bezier(.645,.045,.355,1),border .6s cubic-bezier(.645,.045,.355,1)
}
.contact-form__input:active,
.contact-form__input:focus,
.contact-form__input:hover {
background: var(--input-selected);
box-shadow: inset 0 0 0 100rem var(--input-selected);
border-color: var(--input-border);
}
.contact-form__input:-ms-input-placeholder {
color: var(--input-text);
opacity: .5;
-ms-transition: color .6s cubic-bezier(.645,.045,.355,1);
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
.contact-form__input::placeholder {
color: var(--input-text);
opacity: .5;
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
.quote {
z-index: 1
}
.quote__inner {
max-width: 90rem;
margin: 0 auto
}
@media (min-width: 768px) {
.quote__inner {
padding-left:8.3rem;
padding-right: 8.3rem
}
}
@media (min-width: 992px) {
.quote__inner {
padding-left:11.6rem;
padding-right: 11.6rem
}
}
.quote__text {
text-align: center;
font-size: 1.6rem;
line-height: 1.3;
font-weight: 500
}
@media (min-width: 576px) {
.quote__text {
font-size:1.8rem
}
}
@media (min-width: 768px) {
.quote__text {
font-size:2rem
}
}
@media (min-width: 992px) {
.quote__text {
font-size:2.2rem
}
}
.quote__footer {
text-align: center;
padding: 0.8rem 0 0;
font-size: 1.2rem
}
@media (min-width: 768px) {
.quote__footer {
font-size:1.4rem;
padding: 1.0rem 0 0
}
}
@media (min-width: 992px) {
.quote__footer {
padding: 1.0rem 0 0
}
}
.quote__author {
text-align: center;
padding: 2.8rem 0;
font-size: 1.2rem
}
@media (min-width: 768px) {
.quote__author {
font-size:1.4rem;
padding: 2.2rem 0
}
}
@media (min-width: 992px) {
.quote__author {
padding:2.6rem 0
}
}
.quote__logo {
display: flex;
justify-content: center;
width: 100%
}
.quote__logo--image {
fill: var(--text-colour);
width: 100%;
height: 50px;
}
.quote__logo--image > svg {
width: 100%;
height: 100%;
}
a.quote__info {
color: var(--text-colour);
text-decoration: none
}
.quotes-carousel {
margin: 10rem 0 0;
position: relative;
min-height: 30rem;
height: 100% !important;
transition: background .6s cubic-bezier(.645,.045,.355,1),color .6s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.quotes-carousel {
height:44rem
}
}
@media (min-width: 992px) {
.quotes-carousel {
margin:9.2rem 0 0;
height: 55.5rem
}
}
.quotes-carousel__quote {
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity .6s cubic-bezier(.645,.045,.355,1)
}
.quotes-carousel__quote--active {
opacity: 1;
pointer-events: all
}
.quotes-carousel__button {
display: none;
position: absolute;
top: 0;
bottom: 0;
text-indent: 110%;
overflow: hidden;
white-space: nowrap;
border: none;
background: 0 0;
z-index: 2
}
@media (min-width: 768px) {
.quotes-carousel__button {
display:block;
width: 8.3rem
}
}
@media (min-width: 992px) {
.quotes-carousel__button {
display:block;
width: 15%
}
}
@media (min-width: 1200px) {
.quotes-carousel__button {
display:block;
width: 20%
}
}
.section#testimonials {
padding-bottom: 0rem;
}
.about__content {
padding: 4rem 0;
max-width: 85%;
display: flex;
flex-direction: row;
}
.about__image {
display: none;
}
.about__content > * {
flex-grow: 1;
width: 100%;
}
.about__content > .about__image {
box-shadow: 20px 20px 50px #00000017;
}
@media (min-width: 768px) {
.about__image {
display: block;
}
}
.secret-page__content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.secret-page__content iframe {
max-width: 100%;
}
.secret-page {
padding-top: 6rem
}
@media (min-width: 768px) {
.secret-page {
padding-top:8.7rem
}
}
.secret-page__content {
font-family: 'Open Sans';
font-size: 1.6rem
}
@media (min-width: 768px) {
.secret-page__content {
font-size:1.6rem;
column-gap: 7rem
}
.secret-page__content dd,
.secret-page__content dt,
.secret-page__content ol,
.secret-page__content p,
.secret-page__content section,
.secret-page__content ul {
break-inside: avoid
}
}
@media (min-width: 1200px) {
.secret-page__content {
column-gap:9rem
}
}
.secret-page__content a {
padding: .15em;
margin: 0 -.15em;
text-decoration: underline
}
@media not all and (hover: none) {
.secret-page__content a {
background: rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .secret-page__content a {
background: rgba(44,113,255,0)
}
.secret-page__content a:active,
.secret-page__content a:focus,
.secret-page__content a:hover {
background: #070414;
color: #fff;
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .secret-page__content a:active,
body.dark .secret-page__content a:focus,
body.dark .secret-page__content a:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.promotion__image {
max-width: 20%;
}
.secret-page__videos {
grid-template-columns: 1fr;
}
.rate {
display: flex;
flex-direction: column;
align-items: center;
}
.rate > span {
padding: 5rem 0;
}
#ratingComponent {
cursor: pointer;
padding: 2rem 0;
}
#rate {
padding: 7rem 0;
}
#rate h1 {
font-size: 3rem;
padding: 1rem 0;
text-align: center;
}
#rate a {
text-decoration: underline;
cursor: pointer;
}
#rate svg {
margin: 0 1rem
}
.carousel__side {
background: none;
border: none;
width: 50px;
}
@media (max-width: 400px) {
.carousel__side {
width: 28px;
}
}
.carousel__side:hover {
cursor: pointer;
}
.carousel__side:disabled span {
color: var(--secondary-button-bg);
}
.carousel__side span {
color: var(--primary-button);
}
@media (min-width: 768px) {
.carousel__side span {
font-size: 30pt
}
}
.carousel__pagination--numbers span {
font-size: 2rem;
}
@media (min-width: 768px) {
.carousel__pagination--dots {
margin-bottom: 6rem !important;
}
.dot {
margin: 0 20px !important;
width: 17px;
height: 17px;
}
}
.carousel__pagination--dots {
display: flex;
flex-direction: row;
margin-bottom: 4rem !important;
}
.carousel__pagination--dots .dot {
padding: 0;
margin: 0 10px;
width: 15px;
height: 15px;
border-radius: 100%;
border: solid 2px var(--text-colour);
background: none;
}
.carousel__pagination--dots .dot-filled {
background-color: var(--text-colour);
}
.carousel__pagination {
margin: 2rem 0;
}
.carousel__pagination--numbers span {
font-size: 2rem;
}
@keyframes ticker {
from {
width: 0%
}
to {
width: 100%
}
}
.carousel__ticker {
/* JavaScript controls this width so the timer only runs while the
testimonials are actually being viewed. */
width: 0%;
height: 10px;
background-color: var(--ticker-colour);
}
.container {
margin: 0 auto;
padding-left: 3rem;
padding-right: 3rem;
max-width: 160rem
}
@media (min-width: 768px) {
.container {
padding-left:8.3rem;
padding-right: 8.3rem
}
}
@media (min-width: 992px) {
.container {
padding-left:11.6rem;
padding-right: 11.6rem
}
}
.container:after {
content: "";
display: table;
clear: both
}
.container--compressed {
padding: 0 3rem
}
@media (min-width: 768px) {
.container--compressed {
padding:0 3.7rem
}
}
@media (min-width: 992px) {
.container--compressed {
padding:0 6.9rem
}
}
@media (min-width: 1600px) {
.container--compressed {
padding:0 11.6rem
}
}
.container__fullpage {
margin: 0 auto;
padding-left: 0rem;
padding-right: 0;
max-width: 100vw;
max-height: inherit;
}
@media (min-width: 768px) {
.container__fullpage {
padding-left:8.3rem;
padding-right: 0;
}
}
@media (min-width: 992px) {
.container__fullpage {
padding-left:11.6rem;
padding-right: 0;
}
}
.container__fullpage:after {
content: "";
display: table;
clear: both
}
.header-logo {
color: currentColor;
text-align: left
}
.header-logo svg {
fill: currentColor;
width: 3.1rem
}
.header-logo__link {
display: flex;
align-items: center;
color: inherit;
text-decoration: none
}
.header-logo__text {
font-weight: 700;
font-size: 4rem;
text-transform: uppercase;
letter-spacing: .2rem;
line-height: 1.2;
width: 9.5rem;
margin: 0 0 0 -0.5rem
}
@media (min-width: 992px) {
.header-logo__text {
font-size: 5rem
}
}
@media (min-width: 768px) {
.header-logo--dark {
color:#111;
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .header-logo--dark {
color: #fff
}
}
.navigation-burger {
display: block;
width: 4.6rem;
height: 4.2rem;
padding: 1rem;
margin: -.7rem -1.4rem 0 0;
background: 0 0;
border: none;
cursor: pointer;
position: relative;
z-index: 110;
color: currentColor
}
.navigation-burger__icon {
display: block;
width: 2.6rem;
height: 2.2rem;
padding: .1rem;
position: relative
}
.navigation-burger__figure:after,.navigation-burger__figure:before {
content: "";
display: block;
height: .2rem;
background: currentColor;
margin: 0 0 .4rem;
opacity: 1;
transition: all .3s cubic-bezier(.645,.045,.355,1)
}
.navigation-burger__figure--first:before {
width: 80%
}
.navigation-burger__figure--first:after {
width: 87%
}
.navigation-burger__figure--second:before {
width: 60%
}
.navigation-burger__figure--second:after {
width: 70%
}
.navigation-burger__label {
display: none
}
.navigation-burger--opened {
color: var(--text-colour)
}
body.dark .navigation-burger--opened {
color: #fff
}
.navigation-burger--opened .navigation-burger__figure--first:before {
width: 130%;
transform: rotate(45deg) translate3d(.4rem,.8rem,0)
}
.navigation-burger--opened .navigation-burger__figure--first:after,.navigation-burger--opened .navigation-burger__figure--second:before {
width: 0;
opacity: 0
}
.navigation-burger--opened .navigation-burger__figure--second:after {
width: 130%;
transform: rotate(-45deg) translate3d(.5rem,-.9rem,0)
}
@media (min-width: 768px) {
.navigation-burger {
display:none
}
}
.sun-moon {
display: flex;
align-items: center;
justify-content: center;
transition: transform .6s cubic-bezier(.645,.045,.355,1);
transform: scale(1) rotate(0)
}
.theme-toggle:active .sun-moon,.theme-toggle:focus .sun-moon,.theme-toggle:hover .sun-moon {
transform: scale(1) rotate(12deg)
}
body.dark .theme-toggle:active .sun-moon,body.dark .theme-toggle:focus .sun-moon,body.dark .theme-toggle:hover .sun-moon {
transform: scale(1.2) rotate(-45deg)
}
@media (min-width: 768px) {
.sun-moon {
transform:scale(.7)
}
.theme-toggle:active .sun-moon,.theme-toggle:focus .sun-moon,.theme-toggle:hover .sun-moon {
transform: scale(.7) rotate(12deg)
}
body.dark .theme-toggle:active .sun-moon,body.dark .theme-toggle:focus .sun-moon,body.dark .theme-toggle:hover .sun-moon {
transform: scale(.8) rotate(-45deg)
}
}
body.dark .sun-moon {
transform: scale(1.1) rotate(-45deg)
}
@media (min-width: 768px) {
body.dark .sun-moon {
transform:scale(.8) rotate(-45deg)
}
}
.sun-moon__inner {
display: flex;
align-items: center;
justify-content: center;
width: 4.8rem;
height: 4.8rem;
position: absolute;
overflow: hidden;
cursor: pointer
}
.sun-moon__circle {
display: block;
position: absolute;
background: #111;
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
transform: scale(1);
transition: transform .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .sun-moon__circle {
background: #fff;
transform: scale(1.2)
}
@media (min-width: 768px) {
.sun-moon__circle,body.dark .sun-moon__circle {
background:currentColor
}
}
.sun-moon__cutout {
display: block;
opacity: 0;
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
transform: translateX(2.6rem) scale(1);
transition: transform .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1);
transition-delay: 0s
}
.theme-toggle:active .sun-moon__cutout,.theme-toggle:focus .sun-moon__cutout,.theme-toggle:hover .sun-moon__cutout {
transform: translateX(.6rem) scale(1.2)
}
body.dark .sun-moon__cutout {
transform: translateX(.6rem) scale(1);
transition-delay: .1s;
background: #101a31;
opacity: 1
}
@media (min-width: 768px) {
body.dark .sun-moon__cutout {
background:#131f37
}
}
@media (min-width: 768px) {
body.dark .sun-moon__cutout--dark {
background:#0f1727
}
}
.sun-moon__ray {
position: absolute;
background: #111;
width: .8rem;
height: .2rem;
border-radius: .2rem;
transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1),width .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1)
}
.theme-toggle:active .sun-moon__ray,.theme-toggle:focus .sun-moon__ray,.theme-toggle:hover .sun-moon__ray {
width: 1.1rem
}
body.dark .sun-moon__ray {
background: #fff
}
@media (min-width: 768px) {
.sun-moon__ray,body.dark .sun-moon__ray {
background:currentColor
}
}
.sun-moon__ray--first {
transform: rotate(0) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--first,.theme-toggle:focus .sun-moon__ray--first,.theme-toggle:hover .sun-moon__ray--first {
transform: rotate(0) translateX(1.75rem)
}
.sun-moon__ray--second {
transform: rotate(45deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--second,.theme-toggle:focus .sun-moon__ray--second,.theme-toggle:hover .sun-moon__ray--second {
transform: rotate(45deg) translateX(1.75rem)
}
.sun-moon__ray--third {
transform: rotate(90deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--third,.theme-toggle:focus .sun-moon__ray--third,.theme-toggle:hover .sun-moon__ray--third {
transform: rotate(90deg) translateX(1.75rem)
}
.sun-moon__ray--fourth {
transform: rotate(135deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--fourth,.theme-toggle:focus .sun-moon__ray--fourth,.theme-toggle:hover .sun-moon__ray--fourth {
transform: rotate(135deg) translateX(1.75rem)
}
.sun-moon__ray--fifth {
transform: rotate(180deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--fifth,.theme-toggle:focus .sun-moon__ray--fifth,.theme-toggle:hover .sun-moon__ray--fifth {
transform: rotate(180deg) translateX(1.75rem)
}
.sun-moon__ray--sixth {
transform: rotate(225deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--sixth,.theme-toggle:focus .sun-moon__ray--sixth,.theme-toggle:hover .sun-moon__ray--sixth {
transform: rotate(225deg) translateX(1.75rem)
}
.sun-moon__ray--seventh {
transform: rotate(270deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--seventh,.theme-toggle:focus .sun-moon__ray--seventh,.theme-toggle:hover .sun-moon__ray--seventh {
transform: rotate(270deg) translateX(1.75rem)
}
.sun-moon__ray--eighth {
transform: rotate(315deg) translateX(1.5rem)
}
.theme-toggle:active .sun-moon__ray--eighth,.theme-toggle:focus .sun-moon__ray--eighth,.theme-toggle:hover .sun-moon__ray--eighth {
transform: rotate(315deg) translateX(1.75rem)
}
body.dark .sun-moon__ray {
transform: scaleX(.01);
opacity: 0
}
.theme-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin: -2rem;
padding: 0;
border: none;
background: 0 0;
transform: translateZ(0)
}
@media (min-width: 768px) {
.theme-toggle {
top:-.2rem;
color: #fff
}
}
.theme-toggle__audible,.theme-toggle__label {
display: none
}
@media (min-width: 768px) {
.theme-toggle--dark {
color:#111;
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .theme-toggle--dark {
color: #fff
}
}
.navigation {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--background);
color: var(--text-colour);
font-family: Montserrat;
z-index: 100;
/* transition: transform .3s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1),color .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1); */
transform: translate3d(100%,0,0);
opacity: .5
}
body.dark .navigation {
color: #fff;
background: #101a31
}
@media (min-width: 768px) {
.navigation,body.dark .navigation {
color:currentColor;
background: 0 0
}
}
.navigation__list {
list-style: none
}
@media (min-width: 768px) {
.navigation__list {
display:flex;
align-items: center;
width: 100%;
margin: .5rem 0 0
}
}
.navigation__item {
height: 100%;
display: block;
text-align: center;
font-size: 2rem;
margin-top: .6em;
transform: matrix3d(1,0,0,0,0,0,1,0,0,-1,0,0,50,0,0,1);
opacity: 0
}
@media (min-width: 768px) {
.navigation__item {
transform:none;
opacity: 1;
transition: none;
font-size: 1.1rem;
margin: 0;
position: relative
}
}
.navigation__item:first-child {
margin-top: 0
}
.navigation__item--social {
margin-top: 1.2em
}
@media (min-width: 768px) {
.navigation__item--social {
display:none
}
}
.navigation__item--toggle {
margin-top: 3rem;
transform: none;
min-height: 2.8rem;
display: flex;
align-items: center;
justify-content: center
}
@media (min-width: 768px) {
.navigation__item--toggle {
margin-top:0;
padding: 0 1.4rem 0 2rem;
min-height: 0
}
}
@media (min-width: 992px) {
.navigation__item--toggle {
padding-left:1rem
}
}
@media (min-width: 768px) {
.navigation__item--hide-desktop {
display:none
}
}
.navigation__item--hide-mobile {
display: none
}
@media (min-width: 768px) {
.navigation__item--hide-mobile {
display:block
}
}
@media (min-width: 768px) {
.navigation__item+.navigation__item {
transition:margin .3s cubic-bezier(.645,.045,.355,1);
margin-left: 1.6rem
}
}
@media (min-width: 992px) {
.navigation__item+.navigation__item {
margin-left:4rem
}
}
@media (min-width: 1200px) {
.navigation__item+.navigation__item {
margin-left:5rem
}
}
.navigation__link {
color: currentColor;
text-transform: uppercase;
font-weight: 500;
text-decoration: none;
padding: .5rem;
letter-spacing: .2rem;
opacity: 1;
transition: opacity .3s cubic-bezier(.645,.045,.355,1),color .6s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.navigation__link:after {
content:"";
display: block;
height: .2rem;
background: currentColor;
position: absolute;
left: .5rem;
bottom: -.5rem;
opacity: 0;
width: 0;
transition: width .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)
}
}
.navigation__link:active,.navigation__link:focus,.navigation__link:hover,.navigation__link:visited {
opacity: .6
}
@media (min-width: 768px) {
.navigation__link:active,.navigation__link:focus,.navigation__link:hover,.navigation__link:visited {
opacity:1
}
.navigation__link:active:after,.navigation__link:focus:after,.navigation__link:hover:after,.navigation__link:visited:after {
width: calc(100% - 1.2rem);
opacity: .6
}
}
.navigation__link--current {
opacity: .6
}
@media (min-width: 768px) {
.navigation__link--current {
opacity:1
}
.navigation__link--current:after {
width: calc(100% - 1.2rem);
opacity: .6
}
}
@media (min-width: 768px) {
.navigation__link--dark {
color:#111
}
body.dark .navigation__link--dark {
color: #fff
}
}
.navigation--opened {
transform: translateZ(0);
opacity: 1
}
.navigation--opened .navigation__item {
transform: none;
opacity: 1;
transition: opacity .3s cubic-bezier(.645,.045,.355,1),transform .3s cubic-bezier(.645,.045,.355,1)
}
.navigation--opened .navigation__item:first-child {
transition-delay: .15s
}
.navigation--opened .navigation__item:nth-child(2) {
transition-delay: .3s
}
.navigation--opened .navigation__item:nth-child(3) {
transition-delay: .45s
}
.navigation--opened .navigation__item:nth-child(4) {
transition-delay: .6s
}
.navigation--opened .navigation__item:nth-child(5) {
transition-delay: .75s
}
.navigation--opened .navigation__item:nth-child(6) {
transition-delay: .9s
}
.navigation--opened .navigation__item:nth-child(7) {
transition-delay: 1.05s
}
.navigation--opened .navigation__item:nth-child(8) {
transition-delay: 1.2s
}
.navigation--opened .navigation__item:nth-child(9) {
transition-delay: 1.35s
}
.navigation--opened .navigation__item:nth-child(10) {
transition-delay: 1.5s
}
@media (min-width: 768px) {
.navigation {
position:static;
top: auto;
left: auto;
width: auto;
height: auto;
margin: 0 -.5rem 0 0;
background: 0 0;
z-index: 1;
transform: translateZ(0);
opacity: 1;
display: flex
}
}
.header__logo {
width: 14.2rem
}
.header__main {
max-height: inherit;
}
.header__panel {
font-size: 1.4rem;
line-height: 1.4;
max-height: 100%;
display: flex;
margin-bottom: 2rem;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
@media (min-width: 768px) {
.header__panel {
display: flex;
align-items: flex-start;
font-size:1.8rem
}
}
.header__panel--typewriter {
padding-top: 1.5rem
}
@media (min-width: 576px) {
.header__panel--typewriter {
padding-top:6rem
}
}
@media (min-width: 768px) {
.header__panel--typewriter {
padding-top:4.5rem
}
}
@media (min-width: 992px) {
.header__panel--typewriter {
padding-top:6.5rem
}
}
.header__panel .header__lead {
margin-top: 3rem;
text-align: center;
}
@media (min-width: 768px) {
.header__panel .header__lead {
text-align: initial;
}
}
.header__panel p {
font-family: 'Montserrat';
}
.header__lead {
font-family: 'Montserrat';
font-size: 2.2rem
}
@media (min-width: 768px) {
.header__lead {
font-size:2.6rem
}
}
@media (min-width: 768px) {
.header__lead:first-child {
margin-top:1rem
}
}
@media (min-width: 992px) {
.header__lead:first-child {
margin-top:1.4rem
}
}
.header__focus-trap {
display: flex
}
.header__text-link {
padding: .15em;
margin: 0 -.15em
}
.header__text-link,body.dark .header__text-link {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.header__text-link {
background:hsla(0,0%,100%,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .header__text-link {
background: rgba(44,113,255,0)
}
.header__text-link:active,.header__text-link:focus,.header__text-link:hover {
background: hsla(0,0%,100%,.15);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
body.dark .header__text-link:active,body.dark .header__text-link:focus,body.dark .header__text-link:hover {
background: rgba(44,113,255,.15);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.social-icons {
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
color: #111;
transition: color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .social-icons {
color: #fff
}
.social-icons__item {
width: 2.5rem;
height: 2.5rem
}
.social-icons__item+.social-icons__item {
margin: 0 0 0 2.7rem
}
.social-icons__item--small {
width: 1.8rem;
height: 1.8rem
}
.social-icons__item--small+.social-icons__item--small {
margin-left: 2rem
}
.social-icons__link {
color: currentColor;
transition: color .3s cubic-bezier(.645,.045,.355,1)
}
@media not all and (hover: none) {
.social-icons__link--stackoverflow:active,.social-icons__link--stackoverflow:focus,.social-icons__link--stackoverflow:hover {
color:#fe7a16
}
}
@media not all and (hover: none) {
.social-icons__link--linkedin:active,.social-icons__link--linkedin:focus,.social-icons__link--linkedin:hover {
color:#0077b5
}
}
@media not all and (hover: none) {
.social-icons__link--github:active,.social-icons__link--github:focus,.social-icons__link--github:hover {
color:#75b5fd
}
}
@media not all and (hover: none) {
.social-icons__link--twitter:active,.social-icons__link--twitter:focus,.social-icons__link--twitter:hover {
color:#1da1f2
}
}
@media not all and (hover: none) {
.social-icons__link--angellist:active,.social-icons__link--angellist:focus,.social-icons__link--angellist:hover {
color:#3078ca
}
}
.social-icons__link--angellist svg {
transform: scale(1.25)
}
@media not all and (hover: none) {
.social-icons__link--yunojuno:active,.social-icons__link--yunojuno:focus,.social-icons__link--yunojuno:hover {
color:#47d7ac
}
}
.social-icons__link svg {
fill: currentColor
}
.social-icons__label {
display: none
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace,monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,strong {
font-weight: bolder
}
code,kbd,samp {
font-family: monospace,monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
img {
border-style: none
}
button,input,optgroup,select,textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,input {
overflow: visible
}
button,select {
text-transform: none
}
[type=button],[type=reset],[type=submit],button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
[hidden],template {
display: none
}
* {
box-sizing: border-box
}
:after,:before {
box-sizing: inherit
}
blockquote,figure,ol,ul {
padding: 0;
margin: 0
}
h1,h2,h3,h4,p {
margin: 0
}
h1,h2,h3,h4 {
font-weight: 500
}
img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
image-rendering: optimize-contrast;
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0)
}
img,svg {
max-width: 100%
}
svg {
height: auto;
fill: currentColor
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
font-smooth: always;
font-size: 62.5%;
scroll-behavior: smooth;
min-height: 100vh;
background: #fff;
width: 100%;
min-width: 250px;
max-width: 100vw;
overflow-x: hidden;
overflow-x: auto
}
@media (-webkit-min-device-pixel-ratio: 1.3),(-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.3dppx),(min-resolution:120dpi) {
html {
font-smoothing:subpixel-antialiased
}
}
html.nav-open {
overflow: hidden
}
@media (min-width: 768px) {
html.nav-open {
overflow:auto
}
}
html.no-overflow,html.no-overflow body {
touch-action: none;
overflow: hidden
}
body {
font: 400 100%/1.6 Montserrat,Myriad Pro,Gill Sans,Gill Sans MT,Calibri,sans-serif;
letter-spacing: .02rem;
/* color: #111; */
padding: 0;
margin: 0;
width: 100%;
min-width: 25rem;
max-width: 100vw;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
transition: background .6s cubic-bezier(.645,.045,.355,1),color .6s cubic-bezier(.645,.045,.355,1)
}
body.dark {
background: #0f1727;
color: #fff
}
body:not(.keyboard-user) :active,body:not(.keyboard-user) :focus {
outline: 0
}
p {
margin: 0 0 1em
}
abbr,abbr[title] {
text-decoration: none
}
a {
color: currentColor
}
a[target=_blank] {
cursor: alias
}
.page {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column
}
.page__title--home {
font-family: Playfair Display;
margin-top: 1rem;
font-size: 3.2rem;
font-weight: 700;
letter-spacing: .2rem;
text-transform: uppercase;
text-align: center;
line-height: 1
}
.page__title {
font-family: Playfair Display;
margin-top: 1rem;
font-size: 5.2rem;
font-weight: 700;
letter-spacing: .2rem;
text-transform: uppercase;
text-align: center;
line-height: 1
}
@media (min-width: 576px) {
.page__title {
letter-spacing:.3rem;
font-size: 3.8rem
}
}
@media (min-width: 768px) {
.page__title {
font-size:5.8rem;
text-align: left;
letter-spacing: .45rem;
margin-left: -.5rem
}
}
@media (min-width: 992px) {
.page__title {
font-size:7rem;
letter-spacing: .2rem;
margin-left: -.7rem
}
}
.page__title--break {
word-break: break-all
}
.page__title--inset {
margin-left: 0
}
.page__title-break {
display: none
}
@media (min-width: 768px) {
.page__title-break {
display:inline-block
}
}
@media (min-width: 768px) {
.page__title-break--mid-word {
display:none
}
}
@media (min-width: 992px) {
.page__title-break--mid-word {
display:inline-block
}
}
@media (min-width: 1400px) {
.page__title-break--mid-word {
display:none
}
}
.page__subtitle a {
text-decoration: none
}
.page__header {
position: relative;
z-index: 0;
transform: translateZ(0);
/* transition: color .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1); */
font-family: Playfair Display;
letter-spacing: 0;
}
.page__header--opened {
z-index: 3;
}
.page__header--home,.page__header--project {
/* height: 100vh;
max-height: 100vh;
min-height: 100vh; */
}
.page__header--home {
/* background: #070414; */
background-repeat: no-repeat;
transition-delay: 0s
}
.page__header--videos {
background: #070414;
background-repeat: no-repeat;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--home {
color: #fff
}
.page__header--portfolio {
background: #fff;
color: #111;
transition-delay: 0s
}
body.dark .page__header--portfolio {
color: #fff
}
.page__header--about {
background: #070414;
color: #fff;
transition-delay: 0s
}
.header__panel--hero-image {
display: none;
}
@media (min-width: 768px) {
.header__panel--hero-image {
display: block;
height: 40vh;
}
}
body.dark .page__header--about {
color: #fff
}
.page__header--error {
background: #31b4c3;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--error {
color: #fff
}
.page__header--availability {
background: #9e0e70;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--availability {
color: #fff
}
.page__header--contact {
background: #2da291;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--contact {
color: #fff
}
.page__header--timeline {
background: #31b4c3;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--timeline {
color: #fff
}
.page__header--blog {
background: #d43e3e;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--blog {
color: #fff
}
.page__header--article {
background: #fff;
color: #111;
transition-delay: 0s
}
body.dark .page__header--article {
color: #fff
}
.page__header--glossary {
background: #0f2e5a;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--glossary {
color: #fff
}
.page__header--definition {
background: #fff;
color: #111;
transition-delay: 0s
}
body.dark .page__header--definition {
color: #fff
}
.page__header--bbc-future-media {
background: #017f96;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--bbc-future-media {
color: #fff
}
.page__header--bose-product-support {
background: #2b2b2b;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--bose-product-support {
color: #fff
}
.page__header--cox-kings {
background: #46488a;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--cox-kings {
color: #fff
}
.page__header--analytical-fintech-startup {
background: #5a0861;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--analytical-fintech-startup {
color: #fff
}
.page__header--hsbc-corporate-banking {
background: #1b252c;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--hsbc-corporate-banking {
color: #fff
}
.page__header--john-lewis {
background: #0f2e5a;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--john-lewis {
color: #fff
}
.page__header--lotus {
background: #2b2b2b;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--lotus {
color: #fff
}
.page__header--navico {
background: #dd0916;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--navico {
color: #fff
}
.page__header--macmillan-education {
background: #71a623;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--macmillan-education {
color: #fff
}
.page__header--plex-tv {
background: #2f3134;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--plex-tv {
color: #fff
}
.page__header--red-central {
background: #2b2b2b;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--red-central {
color: #fff
}
.page__header--style-com {
background: #16254b;
color: #fff;
transition-delay: 0s
}
body.dark .page__header--style-com {
color: #fff
}
body.dark .page__header {
background: #15223c
}
.page__header--dark,body.dark .page__header--dark {
background: 0 0
}
.page__header-main {
z-index: 2;
position: relative;
max-height: 100vh;
overflow: hidden;
}
.page__main {
z-index: 1;
margin-bottom: auto
}
.split {
display: flex;
flex-direction: column;
align-items: center;
width: 100%
}
@media (min-width: 768px) {
.split {
display: grid;
align-items: flex-start;
grid-gap: 4rem;
}
}
@media (min-width: 768px) {
.split--medium.split--50-10 {
grid-template-columns:50fr 10fr
}
.split--medium.split--50-10-30 {
grid-template-columns: 50fr 10fr 30fr
}
.split--medium.split--50-20 {
grid-template-columns: 50fr 20fr
}
.split--medium.split--50-20-30 {
grid-template-columns: 50fr 20fr 30fr
}
.split--medium.split--50-30 {
grid-template-columns: 50fr 30fr
}
.split--medium.split--50-30-30 {
grid-template-columns: 50fr 30fr 30fr
}
.split--medium.split--50-50 {
grid-template-columns: 50fr 50fr
}
.split--medium.split--50-50-30 {
grid-template-columns: 50fr 50fr 30fr
}
.split--medium.split--50-0 {
grid-template-columns: 50fr 0fr
}
.split--medium.split--50-0-30 {
grid-template-columns: 50fr 0fr 30fr
}
.split--medium.split--60-10 {
grid-template-columns: 60fr 10fr
}
.split--medium.split--60-10-30 {
grid-template-columns: 60fr 10fr 30fr
}
.split--medium.split--60-20 {
grid-template-columns: 60fr 20fr
}
.split--medium.split--60-20-30 {
grid-template-columns: 60fr 20fr 30fr
}
.split--medium.split--60-30 {
grid-template-columns: 60fr 30fr
}
.split--medium.split--60-30-30 {
grid-template-columns: 60fr 30fr 30fr
}
.split--medium.split--60-50 {
grid-template-columns: 60fr 50fr
}
.split--medium.split--60-50-30 {
grid-template-columns: 60fr 50fr 30fr
}
.split--medium.split--60-0 {
grid-template-columns: 60fr 0fr
}
.split--medium.split--60-0-30 {
grid-template-columns: 60fr 0fr 30fr
}
.split--medium.split--70-10 {
grid-template-columns: 70fr 10fr
}
.split--medium.split--70-10-30 {
grid-template-columns: 70fr 10fr 30fr
}
.split--medium.split--70-20 {
grid-template-columns: 70fr 20fr
}
.split--medium.split--70-20-30 {
grid-template-columns: 70fr 20fr 30fr
}
.split--medium.split--70-30 {
grid-template-columns: 70fr 30fr
}
.split--medium.split--70-30-30 {
grid-template-columns: 70fr 30fr 30fr
}
.split--medium.split--70-50 {
grid-template-columns: 70fr 50fr
}
.split--medium.split--70-50-30 {
grid-template-columns: 70fr 50fr 30fr
}
.split--medium.split--70-0 {
grid-template-columns: 70fr 0fr
}
.split--medium.split--70-0-30 {
grid-template-columns: 70fr 0fr 30fr
}
.split--medium.split--80-10 {
grid-template-columns: 80fr 10fr
}
.split--medium.split--80-10-30 {
grid-template-columns: 80fr 10fr 30fr
}
.split--medium.split--80-20 {
grid-template-columns: 80fr 20fr
}
.split--medium.split--80-20-30 {
grid-template-columns: 80fr 20fr 30fr
}
.split--medium.split--80-30 {
grid-template-columns: 80fr 30fr
}
.split--medium.split--80-30-30 {
grid-template-columns: 80fr 30fr 30fr
}
.split--medium.split--80-50 {
grid-template-columns: 80fr 50fr
}
.split--medium.split--80-50-30 {
grid-template-columns: 80fr 50fr 30fr
}
.split--medium.split--80-0 {
grid-template-columns: 80fr 0fr
}
.split--medium.split--80-0-30 {
grid-template-columns: 80fr 0fr 30fr
}
.split--medium.split--100-10 {
grid-template-columns: 100fr 10fr
}
.split--medium.split--100-10-30 {
grid-template-columns: 100fr 10fr 30fr
}
.split--medium.split--100-20 {
grid-template-columns: 100fr 20fr
}
.split--medium.split--100-20-30 {
grid-template-columns: 100fr 20fr 30fr
}
.split--medium.split--100-30 {
grid-template-columns: 100fr 30fr
}
.split--medium.split--100-30-30 {
grid-template-columns: 100fr 30fr 30fr
}
.split--medium.split--100-50 {
grid-template-columns: 100fr 50fr
}
.split--medium.split--100-50-30 {
grid-template-columns: 100fr 50fr 30fr
}
.split--medium.split--100-0 {
grid-template-columns: 100fr 0fr
}
.split--medium.split--100-0-30 {
grid-template-columns: 100fr 0fr 30fr
}
}
@media (min-width: 992px) {
.split--large.split--50-10 {
grid-template-columns:50fr 10fr
}
.split--large.split--50-10-30 {
grid-template-columns: 50fr 10fr 30fr
}
.split--large.split--50-20 {
grid-template-columns: 50fr 20fr
}
.split--large.split--50-20-30 {
grid-template-columns: 50fr 20fr 30fr
}
.split--large.split--50-30 {
grid-template-columns: 50fr 30fr
}
.split--large.split--50-30-30 {
grid-template-columns: 50fr 30fr 30fr
}
.split--large.split--50-50 {
grid-template-columns: 50fr 50fr
}
.split--large.split--50-50-30 {
grid-template-columns: 50fr 50fr 30fr
}
.split--large.split--50-0 {
grid-template-columns: 50fr 0fr
}
.split--large.split--50-0-30 {
grid-template-columns: 50fr 0fr 30fr
}
.split--large.split--60-10 {
grid-template-columns: 60fr 10fr
}
.split--large.split--60-10-30 {
grid-template-columns: 60fr 10fr 30fr
}
.split--large.split--60-20 {
grid-template-columns: 60fr 20fr
}
.split--large.split--60-20-30 {
grid-template-columns: 60fr 20fr 30fr
}
.split--large.split--60-30 {
grid-template-columns: 60fr 30fr
}
.split--large.split--60-30-30 {
grid-template-columns: 60fr 30fr 30fr
}
.split--large.split--60-50 {
grid-template-columns: 60fr 50fr
}
.split--large.split--60-50-30 {
grid-template-columns: 60fr 50fr 30fr
}
.split--large.split--60-0 {
grid-template-columns: 60fr 0fr
}
.split--large.split--60-0-30 {
grid-template-columns: 60fr 0fr 30fr
}
.split--large.split--70-10 {
grid-template-columns: 70fr 10fr
}
.split--large.split--70-10-30 {
grid-template-columns: 70fr 10fr 30fr
}
.split--large.split--70-20 {
grid-template-columns: 70fr 20fr
}
.split--large.split--70-20-30 {
grid-template-columns: 70fr 20fr 30fr
}
.split--large.split--70-30 {
grid-template-columns: 70fr 30fr
}
.split--large.split--70-30-30 {
grid-template-columns: 70fr 30fr 30fr
}
.split--large.split--70-50 {
grid-template-columns: 70fr 50fr
}
.split--large.split--70-50-30 {
grid-template-columns: 70fr 50fr 30fr
}
.split--large.split--70-0 {
grid-template-columns: 70fr 0fr
}
.split--large.split--70-0-30 {
grid-template-columns: 70fr 0fr 30fr
}
.split--large.split--80-10 {
grid-template-columns: 80fr 10fr
}
.split--large.split--80-10-30 {
grid-template-columns: 80fr 10fr 30fr
}
.split--large.split--80-20 {
grid-template-columns: 80fr 20fr
}
.split--large.split--80-20-30 {
grid-template-columns: 80fr 20fr 30fr
}
.split--large.split--80-30 {
grid-template-columns: 80fr 30fr
}
.split--large.split--80-30-30 {
grid-template-columns: 80fr 30fr 30fr
}
.split--large.split--80-50 {
grid-template-columns: 80fr 50fr
}
.split--large.split--80-50-30 {
grid-template-columns: 80fr 50fr 30fr
}
.split--large.split--80-0 {
grid-template-columns: 80fr 0fr
}
.split--large.split--80-0-30 {
grid-template-columns: 80fr 0fr 30fr
}
.split--large.split--100-10 {
grid-template-columns: 100fr 10fr
}
.split--large.split--100-10-30 {
grid-template-columns: 100fr 10fr 30fr
}
.split--large.split--100-20 {
grid-template-columns: 100fr 20fr
}
.split--large.split--100-20-30 {
grid-template-columns: 100fr 20fr 30fr
}
.split--large.split--100-30 {
grid-template-columns: 100fr 30fr
}
.split--large.split--100-30-30 {
grid-template-columns: 100fr 30fr 30fr
}
.split--large.split--100-50 {
grid-template-columns: 100fr 50fr
}
.split--large.split--100-50-30 {
grid-template-columns: 100fr 50fr 30fr
}
.split--large.split--100-0 {
grid-template-columns: 100fr 0fr
}
.split--large.split--100-0-30 {
grid-template-columns: 100fr 0fr 30fr
}
}
.split--header {
grid-gap: 8rem
}
@media (min-width: 992px) {
.split--header {
grid-gap:7rem
}
}
@media (min-width: 1200px) {
.split--header {
grid-gap:9rem
}
}
.cta {
margin-top: 1.5rem;
padding: 1rem 2rem;
font-size: 3rem;
font-weight: 700;
font-style: italic;
background-color: #7800ff;
border: solid 2px #7800ff;
border-radius: 15px;
color: #fff;
transition: ease .2s;
width: 75%;
cursor: pointer;
}
.cta a {
text-decoration: none;
}
.cta:hover {
background: #fff;
color: #05001d;
border-color: #fff;
}
@media (min-width: 768px) {
.cta {
margin-top: 7rem;
padding: 2rem 2rem;
}
}
.availability-byline {
font-size: 1.7rem;
font-family: Montserrat;
font-weight: 400;
text-align: center;
margin: 3rem 0 0
}
@media (min-width: 768px) {
.availability-byline {
font-size:3rem;
text-align: left
}
}
.availability-byline__link,.availability-byline__link:active,.availability-byline__link:focus,.availability-byline__link:hover,.availability-byline__link:visited {
color: inherit;
text-decoration: none
}
.availability-byline--subtitle {
margin: 0 0 -2.2rem
}
@media (min-width: 768px) {
.availability-byline--subtitle {
margin:1.5rem 0 -2.3rem
}
}
@media (min-width: 992px) {
.availability-byline--subtitle {
margin:3rem 0 0
}
}
.header-arrow {
pointer-events: none;
margin: 0 auto;
max-width: 160rem;
position: absolute;
bottom: 3.7rem
}
@media (min-width: 768px) {
.header-arrow {
bottom:7.5rem
}
}
@media (min-width: 992px) {
.header-arrow {
bottom:5.5rem
}
}
.header-arrow__button {
width: auto;
margin: 0 0 0 -1rem;
background: 0 0;
border: none;
cursor: pointer;
pointer-events: all;
padding: 1rem
}
.header-arrow__button--animate-in {
opacity: 0;
transform: translateY(-100%);
transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1);
transition-delay: .75s
}
.header-arrow__button--animate-delay {
transition-delay: 2.5s
}
.header-arrow__button--loaded {
opacity: 1;
transform: translateY(0)
}
@media (min-width: 992px) {
.header-arrow__button--loaded {
animation:headerArrow 2.5s infinite
}
}
.header-arrow__icon {
display: inline-block;
width: 1.8rem;
transform: translateZ(0);
transition: transform .3s cubic-bezier(.645,.045,.355,1);
color: #fff
}
.header-arrow__icon--dark {
color: #111
}
.header-arrow__text {
display: inline-block;
height: 0;
width: 0;
white-space: nowrap;
text-indent: 100rem;
overflow: hidden
}
@keyframes headerArrow {
0% {
transform: translateZ(0)
}
40% {
transform: translate3d(0,.5rem,0)
}
60% {
transform: translate3d(0,.5rem,0)
}
to {
transform: translateZ(0)
}
}
.connect__list {
list-style: none;
font-size: 2.2rem;
margin: 0 0 3.9rem
}
.connect__item+.connect__item {
margin-top: 1.6rem
}
.connect__link {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8);
text-decoration: none
}
body.dark .connect__link {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.connect__link {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .connect__link {
background: rgba(44,113,255,0)
}
.connect__link:active,.connect__link:focus,.connect__link:hover {
background: #070414;
color: #fff;
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
body.dark .connect__link:active,body.dark .connect__link:focus,body.dark .connect__link:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.quotes-carousel__button--forwards {
right: 0;
cursor: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS40IDI0LjA3IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjIuOTUiIHk9IjI5LjAzIiB3aWR0aD0iMTYuOTciIGhlaWdodD0iNC44MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy43IC0zNi43NSkgcm90YXRlKDQ1KSIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjIuOTUiIHk9IjM3LjciIHdpZHRoPSIxNi45NyIgaGVpZ2h0PSI0LjgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDIuODggMTAuMjQpIHJvdGF0ZSgtNDUpIi8+PC9zdmc+),auto
}
body.keyboard-user .quotes-carousel__button--forwards:focus {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS40IDI0LjA3IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjIuOTUiIHk9IjI5LjAzIiB3aWR0aD0iMTYuOTciIGhlaWdodD0iNC44MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy43IC0zNi43NSkgcm90YXRlKDQ1KSIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMjIuOTUiIHk9IjM3LjciIHdpZHRoPSIxNi45NyIgaGVpZ2h0PSI0LjgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDIuODggMTAuMjQpIHJvdGF0ZSgtNDUpIi8+PC9zdmc+) 50% 50% no-repeat
}
.quotes-carousel__button--backwards {
left: 0;
cursor: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS40IDI0LjA3IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTUuMDIiIHk9IjI4LjEyIiB3aWR0aD0iMTYuOTciIGhlaWdodD0iNC44MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi43NCA1NC41Nykgcm90YXRlKC0xMzUpIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxNS4wMiIgeT0iMTkuNDUiIHdpZHRoPSIxNi45NyIgaGVpZ2h0PSI0LjgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOS43OCA2LjUzKSByb3RhdGUoMTM1KSIvPjwvc3ZnPg==),auto
}
body.keyboard-user .quotes-carousel__button--backwards:focus {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS40IDI0LjA3IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTUuMDIiIHk9IjI4LjEyIiB3aWR0aD0iMTYuOTciIGhlaWdodD0iNC44MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi43NCA1NC41Nykgcm90YXRlKC0xMzUpIi8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxNS4wMiIgeT0iMTkuNDUiIHdpZHRoPSIxNi45NyIgaGVpZ2h0PSI0LjgxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOS43OCA2LjUzKSByb3RhdGUoMTM1KSIvPjwvc3ZnPg==) 50% 50% no-repeat
}
body.dark .arrow-button {
color: #fff;
background: #2c71ff;
border-color: #2c71ff
}
body.dark .arrow-button:active,body.dark .arrow-button:focus,body.dark .arrow-button:hover {
color: #0f1727;
border-color: #fff;
background: #fff
}
@media (min-width: 768px) {
body.dark .arrow-button {
background:0 0
}
body.dark .arrow-button:before {
transform: translateZ(0)
}
body.dark .arrow-button:active,body.dark .arrow-button:focus,body.dark .arrow-button:hover {
background: 0 0;
color: #0f1727;
border-color: #fff
}
body.dark .arrow-button:active:before,body.dark .arrow-button:focus:before,body.dark .arrow-button:hover:before {
transform: translate3d(0,-25%,0)
}
}
.arrow-button--disabled {
opacity: .2;
cursor: default
}
.arrow-button--disabled:after,.arrow-button--disabled:before {
display: none
}
.arrow-button--disabled,.arrow-button--disabled:active,.arrow-button--disabled:focus,.arrow-button--disabled:hover {
color: #111;
background: #fff
}
body.dark .arrow-button--disabled,body.dark .arrow-button--disabled:active,body.dark .arrow-button--disabled:focus,body.dark .arrow-button--disabled:hover {
color: #fff;
background: #2c71ff;
border-color: #2c71ff
}
.arrow-button--processing {
cursor: default
}
.arrow-button--processing:after,.arrow-button--processing:before {
display: none
}
.arrow-button--processing,.arrow-button--processing:active,.arrow-button--processing:focus,.arrow-button--processing:hover {
color: #fff;
background: #111
}
body.dark .arrow-button--processing,body.dark .arrow-button--processing:active,body.dark .arrow-button--processing:focus,body.dark .arrow-button--processing:hover {
opacity: .6;
color: #fff;
background: #2c71ff;
border-color: #2c71ff
}
.arrow-button--processing svg {
width: 1.4rem
}
body.dark .contact-form__input:-ms-input-placeholder {
color: #fff;
opacity: .8
}
body.dark .contact-form__input::placeholder {
color: #fff;
opacity: .8
}
.contact-form__input:-webkit-autofill {
-webkit-text-fill-color: #111
}
@media (min-width: 576px) {
.contact-form__input {
width:60%;
min-width: 32.5rem
}
}
body.dark .contact-form__input {
background: 0 0;
box-shadow: inset 0 0 0 100rem transparent;
border-color: #fff;
color: #fff
}
.contact-form__input--textarea {
width: 100%;
height: 18.5rem;
resize: none;
line-height: 1.6
}
.contact-form__input--error,body.dark .contact-form__input--error {
border-color: #d53f3f;
color: #d53f3f
}
.contact-form__input--error:active,.contact-form__input--error:focus,.contact-form__input--error:hover {
border-color: #d33737;
color: #111
}
body.dark .contact-form__input--error:active,body.dark .contact-form__input--error:focus,body.dark .contact-form__input--error:hover {
color: #fff
}
.contact-form__error {
width: 100%;
max-height: 0;
transition: max-height .3s cubic-bezier(.645,.045,.355,1)
}
.contact-form__error--open {
max-height: 6rem
}
@media (min-width: 576px) {
.contact-form__error {
width:60%;
min-width: 32.5rem
}
}
.contact-form__error-message {
margin: 0;
padding: 1.3rem 1.9rem;
color: #d53f3f;
font-size: 1.1rem;
font-style: italic
}
.post-footer {
display: flex;
flex-direction: column-reverse;
margin: 6rem 0 0
}
@media (min-width: 576px) {
.post-footer {
flex-direction:row
}
}
@media (min-width: 768px) {
.post-footer {
padding:6rem 0;
margin: 0
}
}
@media (min-width: 992px) {
.post-footer {
padding:9.2rem 0
}
}
.post-footer__column {
flex: 1 1;
color: currentColor;
text-decoration: none
}
.post-footer__column--buttons {
padding: 4.7rem 3rem
}
@media (min-width: 576px) {
.post-footer__column--buttons {
padding:0 0 0 3rem;
display: flex;
align-items: center;
justify-content: flex-start
}
}
@media (min-width: 768px) {
.post-footer__column--buttons {
padding-left:8.3rem
}
}
@media (min-width: 992px) {
.post-footer__column--buttons {
padding-left:11.6rem
}
}
@media (min-width: 1200px) {
.post-footer__column--buttons {
justify-content:flex-end
}
}
.post-footer__column--next {
margin: 0;
padding: 4.7rem 3rem;
background-color: #f5f5f5;
transition: background-color .6s cubic-bezier(.645,.045,.355,1)
}
@media not all and (hover: none) {
.post-footer__column--next:active,.post-footer__column--next:focus,.post-footer__column--next:hover {
background-color:#e6e6e6
}
}
@media (min-width: 576px) {
.post-footer__column--next {
margin-left:1.2rem;
padding: 3rem
}
}
@media (min-width: 768px) {
.post-footer__column--next {
padding:6rem 8.3rem
}
}
@media (min-width: 992px) {
.post-footer__column--next {
padding:9rem 11.6rem 9rem 8.4rem
}
}
body.dark .post-footer__column--next {
background-color: #151f34
}
@media not all and (hover: none) {
body.dark .post-footer__column--next:active,body.dark .post-footer__column--next:focus,body.dark .post-footer__column--next:hover {
background-color:#1b2843
}
}
@media (min-width: 1200px) {
.post-footer__column-inner {
width:100%;
max-width: 64.2rem
}
}
.post-footer__button+.post-footer__button {
margin-top: 1.5em
}
@media (min-width: 576px) {
.post-footer__button {
width:20rem;
display: flex;
justify-content: space-between
}
}
.post-footer__screenshot {
width: 100%
}
.post-footer__screenshot--blog {
transition: background .6s cubic-bezier(.645,.045,.355,1);
background-color: #e2e2e2;
filter: brightness(1) contrast(1);
transition: filter .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .post-footer__screenshot--blog {
background-color: #111a2b;
filter: brightness(85%) contrast(1.1)
}
.post-footer__title {
text-transform: uppercase;
font-size: 2.2rem;
font-weight: 500;
line-height: 1.2;
margin: 0 0 1.4em;
max-width: 45rem
}
.post-footer__title-inner {
display: block;
font-size: 55%;
font-weight: 400;
margin: 0 0 1em;
opacity: 1;
transition: opacity .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .post-footer__title-inner {
opacity: .7
}
.post-footer__title-audible {
display: none
}
.about {
padding-top: 6rem
}
@media (min-width: 768px) {
.about {
padding-top:8.7rem
}
}
@media (min-width: 768px) {
.about__button {
display:block;
margin: 0 0 6.5rem
}
}
@media (min-width: 992px) {
.about__button {
margin:0 0 8.5rem
}
}
.about__content {
font-family: 'Open Sans';
font-size: 1.6rem
}
@media (min-width: 768px) {
.about__content {
font-size:1.6rem;
column-count: 2;
column-gap: 7rem
}
.about__content dd,.about__content dt,.about__content ol,.about__content p,.about__content section,.about__content ul {
break-inside: avoid
}
}
@media (min-width: 1200px) {
.about__content {
column-gap:9rem
}
}
.about__content a {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8);
text-decoration: none
}
body.dark .about__content a {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.about__content a {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .about__content a {
background: rgba(44,113,255,0)
}
.about__content a:active,.about__content a:focus,.about__content a:hover {
background: rgba(93,216,233,.3);
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .about__content a:active,body.dark .about__content a:focus,body.dark .about__content a:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.about__attribtues {
list-style: none;
margin: 1.75em 0
}
.about__attribtues-item {
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase
}
@media (min-width: 992px) {
.about__attribtues-item {
font-size:2.3rem
}
}
.about__attribtues-item span {
text-transform: none
}
.about__attribtues-item+.about__attribtues-item {
margin-top: .5em
}
.client-logos {
list-style: none;
margin: 5.2rem 0 2.6rem;
display: grid;
grid-template-columns: repeat(2,1fr);
row-gap: 2rem
}
@media (min-width: 768px) {
.client-logos {
margin:7.5rem 0 3.75rem;
grid-template-columns: repeat(3,1fr);
row-gap: 3rem
}
}
@media (min-width: 992px) {
.client-logos {
margin:9.5rem 0 4.75rem;
grid-template-columns: repeat(4,1fr);
row-gap: 4rem
}
}
@media (min-width: 1200px) {
.client-logos {
grid-template-columns:repeat(5,1fr);
row-gap: 5rem
}
}
@media (min-width: 1500px) {
.client-logos {
grid-template-columns:repeat(6,1fr)
}
}
.client-logos__item:nth-last-child(-n+6) {
display: none
}
@media (min-width: 768px) {
.client-logos__item:nth-last-child(-n+6) {
display:block
}
.client-logos__item:nth-last-child(-n+3) {
display: none
}
}
@media (min-width: 992px) {
.client-logos__item:nth-last-child(-n+3),.client-logos__item:nth-last-child(-n+6) {
display:block
}
.client-logos__item:nth-last-child(-n+4) {
display: none
}
}
@media (min-width: 1200px) {
.client-logos__item:nth-last-child(-n+3),.client-logos__item:nth-last-child(-n+4),.client-logos__item:nth-last-child(-n+8) {
display:block
}
.client-logos__item:nth-last-child(-n+2) {
display: none
}
}
@media (min-width: 1500px) {
.client-logos__item:nth-last-child(-n+2),.client-logos__item:nth-last-child(-n+3),.client-logos__item:nth-last-child(-n+4),.client-logos__item:nth-last-child(-n+8) {
display:block
}
}
.client-logos__link {
display: block;
text-align: center
}
.client-logos__label {
display: none
}
.client-logos__logo {
display: inline-block;
width: 11rem;
height: 9rem;
text-indent: 110%;
overflow: hidden;
white-space: nowrap;
background: none; /* unused legacy client-logo sprite removed from static rebuild */
transition: filter .6s cubic-bezier(.645,.045,.355,1)
}
@media (-webkit-min-device-pixel-ratio: 1.3),(-webkit-min-device-pixel-ratio:1.25),(min-resolution:1.3dppx),(min-resolution:120dpi) {
.client-logos__logo {
background-image:none;
background-size: 110rem 66rem
}
}
body.dark .client-logos__logo {
filter: invert(100%)
}
.client-logos__logo--amazon {
background-position: 0 -1rem
}
.client-logos__logo--bbc {
background-position: -11rem -1rem
}
.client-logos__logo--british-airways {
background-position: -22rem -1rem
}
.client-logos__logo--cisco {
background-position: -33rem -1rem
}
.client-logos__logo--ebay {
background-position: -44rem -1rem
}
.client-logos__logo--jaguar {
background-position: -55rem -1rem
}
.client-logos__logo--yorkshire {
background-position: -66rem -1rem
}
.client-logos__logo--hmv {
background-position: -77rem -1rem
}
.client-logos__logo--activision {
background-position: -88rem -1rem
}
.client-logos__logo--blackthorn {
background-position: -99rem -1rem
}
.client-logos__logo--linked-in {
background-position: 0 -12rem
}
.client-logos__logo--london-2012 {
background-position: -11rem -12rem
}
.client-logos__logo--marvel {
background-position: -22rem -12rem
}
.client-logos__logo--nintendo {
background-position: -33rem -12rem
}
.client-logos__logo--virgin {
background-position: -44rem -12rem
}
.client-logos__logo--volkswagen {
background-position: -55rem -12rem
}
.client-logos__logo--channel4 {
background-position: -66rem -12rem
}
.client-logos__logo--sony {
background-position: -77rem -12rem
}
.client-logos__logo--late-rooms {
background-position: -88rem -12rem
}
.client-logos__logo--lotus {
background-position: -99rem -12rem
}
.client-logos__logo--lacoste {
background-position: 0 -23rem
}
.client-logos__logo--crombie {
background-position: -11rem -23rem
}
.client-logos__logo--marks-and-spencer {
background-position: -22rem -23rem
}
.client-logos__logo--go-compare {
background-position: -33rem -23rem
}
.client-logos__logo--pure {
background-position: -44rem -23rem
}
.client-logos__logo--hotpoint {
background-position: -55rem -23rem
}
.client-logos__logo--sky {
background-position: -66rem -23rem
}
.client-logos__logo--pret {
background-position: -77rem -23rem
}
.client-logos__logo--t-mobile {
background-position: -88rem -23rem
}
.client-logos__logo--firecore {
background-position: -99rem -23rem
}
.client-logos__logo--team-gb {
background-position: 0 -34rem
}
.client-logos__logo--fashion-rocks {
background-position: -11rem -34rem
}
.client-logos__logo--bowers-wilkins {
background-position: -22rem -34rem
}
.client-logos__logo--medialoot {
background-position: -33rem -34rem
}
.client-logos__logo--macmillan {
background-position: -44rem -34rem
}
.client-logos__logo--specsavers {
background-position: -55rem -34rem
}
.client-logos__logo--nus {
background-position: -66rem -34rem
}
.client-logos__logo--kia {
background-position: -77rem -34rem
}
.client-logos__logo--shell {
background-position: -88rem -34rem
}
.client-logos__logo--conde-nast {
background-position: 0 -45rem
}
.client-logos__logo--uber {
background-position: -11rem -45rem
}
.client-logos__logo--style {
background-position: -22rem -45rem
}
.client-logos__logo--ikea {
background-position: -33rem -45rem
}
.client-logos__logo--mccann {
background-position: -44rem -45rem
}
.client-logos__logo--google {
background-position: -55rem -45rem
}
.client-logos__logo--microsoft {
background-position: -66rem -45rem
}
.client-logos__logo--john-lewis {
background-position: -77rem -45rem
}
.client-logos__logo--crossrail {
background-position: -88rem -45rem
}
.client-logos__logo--american-express {
background-position: -99rem -45rem
}
.client-logos__logo--bose {
background-position: 0 -56rem
}
.client-logos__logo--nhs {
background-position: -11rem -56rem
}
.client-logos__logo--plex {
background-position: -22rem -56rem
}
.client-logos__logo--hsbc {
background-position: -33rem -56rem
}
.client-logos__logo--gov-uk {
background-position: -44rem -56rem
}
.client-logos__logo--navico {
background-position: -55rem -56rem
}
.client-logos__logo--delonghi {
background-position: -66rem -56rem
}
.client-logos__logo--london-philharmonic-orchestra {
background-position: -88rem -56rem
}
.client-logos__logo--bosche {
background-position: -99rem -56rem
}
.availability {
padding-top: 6rem;
padding-bottom: 6rem
}
@media (min-width: 768px) {
.availability {
padding-top:8.7rem;
padding-bottom: 8.7rem
}
}
.availability__button {
display: none
}
@media (min-width: 768px) {
.availability__button {
display:block;
margin: 0 0 6.5rem
}
}
@media (min-width: 992px) {
.availability__button {
margin:0 0 8.5rem
}
}
.availability__calendar {
margin: 0 0 4rem
}
@media (min-width: 992px) {
.availability__calendar {
margin:0 0 7.5rem
}
}
.availability__calendar-list {
margin: 2.5rem 0
}
@media (min-width: 992px) {
.availability__calendar-list {
column-count:2;
column-gap: 7rem;
margin: 0 0 5.5rem
}
}
@media (min-width: 1200px) {
.availability__calendar-list {
column-gap:9rem
}
}
.availability__calendar-item {
display: flex;
justify-content: space-between;
align-items: center
}
.availability__calendar-item+.availability__calendar-item {
margin: 2.5rem 0 0
}
.availability__calendar-item--unavailable {
color: rgba(17,17,17,.2);
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .availability__calendar-item--unavailable {
color: hsla(0,0%,100%,.3)
}
.availability__calendar-year {
font-size: 2.4rem;
letter-spacing: .2rem;
margin: 0 0 2.5rem
}
@media (min-width: 992px) {
.availability__calendar-year {
font-size:3rem;
margin: 0 0 6rem
}
}
.availability__calendar-month {
text-transform: uppercase;
font-size: 1.4rem;
letter-spacing: .1rem;
width: 3.7rem;
text-align: left;
flex-grow: 0;
flex-shrink: 0
}
@media (min-width: 992px) {
.availability__calendar-month {
font-size:1.8rem
}
}
.availability__calendar-availability {
display: flex;
align-items: center;
flex: 1 1;
width: auto
}
.availability__calendar-bar {
margin: 0 3rem 0 0;
flex: 1 1;
background: #f5f5f5;
height: 1.1rem;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .availability__calendar-bar {
background: #090e19
}
.availability__calendar-bar-fill {
display: block;
height: 1.1rem;
background: #ce40b2;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .availability__calendar-bar-fill {
background: #2c71ff
}
.availability__calendar-amount {
font-size: 1.3rem;
width: 9.5rem;
text-align: left;
flex-grow: 0;
flex-shrink: 0
}
@media (min-width: 992px) {
.availability__calendar-amount {
font-size:1.5rem;
width: 12.5rem
}
}
.timeline-item {
padding: 1.5rem 2rem;
background: #edfafa;
color: #35a9bd;
transition: color .3s cubic-bezier(.645,.045,.355,1),background .3s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 576px) {
.timeline-item {
padding:2rem 2.5rem
}
}
@media (min-width: 992px) {
.timeline-item {
padding:3rem 3.5rem
}
}
.timeline-item+.timeline-item {
margin-top: 2.1rem
}
@media (min-width: 576px) {
.timeline-item+.timeline-item {
margin-top:2.7rem
}
}
body.dark .timeline-item {
background: #283c64;
color: #fff
}
.timeline-item__date {
display: inline-block;
padding: .3rem .4rem .2rem;
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05rem;
color: #edfafa;
background: #35a9bd;
transition: color .3s cubic-bezier(.645,.045,.355,1),background .3s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 576px) {
.timeline-item__date {
font-size:1.1rem;
padding: .4rem .5rem .3rem;
margin: 0 0 1.4rem
}
}
body.dark .timeline-item__date {
background: #2c71ff;
color: #fff
}
.timeline-item__text {
line-height: 1.5;
margin: 0;
font-size: 1.4rem
}
@media (min-width: 576px) {
.timeline-item__text {
font-size:1.6rem
}
}
@media (min-width: 992px) {
.timeline-item__text {
font-size:2.2rem
}
}
.timeline {
padding-top: 3rem;
padding-bottom: 0
}
@media (min-width: 768px) {
.timeline {
padding-top:4rem;
padding-bottom: 3rem
}
}
.timeline__list {
list-style: none;
max-width: 77.5rem
}
.timeline__link {
color: #111;
transition: color .3s cubic-bezier(.645,.045,.355,1),opacity .3s cubic-bezier(.645,.045,.355,1)
}
.timeline__link:active,.timeline__link:focus,.timeline__link:hover {
color: #35a9bd
}
body.dark .timeline__link {
color: #fff
}
body.dark .timeline__link:active,body.dark .timeline__link:focus,body.dark .timeline__link:hover {
color: #fff;
opacity: .8
}
.post-header {
padding: 1rem 0 4rem
}
@media (min-width: 768px) {
.post-header {
padding:2.5rem 0 5.5rem
}
}
@media (min-width: 992px) {
.post-header {
padding:6rem 0 8.4rem
}
}
.post-header__inner {
max-width: 82rem;
margin: 0 auto
}
.post-header__date {
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 1.4rem
}
@media (min-width: 768px) {
.post-header__date {
margin:0 0 2.2rem
}
}
@media (min-width: 992px) {
.post-header__date {
margin:0 0 4rem
}
}
.post-header__title {
max-width: 90%;
font-size: 2rem;
font-weight: 600;
letter-spacing: .2rem;
text-transform: uppercase;
line-height: 1.1
}
@media (min-width: 576px) {
.post-header__title {
font-size:3rem;
max-width: 66.5rem
}
}
@media (min-width: 768px) {
.post-header__title {
font-size:3.8rem
}
}
@media (min-width: 992px) {
.post-header__title {
font-size:4.2rem
}
}
.post-header__image {
height: 23rem;
margin: 4rem auto 0
}
@media (min-width: 768px) {
.post-header__image {
height:35rem;
margin: 7.2rem auto 0
}
}
@media (min-width: 992px) {
.post-header__image {
height:45rem;
margin: 10.7rem auto 0
}
}
@media (min-width: 1200px) {
.post-header__image {
height:54.5rem
}
}
@media (min-width: 1920px) {
.post-header__image {
max-width:148.4rem
}
}
.post-header__image-wrap {
transition: background .6s cubic-bezier(.645,.045,.355,1);
background-color: #f5f5f5;
filter: brightness(1) contrast(1);
transition: filter .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1);
position: relative
}
body.dark .post-header__image-wrap {
background-color: #151f34;
filter: brightness(85%) contrast(1.1)
}
.post-header__image-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.645,.045,.355,1)
}
@media not all and (hover: none) {
:active>.post-header__image-caption,:focus>.post-header__image-caption,:hover>.post-header__image-caption {
opacity:1
}
}
.post-header__image-credit {
display: inline-block;
background: hsla(0,0%,100%,.75);
margin: 0 0 0 -.5rem;
padding: .1rem .5rem;
color: #111
}
.lead-image {
position: relative;
left: -20%;
width: 100%;
max-width: 96rem;
margin-top: -2.5rem
}
@media (min-width: 768px) {
.lead-image {
left:-25%;
margin-top: -3.3rem
}
}
@media (min-width: 992px) {
.lead-image {
left:-24%
}
}
@media (min-width: 1200px) {
.lead-image {
left:-18%
}
}
@media (min-width: 1500px) {
.lead-image {
left:-20%;
margin-right: calc(-22% + 14rem);
margin-bottom: 10rem;
float: left
}
}
.rich-hyperlink {
padding: .15em;
margin: 0 -.15em;
-webkit-text-decoration-color: rgba(17,17,17,.8);
text-decoration-color: rgba(17,17,17,.8)
}
body.dark .rich-hyperlink {
-webkit-text-decoration-color: hsla(0,0%,100%,.8);
text-decoration-color: hsla(0,0%,100%,.8)
}
@media not all and (hover: none) {
.rich-hyperlink {
background:rgba(93,216,233,0);
transition: background .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1);
transition: background .3s cubic-bezier(.645,.045,.355,1),text-decoration-color .3s cubic-bezier(.645,.045,.355,1),-webkit-text-decoration-color .3s cubic-bezier(.645,.045,.355,1)
}
body.dark .rich-hyperlink {
background: rgba(44,113,255,0)
}
.rich-hyperlink:active,.rich-hyperlink:focus,.rich-hyperlink:hover {
background: rgba(93,216,233,.3);
-webkit-text-decoration-color: #111;
text-decoration-color: #111
}
body.dark .rich-hyperlink:active,body.dark .rich-hyperlink:focus,body.dark .rich-hyperlink:hover {
background: rgba(44,113,255,.2);
-webkit-text-decoration-color: #fff;
text-decoration-color: #fff
}
}
.rich-code {
font: 400 .9em FiraCode,monospace;
background: #f5f5f5;
margin: 4.5rem -3rem;
display: block;
white-space: pre;
overflow-x: hidden;
position: relative;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .rich-code {
background: #151f34
}
@media (min-width: 768px) {
.rich-code {
margin:8.3rem -8.3rem
}
}
.rich-code--definition {
background: #f4fcfc
}
body.dark .rich-code--definition {
background: #283c64
}
.rich-code:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3rem;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.rich-code:after {
display:none
}
}
.rich-code:after {
background: transparent linear-gradient(90deg,hsla(0,0%,96.1%,0),#f5f5f5 75%,#f5f5f5)
}
body.dark .rich-code:after {
background: transparent linear-gradient(90deg,hsla(0,0%,96.1%,0),#151f34)
}
.rich-code__inner {
display: block;
padding: 3rem;
overflow-y: hidden;
overflow-x: auto;
line-height: 1.3
}
@media (min-width: 768px) {
.rich-code__inner {
padding:4rem 8.3rem
}
}
.rich-image,.rich-video {
max-width: 96rem;
display: flex;
align-items: center;
justify-content: center;
padding: 5rem 0;
margin: 0 auto
}
.rich-image {
clear: both
}
.rich-image--offset-left {
justify-content: flex-start
}
.rich-image--offset-right {
justify-content: flex-end
}
.rich-image__frame {
width: 100%
}
.rich-image__frame--tablet {
width: 45%;
max-width: 40rem
}
.rich-image__frame--mobile {
width: 35%;
max-width: 21.2rem
}
@media (min-width: 576px) {
.rich-image__frame--mobile {
width:25%
}
}
.rich-image__frame--inline:first-child {
margin-right: -7%
}
.rich-image__frame--desktop-inline {
max-width: 81.2rem;
align-self: flex-end;
z-index: 2
}
.rich-image__frame--desktop-inline+.rich-image__frame--desktop-inline {
margin-bottom: 4.2rem;
z-index: 1
}
.rich-image__frame--tablet-inline {
align-self: flex-end;
z-index: 2
}
.rich-image__frame--tablet-inline+.rich-image__frame--tablet-inline {
margin-bottom: 4.2rem;
z-index: 1
}
.rich-image__frame--mobile-inline {
align-self: flex-end;
z-index: 2
}
.rich-image__frame--mobile-inline+.rich-image__frame--mobile-inline {
margin-bottom: 4.2rem;
z-index: 1
}
.rich-image__frame--forwards {
align-self: flex-end;
z-index: 2
}
.rich-image__frame--backwards {
margin-bottom: 4.2rem;
z-index: 1
}
.rich-image--mobile-mobile .rich-image__frame--mobile {
max-width: 32rem;
align-self: flex-start;
margin: 0
}
.rich-image--mobile-mobile .rich-image__frame--mobile:last-child {
align-self: flex-end;
margin: 12% 0 0 -6%
}
.rich-image--tablet-tablet .rich-image__frame--tablet {
max-width: 56rem;
align-self: flex-end;
margin: 12% -6% 0 0
}
.rich-image--tablet-tablet .rich-image__frame--tablet:last-child {
align-self: flex-start;
margin: 0
}
.rich-image--desktop-desktop {
flex-direction: column
}
.rich-image--desktop-desktop .rich-image__frame--desktop {
align-self: flex-end;
margin: 0;
max-width: 80%
}
@media (min-width: 1200px) {
.rich-image--desktop-desktop .rich-image__frame--desktop {
max-width:81.2rem
}
}
.rich-image--desktop-desktop .rich-image__frame--desktop:last-child {
align-self: flex-start;
margin: -10% 0 0;
z-index: 2
}
@media (min-width: 768px) {
.rich-image--desktop-desktop .rich-image__frame--desktop:last-child {
margin-top:-20%
}
}
.zoom-images {
margin: 4.5rem -3rem
}
@media (min-width: 768px) {
.zoom-images {
margin:8.3rem -8.3rem
}
}
.zoom-images--multiple {
display: grid;
grid-template-columns: repeat(2,1fr)
}
.zoom-images__item {
background: 0 0;
border: none;
padding: 0;
z-index: 1;
cursor: zoom-in;
display: block;
width: 100%
}
.zoom-images__item--zoomed {
z-index: 2
}
.zoom-images__overlay {
background-color: hsla(0,0%,100%,.8);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
cursor: zoom-out
}
body.dark .zoom-images__overlay {
background-color: rgba(15,23,39,.8)
}
.zoom-images__image {
filter: brightness(1) contrast(1);
transition: filter .6s cubic-bezier(.645,.045,.355,1),background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .zoom-images__image {
filter: brightness(85%) contrast(1.1)
}
.zoom-images__image--large {
width: 106.2rem;
max-width: 90vw;
max-height: 100%
}
.zoom-images__image--shadow {
box-shadow: inset 0 .025rem 0 rgba(0,0,0,.15),0 .6rem 1.8rem .1rem rgba(0,0,0,.14),0 0 0 .25rem transparent
}
.rich-content {
font-size: 1.5rem;
line-height: 1.6
}
.rich-content ol,.rich-content ul {
margin: 1.5em 2em
}
.rich-content b,.rich-content__inline-bold {
font-weight: 600
}
.rich-content li,.rich-content p {
margin: 0 0 1em
}
.rich-content li:empty,.rich-content p:empty {
display: none
}
.rich-content__strike {
position: relative;
display: inline;
padding: 0 .25em;
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none
}
.rich-content__strike:after,.rich-content__strike:before {
content: "-------";
display: block;
width: 100%;
height: 0;
border-top: .2rem solid;
opacity: .9;
position: absolute;
text-indent: 110%;
overflow: hidden;
white-space: nowrap;
left: 0;
top: 50%
}
.rich-content__strike:before {
transform: rotate(6deg)
}
.rich-content__strike:after {
transform: rotate(-6deg)
}
.rich-content__title {
font-weight: 500;
text-transform: uppercase;
margin: 2.5em 0 .5em;
font-size: 1em
}
.rich-content__title--level-1 {
font-size: 2rem;
margin: 2.5em 0 1em
}
@media (min-width: 992px) {
.rich-content__title--level-1 {
font-size:2.2rem
}
}
.rich-content__title--level-3 {
text-transform: none
}
.rich-content__inline-code {
display: inline;
padding: 0 .15em;
margin: 0 -.15em;
font: 400 90% FiraCode,monospace;
letter-spacing: 0;
background: #f5f5f5;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .rich-content__inline-code {
background: #1b2843
}
.rich-content__inline-code--definition {
background-color: #f4fcfc
}
body.dark .rich-content__inline-code--definition {
background: #2759ba
}
.rich-content__quote {
margin: 1.5em 0;
padding: .75em 1em .75em 1.5em;
font-style: italic;
border-left: .4rem solid #f5f5f5
}
.rich-content__quote:empty {
display: none
}
.rich-content__rule {
margin: 4.5rem -3rem;
display: block;
height: .2rem;
border: none;
background: #f5f5f5
}
@media (min-width: 768px) {
.rich-content__rule {
margin:8.3rem -8.3rem
}
}
body.dark .rich-content__rule {
background: #151f34
}
.rich-content--blog,.rich-content--definition {
max-width: 82rem;
margin: 0 auto
}
@media (min-width: 992px) {
.rich-content--blog,.rich-content--definition {
font-size:1.8rem
}
}
.rich-content--project {
padding: 7.6rem 0 1.6rem
}
@media (min-width: 768px) {
.rich-content--project {
padding:10.6rem 0 2.2rem
}
}
@media (min-width: 992px) {
.rich-content--project {
padding:11rem 0 15rem
}
}
@media (min-width: 1200px) {
.rich-content--project {
padding-top:13rem
}
}
.share-bar {
margin: 9rem auto 4.3rem;
max-width: 82rem
}
.share-bar__list {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center
}
.share-bar__item {
color: #111;
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
body.dark .share-bar__item {
color: #fff
}
.share-bar__item+.share-bar__item {
margin-left: 2rem
}
.share-bar__button {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: none;
background: 0 0;
padding: .5rem;
margin: 0;
cursor: pointer;
width: 3rem;
height: 3rem;
color: currentColor;
transition: color .6s cubic-bezier(.645,.045,.355,1)
}
@media not all and (hover: none) {
.share-bar__button--facebook:active,.share-bar__button--facebook:focus,.share-bar__button--facebook:hover {
color:#3b5998
}
}
@media not all and (hover: none) {
.share-bar__button--linkedin:active,.share-bar__button--linkedin:focus,.share-bar__button--linkedin:hover {
color:#0077b5
}
}
@media not all and (hover: none) {
.share-bar__button--twitter:active,.share-bar__button--twitter:focus,.share-bar__button--twitter:hover {
color:#1da1f2
}
}
@media not all and (hover: none) {
.share-bar__button--reddit:active,.share-bar__button--reddit:focus,.share-bar__button--reddit:hover {
color:#ff4500
}
}
.share-bar__title {
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
padding: .5rem 0 0
}
.see-also {
position: relative;
display: flex;
margin: 0 -3rem;
padding: 0 3rem;
background: #355c93;
color: #fff;
transition: background .6s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.see-also {
margin:0 -8.3rem;
padding: 0 8.3rem
}
}
body.dark .see-also {
background: #2759ba
}
.see-also:after,.see-also:before {
content: "";
position: absolute;
top: 0;
right: 3rem;
bottom: 0;
width: 2rem;
opacity: 0;
transition: opacity .6s cubic-bezier(.645,.045,.355,1)
}
@media (min-width: 768px) {
.see-also:after,.see-also:before {
right:8.3rem
}
}
.see-also:after {
background: transparent linear-gradient(90deg,rgba(53,92,147,0),#355c93);
opacity: 1
}
body.dark .see-also:after {
opacity: 0
}
.see-also:before {
background: transparent linear-gradient(90deg,rgba(39,89,186,0),#2759ba);
opacity: 0
}
body.dark .see-also:before {
opacity: 1
}
.see-also__content {
overflow-y: hidden;
padding: 1.8rem 0
}
.see-also__title {
padding: 1.8rem .7rem 1.8rem 0
}
.see-also__list,.see-also__title {
list-style: none;
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
white-space: nowrap
}
@media (min-width: 768px) {
.see-also__list,.see-also__title {
font-size:2rem
}
}
.see-also__list {
display: flex;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory
}
.see-also__list::-webkit-scrollbar {
display: none
}
.see-also__list-item {
scroll-snap-align: start
}
.see-also__list-item+.see-also__list-item {
margin: 0 0 0 .7em
}
.see-also__list-item:last-child {
padding-right: 1.6rem
}
.see-also__item-link,.see-also__item-link:active,.see-also__item-link:focus,.see-also__item-link:hover,.see-also__item-link:visited {
color: currentColor;
text-decoration: none
}
.see-also__item-link:active,.see-also__item-link:focus,.see-also__item-link:hover {
text-decoration: underline
}
.glossary-definition__inner {
max-width: 82rem;
margin: 0 auto;
padding: 0 0 6rem
}
@media (min-width: 992px) {
.glossary-definition__inner {
padding-bottom:9.2rem
}
}
.gatsby-image-wrapper {
position: relative;
overflow: hidden
}
.gatsby-image-wrapper img {
all: inherit;
bottom: 0;
height: 100%;
left: 0;
margin: 0;
max-width: none;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
object-fit: cover
}
.gatsby-image-wrapper [data-main-image] {
opacity: 0;
transform: translateZ(0);
transition: opacity .25s linear;
will-change: opacity
}
.gatsby-image-wrapper-constrained {
display: inline-block
}
/* Static HTML adapter for the original Blaze Magic design. */
html, body { min-height: 100%; }
body { background: var(--background); color: var(--text-colour); }
.page { min-height: 100vh; }
.container__compressed { margin: 0 auto; padding-left: 3rem; padding-right: 3rem; max-width: 160rem; }
/* The original React Hero changed DOM order at 1024px. CSS grid reproduces that behaviour. */
.home-hero-layout { display:grid !important; grid-template-areas:"heading" "image" "subheading" "cta"; width:100%; }
.home-hero-layout .home-hero-copy { display:contents; }
.home-hero-layout .heading { grid-area:heading; }
.home-hero-layout .home-hero-image-col { grid-area:image; display:flex; justify-content:center; }
.home-hero-layout .subheading { grid-area:subheading; }
.home-hero-layout .home-hero-cta { grid-area:cta; display:flex; justify-content:center; }
@media (min-width:1024px) {
.home-hero-layout { grid-template-columns:50% 50%; grid-template-areas:"copy image"; align-items:flex-start; }
.home-hero-layout .home-hero-copy { display:flex; flex-direction:column; grid-area:copy; margin-left:10rem; }
.home-hero-layout .home-hero-image-col { grid-area:image; width:100%; }
.home-hero-layout .home-hero-cta { display:block; }
}
/* Gatsby Image wrappers are replaced with direct images. */
.hero__image { height:auto; }
.hero__image img { width:100%; height:auto; display:block; max-width:none; }
.about__image, .promotion__image { height:auto; object-fit:contain; }
.quote__logo--image img { width:100%; height:100%; object-fit:contain; }
/* React Elastic Carousel replacement, retaining original classes/controls. */
.static-carousel { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; position:relative; }
.static-carousel__viewport { overflow:hidden; width:100%; }
.static-carousel__track { display:flex; width:100%; transition:transform .45s cubic-bezier(.645,.045,.355,1); }
.static-carousel__slide { flex:0 0 100%; min-width:0; display:flex; justify-content:center; }
.static-carousel .carousel__pagination { grid-column:1 / -1; justify-self:center; }
.static-carousel .carousel__side { align-self:center; z-index:2; }
.static-carousel .carousel__side span { font-family:'Material Icons'; font-weight:normal; font-style:normal; }
.static-carousel--testimonials .static-carousel__slide { display:block; }
.static-carousel--testimonials .carousel__pagination--numbers { text-align:center; }
@media (max-width:767px) {
.static-carousel { grid-template-columns:30px minmax(0,1fr) 30px; }
}
/* Theme/dropdown compatibility without React inline maxHeight. */
.navigation__dropdown { max-height:0; }
.navigation__dropdown--opened { max-height:500px; }
.navigation__item-dropdown > .navigation__link { display:inline-block; }
.navigation__separator { display:block; min-height:.35rem; }
.themeButton { padding:.4rem; }
.themeButton svg { width:24px; height:24px; }
/* Rate page replacement for react-simple-star-rating. */
.rating-stars { display:flex; gap:.35rem; padding:5rem 0; justify-content:center; }
.rating-star { border:0; background:none; padding:.15rem; cursor:pointer; font-size:5rem; line-height:1; color:#f5b301; }
.rating-star:focus-visible { outline:2px solid currentColor; }
.rating-thanks[hidden] { display:none; }
.five-stars { display:flex; justify-content:center; gap:.1rem; color:#f5b301; }
.five-stars .material-icons { font-size:40px; }
/* Keep the original contact form usable in static HTML. */
.contact-form__status { margin-top:1rem; }
/* Small accessibility/focus additions that don't change the original copy. */
.navigation-burger:focus-visible, .themeButton:focus-visible, .carousel__side:focus-visible, .dot:focus-visible, .arrow-button:focus-visible, .primary-button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
/* Self-hosted contact form: invisible anti-spam honeypot. */
.contact-form__honeypot {
position:absolute !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
clip:rect(1px,1px,1px,1px) !important;
clip-path:inset(50%) !important;
white-space:nowrap !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE LAYOUT FIXES
These rules correct two edge cases that appeared mainly on phones/tablets
held in landscape orientation:
1. The desktop-only Home navigation item could sit underneath the BLAZE logo.
The logo already links home, so Home remains in the mobile menu only.
2. The About image retained too much of its intrinsic width and squeezed the
text column off-screen. A two-column grid gives both sides a real, bounded
share of the available width.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
/* On desktop/tablet navigation the logo is the Home link. */
.navigation__list > .navigation__item:first-child {
display: none;
}
/* Keep the About image and copy inside the viewport at every desktop width. */
.about__content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(3rem, 5vw, 7rem);
align-items: start;
column-count: initial;
column-gap: normal;
}
.about__content > * {
width: auto;
min-width: 0;
}
.about__content > .about__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-width: 0;
object-fit: contain;
}
.about__content > div {
min-width: 0;
overflow-wrap: break-word;
}
}
/* Slightly tighten the gap at the widths most commonly used by phones in
landscape and smaller tablets, leaving more room for readable copy. */
@media (min-width: 768px) and (max-width: 991px) {
.about__content {
max-width: 90%;
gap: 3rem;
}
}
/* Landscape phones / small tablets have enough width for the horizontal menu,
but not for the looser desktop spacing. Keep the same design while tightening
it so labels cannot drift underneath the logo. */
@media (min-width: 768px) and (max-width: 991px) {
.navigation__item {
font-size: 1rem;
}
.navigation__item + .navigation__item {
margin-left: 1rem;
}
.navigation__link {
padding: .4rem;
letter-spacing: .15rem;
}
.about__content {
max-width: 94%;
padding-left: 3rem;
padding-right: 3rem;
}
}
/* Keep the desktop/tablet header in normal flex layout instead of absolutely
positioning the whole navigation over the header. This prevents the menu
from ever occupying the same horizontal space as the logo. */
@media (min-width: 768px) {
.header > .header__focus-trap {
position: static;
right: auto;
margin-left: auto;
min-width: 0;
}
.navigation {
min-width: 0;
}
.navigation__list {
width: auto;
justify-content: flex-end;
}
/* Restore Home in the desktop menu; normal flex positioning now keeps it
beside (rather than underneath) the logo. */
.navigation__list > .navigation__item:first-child {
display: block;
}
.navigation__item {
flex: 0 1 auto;
font-size: clamp(.9rem, 1vw, 1.1rem);
}
.navigation__item + .navigation__item {
margin-left: clamp(.7rem, 1.5vw, 2.4rem);
}
.navigation__link {
padding-left: .35rem;
padding-right: .35rem;
letter-spacing: clamp(.1rem, .16vw, .2rem);
white-space: nowrap;
}
}
/* --------------------------------------------------------------------------
RESPONSIVE LAYOUT FIXES — PASS 2
The first responsive patch still had a conflicting rule that re-enabled the
desktop Home item after hiding it. These final overrides are intentionally at
the end of the stylesheet so they win over both the original Gatsby CSS and
the earlier adapter rules.
-------------------------------------------------------------------------- */
/* The BLAZE logo is the Home link on tablet/desktop. Keeping a second HOME item
wastes horizontal space and can make the menu run underneath the logo. */
@media (min-width: 768px) {
.navigation__list > .navigation__item:first-child {
display: none !important;
}
.header-logo {
flex: 0 0 auto;
position: relative;
z-index: 2;
}
.header > .header__focus-trap {
flex: 0 1 auto;
min-width: 0;
}
.navigation,
.navigation__list {
min-width: 0;
}
.navigation__list {
flex-wrap: nowrap;
justify-content: flex-end;
}
}
/* At landscape-phone / small-tablet widths there is room for the horizontal
menu, but only if it is compact. This prevents labels from overlapping the
logo or falling off the right edge. */
@media (min-width: 768px) and (max-width: 1099px) {
.container__compressed {
padding-left: 2rem;
padding-right: 2rem;
}
.header-logo__text {
font-size: 3.8rem;
width: auto;
margin-left: 0;
}
.navigation__item {
font-size: .9rem !important;
}
.navigation__item + .navigation__item {
margin-left: .55rem !important;
}
.navigation__link {
padding-left: .25rem !important;
padding-right: .25rem !important;
letter-spacing: .08rem !important;
}
.themeButton {
padding-left: .2rem;
padding-right: .2rem;
}
}
/* The original responsive rules jumped to a 10rem hero heading at 700px,
before switching back down at 1024px. That discontinuity is what made the
headline unusually large on phones/tablets in landscape. Make this range
fluid instead. */
@media (min-width: 700px) and (max-width: 1023px) {
.page__header--home main span.heading {
font-size: clamp(6.2rem, 8.5vw, 8.2rem) !important;
line-height: .98;
max-width: 94vw;
overflow-wrap: normal;
}
.page__header--home main p.subheading {
margin-top: -10rem !important;
font-size: clamp(2.2rem, 3vw, 2.8rem) !important;
max-width: 78rem;
}
.page__header--home .hero__image {
width: min(118%, 82rem) !important;
margin-top: -6rem !important;
margin-left: 0 !important;
}
}
/* On the first desktop breakpoint, reserve a little more width for the copy
and stop the oversized portrait from covering the end of ILLUSIONIST. */
@media (min-width: 1024px) and (max-width: 1279px) {
.home-hero-layout {
grid-template-columns: 55% 45% !important;
}
.home-hero-layout .home-hero-copy {
margin-left: clamp(4rem, 6vw, 7rem) !important;
min-width: 0;
position: relative;
z-index: 2;
}
.page__header--home main span.heading {
font-size: clamp(6.2rem, 6.2vw, 7.2rem) !important;
line-height: 1;
max-width: 100%;
}
.home-hero-layout .home-hero-image-col {
min-width: 0;
position: relative;
z-index: 1;
overflow: visible;
}
.page__header--home .hero__image {
width: 128% !important;
margin-left: -3rem !important;
margin-top: -4rem !important;
}
}
/* Long words/headings should never create horizontal page overflow. */
.heading,
.subheading,
.about__content,
.about__content p {
max-width: 100%;
}
html,
body {
overflow-x: clip;
}
/* --------------------------------------------------------------------------
RESPONSIVE HEADER FIX — PASS 3
The horizontal navigation is content-driven rather than device-driven.
Between the old 768px breakpoint and the width where all labels genuinely
fit, the flex navigation could shrink its own box while the text overflowed
left underneath the BLAZE logo. Below 920px we therefore use the existing
mobile navigation instead of squeezing the desktop menu into insufficient
space. JavaScript uses the same 920px breakpoint.
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 919px) {
.navigation-burger {
display: block !important;
}
.header > .header__focus-trap {
position: static !important;
right: auto !important;
margin-left: auto !important;
flex: 0 0 auto !important;
min-width: auto !important;
}
nav.navigation,
body.dark nav.navigation {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
z-index: 100 !important;
transform: translate3d(100%, 0, 0) !important;
opacity: .5 !important;
background: var(--background) !important;
color: var(--text-colour) !important;
}
body.dark nav.navigation {
background: #101a31 !important;
color: #fff !important;
}
nav.navigation.navigation--opened,
body.dark nav.navigation.navigation--opened {
transform: translateZ(0) !important;
opacity: 1 !important;
}
.navigation__list {
display: block !important;
width: auto !important;
margin: 0 !important;
}
/* HOME belongs inside the hamburger menu even though it is intentionally
omitted from the horizontal desktop menu. */
.navigation__list > .navigation__item:first-child {
display: block !important;
}
.navigation__item {
height: auto !important;
display: block !important;
text-align: center !important;
font-size: 2rem !important;
margin-top: .6em !important;
position: relative !important;
transform: matrix3d(1,0,0,0,0,0,1,0,0,-1,0,0,50,0,0,1) !important;
opacity: 0 !important;
}
.navigation--opened .navigation__item {
transform: none !important;
opacity: 1 !important;
}
.navigation__item:first-child {
margin-top: 0 !important;
}
.navigation__item + .navigation__item {
margin-left: 0 !important;
}
.navigation__item--toggle {
margin-top: 3rem !important;
padding: 0 !important;
min-height: 2.8rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.navigation__link {
padding: .5rem !important;
letter-spacing: .2rem !important;
}
.navigation__link::after {
display: none !important;
}
.navigation__dropdown {
position: relative !important;
top: auto !important;
padding-top: 0 !important;
margin-bottom: 1.25rem !important;
padding-bottom: 0 !important;
}
.navigation__dropdown::before {
display: none !important;
}
.navigation__dropdown__container--inner {
align-items: center !important;
}
.navigation__link--dropdown {
font-size: 1.5rem !important;
}
html.nav-open {
overflow: hidden !important;
}
}
/* --------------------------------------------------------------------------
RESPONSIVE HERO FIX — PASS 4
In the stacked homepage hero (below the 1024px two-column breakpoint), the
original Gatsby artwork used negative top margins to pull the portrait upward.
At some exact landscape/mobile widths that caused the portrait to physically
cover the second line of "MAGICIAN & ILLUSIONIST". In the static rebuild we
keep the sections in normal document flow at these widths: the heading ends,
then the portrait begins. This is deliberately a geometry fix rather than a
font-size workaround, so it remains safe at every intermediate pixel width.
-------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.page__header--home .home-hero-layout .heading {
position: relative;
z-index: 2;
margin-bottom: 0 !important;
}
.page__header--home .home-hero-image-col {
position: relative;
z-index: 1;
padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
min-width: 0;
}
.page__header--home .hero__image {
margin-top: 0 !important;
margin-left: 0 !important;
width: min(118%, 82rem) !important;
max-width: 118vw;
}
}