/** Shopify CDN: Minification failed
Line 282:1 Unexpected "/"
**/
/*--------------------------------------------------------------
Theme Custom CSS
Author: David Beckett (info@tekora.co.uk)
Created: May 2025
Description: Custom styles for animated banners, scroll effects, etc.
--------------------------------------------------------------*/
/* ==========================================================================
Custom Theme Notes
==========================================================================
Assets added to in theme.liquid:
--------------------------------------------------
{{ 'laygrotesk-fonts.css' | asset_url | stylesheet_tag }}
{{ 'custom-theme.css' | asset_url | stylesheet_tag }}
Scripts added before tag in theme.liquid:
--------------------------------------------------
---------------------------------------------------------------------------
Notes:
- 'laygrotesk-fonts.css' includes custom font imports.
- 'custom-theme.css' contains additional overrides and custom components.
- JS files are registered for GSAP-based animations and site interactivity.
=========================================================================== */
/* Fix horizontal bug */
/* .template-index .shopify-section {
overflow: hidden;
} */
.template-index .hero__content {
padding-top: 36px;
}
.supports-touch hover-images:after {
background: #ddd !important;
}
#shopify-section-template--25270995321173__feature_icons_JVCPz8.shopify-section,
#shopify-section-template--25342621581653__feature_icons_JVCPz8.shopify-section {
overflow: visible;
}
.template-index .product-item__title {
z-index: 1;
}
.supports-touch .product-item--overlay-text .product-information {
padding-left: 0;
padding-right: 0;
}
/* Turn Off links */
/* .template-index a {
pointer-events: none !important;
} */
.template-index .brick__block--products {
padding-top: 0px;
padding-bottom: 1px;
}
.template-index .grid {
gap: 1px;
}
.template-index .brick__block__image {
margin-right: 1px;
}
@media (max-width: 768px) {
.template-index .brick__block__image {
margin-right: 1px;
margin-bottom: 1px;
}
a.header__logo__link {
width: 400px;
max-width: calc(100vw - 139px - var(--scrollbar-width));
}
}
@media only screen and (min-width: 750px) {
.template-index .brick__block--products:last-child {
padding-left: 0 !important;
}
}
/* Top icons */
.header__cart__status {
top: 12px !important;
}
.icon-instagram-e {
display: inline-block;
width: 15px;
position: relative;
top: 3px;
}
.icon-bag-e {
display: inline-block;
width: 15px;
}
.socials {
--gap: -2px !important;
}
a svg path {
fill: black;
opacity: 50%;
transition: fill 0.3s ease;
}
a:hover svg path {
fill: #black;
}
a span.navtext {
color: #212121 !important;
}
/* Navlink menu */
a:hover span.navtext {
color: #000 !important;
}
a.navlink span {
text-transform: uppercase;
}
.navlink--toplevel .navtext:after {
background-color: transparent !important;
}
/* Hero slider title */
.slideshow__slider .hero__title {
font-size: 28px !important;
text-transform: none !important;
font-weight: 100;
color: white !important;
letter-spacing: 0px !important;
}
/* Hero Horizontal Styling */
/* Hero title width */
.template-index .hero__title {
max-width: 510px;
max-width: 100%;
width: 100%;
word-wrap: normal;
line-height: 1.3;
background-color: transparent;
}
.template-index
#BrickSection--template--25342621581653__section_custom_content_gDriFe
.hero__button {
position: absolute;
bottom: 56px;
}
.template-index .btn {
padding: 5px 10px;
font-size: 13px;
text-transform: uppercase;
}
.template-index .index-hero .btn {
color: white;
background-color: transparent;
text-decoration: none;
font-weight: 100;
transition: none;
}
.template-index .index-hero .btn:hover {
color: white;
text-decoration: none;
font-weight: 100;
}
.template-index .index-hero .btn span,
.template-index .index-hero .btn:hover span {
background: none;
text-decoration: none;
}
/* @media only screen and (max-width: 749px) { */
.template-index .index-hero .hero__button {
display: flex;
align-items: left !important;
justify-content: flex-start;
margin-top: 0px;
margin-bottom: 0;
}
.template-index .index-hero .btn {
padding: 0;
}
.template-index .index-hero .align--bottom-center-mobile {
align-items: flex-start !important;
text-align: left;
}
/* } */
.template-index .hero-content-wrapper {
top: 0 !important;
left: 0 !important;
transform: none !important;
height: 100%;
display: flex;
align-items: center;
padding: 50px;
z-index: 50;
}
.template-index .hero-content-wrapper .panel-content {
text-align: left !important;
max-width: 780px !important;
}
.template-index .hero-content-wrapper .panel-content .panel-buttons {
justify-content: left;
}
.template-index .hero-content-wrapper .panel-content .panel-buttons .btn {
padding: 11px 20px !important;
font-size: 16px !important;
letter-spacing: 0px;
}
/* Body font styling for all tags */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.template-index body,
.template-index h1,
.template-index h2,
.template-index h3,
.template-index h4,
.template-index h5,
.template-index h6,
.template-index p,
.template-index a {
text-transform: none;
}
/*
.heading-x-small
.heading-small,
.heading-medium,
*/
/* .template-index .product-item__title,
.template-index .hero-content-wrapper .panel-content .heading-1,
a.navlink,
.video-heading-1,
.title-area,
/* .description-area,
.description-area p, */
.product-card h3,
.image-button {
font-family: "Unica One", sans-serif;
text-transform: uppercase;
}
*/
/* Headers in hero */
.template-index .heading-1,
.template-index .heading-2 {
color: white !important;
}
.template-index .video-heading-1,
.template-index .video-heading-2 {
color: black !important;
}
.template-index .panel .video-heading-1,
.template-index .panel .heading-1 {
font-size: 16px;
}
.template-index .panel .video-heading-2,
.template-index .panel .heading-2 {
font-size: 64px;
line-height: 1.1;
font-family: "LayGrotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif !important;
text-transform: none !important;
}
.template-index .video-heading-2 {
margin: 0;
}
/* Tablet */
@media (max-width: 1024px) {
.template-index .panel .video-heading-1,
.template-index .panel .heading-1 {
font-size: 18px;
}
.template-index .panel .video-heading-2,
.template-index .panel .heading-2 {
font-size: 64px;
}
}
/* Mobile */
@media (max-width: 768px) {
.template-index .panel .video-heading-1,
.template-index .panel .heading-1 {
font-size: 16px;
}
.template-index .panel .video-heading-2,
.template-index .panel .heading-2 {
font-size: 40px;
}
}
/* Homepage small and medium headers */
.template-index .heading-x-large {
max-width: 60%;
width: 100%;
word-wrap: normal;
}
@media (max-width: 750px) {
.template-index .heading-x-large {
max-width: 100%;
}
}
/* Homepage small and medium headers */
.template-index .heading-medium,
.template-index .heading-small {
color: white;
font-size: 16px;
}
.template-index .product-item__title {
text-align: center;
}
/* Hide product prices */
.template-index .product-item__price__holder {
display: none;
}
/* Feature-Icons.liquid */
#shopify-section-template--25270995321173__feature_icons_JVCPz8 {
background: linear-gradient(to top, #d7d8da 10%, white 10%);
}
.feature-icons-wrapper {
padding: 4rem 2rem;
text-align: center;
}
.feature-icons-text {
max-width: 800px;
margin: 0 auto 2rem;
font-size: 1.2rem;
line-height: 1.6;
}
.icon-feature-section {
max-width: 720px;
margin: 0 auto;
text-align: center;
z-index: 1;
position: relative;
/* top: -140px; */
top: -250px;
padding: 0 20px;
}
@media (max-width: 749px) {
.icon-feature-section {
top: -66px;
}
}
.icon-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0rem;
max-width: 940px;
margin: 0 auto;
/* top: 40px; */
position: relative;
}
@media (max-width: 749px) {
.icon-grid {
top: 0;
}
}
.icon-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1rem;
width: 100px;
height: auto;
cursor: pointer;
transition: transform 0.3s ease;
padding: 16px;
overflow: hidden;
}
.icon-box > svg {
width: 80px;
height: auto;
}
.icon-box > svg path,
.icon-box > svg .fill {
fill: #d7d8da;
transition: fill 0.3s ease;
}
.icon-box:hover > svg path,
.icon-box:hover > svg .fill {
fill: #448aff;
}
.icon-svg-label {
width: 80px;
height: auto;
}
.icon-svg-label svg {
width: 100%;
height: auto;
}
@media (max-width: 749px) {
.icon-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0;
padding: 0 1rem;
}
.icon-box {
width: 15%; /* 4 icons per row */
padding: 10px 8px;
}
.icon-box > svg {
width: 50px; /* smaller icon */
height: auto;
}
.icon-svg-label {
width: 60px;
font-size: 0.8rem;
margin-top: 0.5rem;
}
.icon-svg-label svg {
width: 80%;
}
}
/* Fix shoe container */
#shopify-section-template--25342621581653__section_hero_JgRB6E
.image__fill
img {
object-fit: contain;
}
.anim-move {
opacity: 0;
transform: translateY(20px);
}
.title-area {
font-size: 14px;
font-weight: 600;
min-height: 40px;
color: black;
}
.description-area {
font-size: 14px;
margin-bottom: 2rem;
transition: opacity 0.3s ease;
min-height: 40px;
max-width: 600px;
margin: 0 auto 0;
color: black;
}
@media (max-width: 767px) {
.description-area {
/* min-height: 120px; */
min-height: 80px;
}
.feature-icons-wrapper {
padding: 2rem 1rem;
}
.feature-icons-text {
font-size: 1rem;
}
}
/* Perfomance label */
#shopify-section-template--25270995321173__section_products_image_cNDMBU,
#ProductsImage--template--25270995321173__section_products_image_cNDMBU,
.product-row-with-image {
position: relative;
overflow: hidden;
}
/* Section above pb */
#shopify-section-template--25270995321173__section_products_image_hYdj8Q {
padding-bottom: 11vw;
}
/* Animated banner */
#shopify-section-template--25270995321173__animated_banner_PbFxWT,
#shopify-section-template--25342621581653__animated_banner_PbFxWT {
padding-top: 11vw;
/* background-color: #1d2b4a; */
padding-bottom: 14vw;
}
@media (max-width: 749px) {
#shopify-section-template--25270995321173__animated_banner_PbFxWT,
#shopify-section-template--25342621581653__animated_banner_PbFxWT {
padding-top: 0;
/* background-color: #1d2b4a; */
padding-bottom: 0;
}
/* Fix shoe being cut off */
#shopify-section-template--26065080615253__section_hero_JgRB6E
.image__fill
img {
padding: 44px;
}
}
.shoe-mask {
width: 830px;
height: 589px;
position: relative;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-size: contain;
-webkit-mask-size: contain;
overflow: hidden;
background-color: white;
}
.water-wave {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
z-index: 1;
opacity: 0.6;
}
.animate-fill {
animation: fillUpWave 4s forwards cubic-bezier(0.2, 0.6, 0.8, 0.4);
}
.water-wave::after {
content: "";
background-color: #04acff;
width: 100%;
height: 296px;
display: block;
bottom: 4px;
position: relative;
opacity: 1;
}
.wave-svg {
width: 200%;
height: 150px;
display: block;
position: relative;
bottom: 0;
}
.waveShape {
fill: #04acff;
animation: waveMove 2s linear infinite;
}
.lottie-wave {
z-index: 0;
}
/* Optional gradient overlay */
.template-index .gradient-layer {
position: absolute;
inset: 0;
background-size: contain;
z-index: 0;
opacity: 1;
pointer-events: none;
display: none;
}
.animated-banner-container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
z-index: 1;
}
/* Foreground SVG or other overlay elements */
.animated-banner {
position: absolute;
z-index: 2;
width: 100%;
/* height: 30%; */
display: flex;
align-items: center;
justify-content: center;
top: 142px;
z-index: 1;
}
.animated-banner img {
width: 100%;
}
.dial-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
z-index: 0;
transition: transform 0.3s ease;
width: 100%;
height: 100%;
background-color: #dddddd; /* fake "fill" color */
mask-image: var(--dial-url);
-webkit-mask-image: var(--dial-url);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
mask-position: center;
-webkit-mask-position: center;
display: block;
}
.lottie-wave {
opacity: 1;
top: 50%;
position: relative;
transform: translateY(-50%);
}
#lottie-wave svg path {
fill: white !important;
}
@keyframes fillUpWave {
0% {
height: 0;
}
100% {
height: 100%;
}
}
@keyframes waveMove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Animation in view */
/* Default state before scroll */
.shoe-mask {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* When scrolled into view */
.in-view .shoe-mask {
opacity: 1;
transform: translateY(0);
}
/* Rotate Mobile */
@media (max-width: 750px) {
.in-view .shoe-mask {
transform: translateY(0) rotate(270deg);
transition: none;
}
/* .in-view .lottie-wave {
top: 50%;
transform: translateY(-50%) rotate(90deg);
} */
}
/* Override mobile switch */
@media (max-width: 992px) {
.header__mobile {
display: grid !important;
}
.header__desktop {
position: relative !important;
overflow: hidden !important;
max-height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
@media (min-width: 992px) {
.header__mobile {
display: none !important;
}
.header__desktop {
position: static !important;
overflow: visible !important;
max-height: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* horizontal-scroll */
.horizontal-scroll {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
overflow: hidden;
}
.panel {
flex: 0 0 100vw;
height: 100vh;
position: relative;
}
.panel img {
width: 100%;
height: 100%;
object-fit: cover;
}
.panel {
position: relative;
overflow: hidden;
}
.hero-content-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
z-index: 2;
}
.panel-content {
flex-direction: column;
min-width: 0;
overflow-wrap: break-word;
text-align: center;
}
.panel-content h2,
.panel-content h3 {
margin: 0 0 10px;
}
.panel-buttons {
display: flex;
gap: 1.6rem;
margin-top: 1rem;
flex-direction: row;
justify-content: center;
}
/* Video styles */
.panel-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.video-overlay {
position: absolute;
z-index: 2;
background: none;
max-width: 50%;
}
/* Product Row with Image */
.product-row-container {
/* max-width: 1200px; */
margin: 0 auto;
padding: 2rem;
}
@media (max-width: 846px) {
.products-grid {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.product-card {
width: 43%;
}
}
@media (min-width: 847px) {
.products-grid {
display: flex;
justify-content: space-between;
gap: 1px;
}
}
.product-card {
text-align: center;
}
.product-card h3 {
position: relative;
font-weight: 400;
color: inherit;
margin: 0;
transition: color 0.3s;
font-size: 16px;
top: 6px;
}
.product-card p {
display: none;
}
.product-card img {
width: 100%;
/* max-width: 330px; */
max-width: 100%;
height: auto;
display: block;
transition: opacity 0.3s ease;
}
.product-card .hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}
.product-card:hover .hover-image {
opacity: 1;
}
.product-card:hover .primary-image {
opacity: 0;
}
/* Bottom image section */
.bottom-image-wrapper {
margin-top: 3rem;
}
.bottom-image {
position: relative;
width: 100%;
height: var(--desktop-height, 60vh);
background-size: cover;
background-position: center;
}
.image-overlay {
position: absolute;
inset: 0;
background-color: var(--overlay-color);
opacity: var(--overlay-opacity);
pointer-events: none;
display: none;
}
.image-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-left .image-content {
left: 10%;
transform: translateY(-50%);
}
.text-right .image-content {
right: 10%;
left: auto;
transform: translateY(-50%);
}
.image-button {
background-color: white;
color: #515357;
padding: 15px 19px;
text-decoration: none;
border-radius: 3px;
border: 1px solid white;
font-size: 13px;
line-height: 1.375;
letter-spacing: 0.1em;
}
/* Parallax code for Product Row with Image */
.bottom-image-wrapper {
margin-top: 3rem;
}
.parallax-image {
position: relative;
width: 100%;
height: var(--desktop-height, 60vh);
overflow: hidden;
}
.image__fill {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
}
.image-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.text-left .image-content {
left: 10%;
transform: translateY(-50%);
}
.text-right .image-content {
right: 10%;
left: auto;
transform: translateY(-50%);
}
.image-button {
background-color: white;
color: #515357;
padding: 15px 19px;
text-decoration: none;
border-radius: 3px;
border: 1px solid white;
font-size: 13px;
line-height: 1.375;
letter-spacing: 0.1em;
}
/* Hover fix */
.product-image-wrapper {
position: relative;
display: inline-block;
}
/* Footer */
/* @media (min-width: 750px) { */
#Newsletter--template--25342621581653__section_newsletter_EanqeB
.brick__block--text {
padding-top: 0vw;
padding-bottom: 7vw;
}
#Newsletter--template--25342621581653__section_newsletter_EanqeB,
#Newsletter--template--25342621581653__section_newsletter_EanqeB .hero__content,
#Newsletter--template--25342621581653__section_newsletter_EanqeB
.brick__block__text,
#Newsletter--template--25342621581653__section_newsletter_EanqeB
.brick__block--text,
#Newsletter--template--25342621581653__section_newsletter_EanqeB .btn {
background-color: #f4f4f4;
}
/* #Newsletter--template--25342621581653__section_newsletter_EanqeB .btn {
font-size: 20px;
}
#Newsletter--template--25342621581653__section_newsletter_EanqeB .form__legal {
line-height: 1.2;
}
#Newsletter--template--25342621581653__section_newsletter_EanqeB p {
font-size: 20px;
}
#Newsletter--template--25342621581653__section_newsletter_EanqeB
.body-medium
p {
font-size: 18px;
}
#Newsletter--template--25342621581653__section_newsletter_EanqeB
input[type="email"] {
font-size: 18px;
} */
@media only screen and (max-width: 749px) {
.supporting-menu__copyright {
justify-content: center;
}
}
/* Force the flyout menu to be capitalize */
.drawer__main-menu .sliderow__title {
text-transform: capitalize !important;
}