/** Shopify CDN: Minification failed Line 456:25 The "+" operator only works if there is whitespace on both sides Line 999:0 Unexpected "}" **/ .change-color {background-color: #F7EDE3 !important;} .contains-media, .global-media-settings {border: none !important;} h1, .h0, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "ivymode", sans-serif !important; font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; } h1 em, .h1 em, h2 em, .h2 em, h3 em, .h3 em, h4 em, .h4 em, h5 em, .h5 em, h6 em, .h6 em { text-transform: none; padding-right: 3px; letter-spacing: 0em; line-height: 1.2; } #MainContent { font-family: "articulat-cf", sans-serif !important; font-weight: 300; } .template-index #MainContent { max-width: 100vw !important; overflow-x: clip !important; /* clip (not hidden) so it doesn't become a scroll container that breaks position:sticky */ } .tabcontent-cus h1, .tabcontent-cus h2, p { opacity: 1 !important; font-size: 14px; font-family: var(--font-body-family) !important; font-family: "articulat-cf", sans-serif !important; font-weight: 300; font-style: normal; text-transform: none; } .drawer {font-family: "articulat-cf", sans-serif !important; font-weight: 300;} body.gradient, body.gradient .color-background-1, body.gradient .color-background-2, body.gradient .color-inverse, body.gradient .color-accent-1, body.gradient .color-accent-2 { color: rgba(var(--color-foreground)) !important; } strong, b {font-weight: 500;} .bg-f7ede3 {background-color: #f7ede3;} .white {color: #FFF !Important;} .L1 {font-size: 4em; margin: 0 0 20px 0;} @media screen and (max-width: 990px) {.L1 {font-size: 3em;}} .button, .button-style, .button-style-outline { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; } .invert-color {filter: invert(100%);} .button-style, .button-style-outline {padding: 7px 15px; transition: background-color 0.5s ease;} .button-style {color: #fff; background-color: #000; border: 1px solid #000;} .button-style-outline {color: #000; background-color: transparent !important; border: 1px solid #000;} .button-style:hover {opacity: 0.7;} .button-style-outline:hover {color: #fff; background-color: #000 !important; opacity: 1;} .btn-con { padding-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; } .link, .customer a, .header-localization .disclosure .localization-form__select span, .header__menu-item span, .multicolumn-card__info .link, .announcement-bar__message, .secondary-heading { font-size: 13px !important; } .footer__copyright, .facets__heading, .product__text, .header__icon span, .drawer-menu-btn span { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; } .menu-drawer__close-button, #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li a, #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li summary, .facets__summary-label, .facets__summary span, .product-count__text, .facet-filters__label, .mobile-facets__open-label, .facet-filters__field .select__select, .mobile-facets__sort .select__select { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; } .st-wishlist-button .label { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 10px !important; } .localization-form:only-child .button, .localization-form:only-child .localization-form__select, .footer__copyright .copyright__content, .footer__copyright .copyright__content a, .card-information .caption-with-letter-spacing { font-family: "articulat-cf", sans-serif !important; font-weight: 300; text-transform: capitalize; letter-spacing: 0 !important; font-size: 1.1rem !important; } .header__icon span:hover {opacity: 0.7;} a.secondary-heading { color: #000; border-bottom: 1px solid transparent; -webkit-transition: border 500ms ease-out; -moz-transition: border 500ms ease-out; -o-transition: border 500ms ease-out; transition: border 500ms ease-out; } a.secondary-heading:hover {border-bottom: 1px solid #000; } .diamond-alt-btn-white, .alt-btn-white, .diamond-alt-btn, .alt-btn { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px !important; color: #000; border-bottom: 1px solid transparent; -webkit-transition: border 500ms ease-out; -moz-transition: border 500ms ease-out; -o-transition: border 500ms ease-out; transition: border 500ms ease-out; padding-bottom: 3px; border-bottom: 1px solid #FFF; } .diamond-alt-btn-white, .alt-btn-white {border-bottom: 1px solid #FFF; transition: border-width 2s linear;} .diamond-alt-btn, .alt-btn {border-bottom: 1px solid #000; transition: border-width 1s linear;} .diamond-alt-btn-white, .alt-btn-white {color: #FFF;} .diamond-alt-btn-white:hover, .alt-btn-white:hover, .diamond-alt-btn:hover, .alt-btn:hover {opacity: 0.7;} .diamond-alt-btn:before { content: ""; display: block; inline-size: 10px; block-size: 10px; background-color: transparent; margin: 50px auto 20px auto; border: 1px solid #000 !important; transform: rotate(45deg); } #shopify-section-template--16650557653181__image_with_text_bEyTH9 .page-width, .small-wrap {width: 1200px; margin: auto;} @media only screen and (max-width: 1300px) {.small-wrap {width: 90%; margin: auto;}} #shopify-section-template--16650557653181__image_with_text_bEyTH9 .image-with-text__text a { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px !important; } #shopify-section-template--16650557653181__image_with_text_bEyTH9 .image-with-text__text p:first-child {margin-bottom: 50px;} /* ----- WISHLIST --------- */ .st-wishlist-details-button .st-wishlist-icon {opacity: 0;} .st-wishlist-details-button { margin: 0 8px; padding: 0px !important; background-size: contain; background-position: center; background-image: url(/cdn/shop/files/heart-black.png); } .st-wishlist-details-button {margin-top: -0.5px; display: flex; align-items: center; justify-content: center;} .st-product-card .st-atc-button, .st-product-card .st-more-details { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; color: #000 !important; background-color: transparent !important; border: 1px solid #000 !important; } .st-wishlist-button {padding: 0 !important;} .st-toast {display: none;} .quantum-lbw-wishlist-btn { font-style: normal; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; color: #000 !important; flex-direction: row-reverse !important; border: none !important; padding: 0 !important; } .quantum-lbw-wishlist-login-modal .quantum-lbw-wishlist-login-modal__link.quantum-lbw-wishlist-login-modal__link--alter { color: #fff !important; background-color: #000 !important; } .hso-quantum-login-based-wishlist-product-price {display: none !important;} .hso-quantum-login-based-wishlist-product { border-radius: 0px !important; box-shadow: none !important; border: .25px solid #7d7d7b !important; } .hso-quantum-login-based-wishlist-product__content button { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 10px !important; color: #000 !important; } .header__icon, .header__icon--cart .icon { height: 3.5rem; width: 18px; padding: 0; } /* ----- FORMS --------- */ *:focus-visible { outline: .1rem solid rgba(var(--color-foreground), .5); outline-offset: 0 !important; box-shadow: none !important; } /* ----- FLEX CONS --------- */ .flex { display: flex; align-items: center; justify-content: center; } .flex-column-no-stretch {flex-direction: column; height: 100%; } .stretch {align-items: stretch;} .flex-box-left {align-items: left; justify-content: space-between;} .justiry-left {justify-content: flex-start;} .flex-bottom {margin-top: auto; align-items: flex-end;} .space-between {justify-content: space-between;} .aligner-left {justify-content: flex-start !important;} .aligner-right {justify-content: flex-end !important;} .aligner-top {align-items: flex-start !important;} .aligner-bottom {align-items: flex-end !important;} .align-center {text-align: center;} .flex-gap {gap: 2%} .mid-gap {gap: 5%;} .flex-gap-small {gap: 7px} .flex-gap-wide {gap: 4%} .flex-gap-large {gap: 6%} .flex-gap-extra-large {gap: 10%} .flex-gap-mid {gap: 6%;} .flex-gap-40 {gap: 40px;} .flex-gap-30 {gap: 30px;} /* ----- SLIDESHOW --------- */ .slideshow__controls {display: none !important;} /* ----- HEADER + ACCOUNCEMENT BAR --------- */ .utility-bar--bottom-border {border-bottom: none !important;} .announcement-bar__message { font-size: 11px !important; display: flex; align-items: center; justify-content: center; } a {text-decoration: unset !important;} .header__active-menu-item {text-decoration: unset !important;} .header__menu-item:hover span {text-decoration: unset !important;} .utility-bar .page-width { width: 100% !important; max-width: 100% !important; padding: 0 30px !important; } .header { width: 100% !important; padding: 20px 3rem !important; max-width: 100% !important; } .header__icon, .header__icon--cart .icon { height: 3.5rem; width: 3.5rem; padding: 0; } .header__icon .icon {height: 18px !Important; width: 18px !Important;} .header__icon--cart .icon {height: 25px !Important; width: 25px !Important;} @media screen and (max-width: 990px) { .header {padding: 15px 1.5rem !important;} .header__heading-link {padding: 5px 20px;} .header {display: flex !important; justify-content: space-between;} } /* ----- ALTERNATIVE HERO --------- */ .header-wrapper {position: sticky; top: 0;} /* ⚠️ HEADER MUST ALWAYS BE THE TOPMOST LAYER — DO NOT LOWER THIS. The Shopify header GROUP wrapper is its own stacking context (base.css: position:sticky; z-index:4), so the header's own z-index:59 is trapped at the GROUP's level. Any page-content element with a higher z-index then paints OVER the sticky header (e.g. the About page's footer-group/nav at z-index:5 → overlap). Keep the group far above ALL page content (which lives in low single/double-digit z-indexes) and below the body-level modal overlays (cart drawer / social popup at z-index:990+). If a "layer change" ever makes the header overlap again, the offending content's z-index exceeded the page-content range — lower THAT, don't touch this. */ .shopify-section-group-header-group, .section-header.shopify-section-group-header-group { z-index: 100; } /* beat base.css's .section-header.shopify-section-group-header-group{z-index:3} (same specificity, later source) */ .template-index .header-wrapper { position: absolute; width: 100%; border-bottom: 1px solid #000; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; filter: invert(100%); border-bottom: none; } .template-index .header, .template-index .header-wrapper {background: transparent;} .header-change { background-color: #fcfef9 !important; filter: invert(0%) !important; } .template-index .menu-drawer {filter: invert(100%);} .template-index .drawer-close {filter: invert(100%);} .header-change .menu-drawer {filter: invert(0%);} .header-change .drawer-close {filter: invert(0%);} /* --------- MENU - SEARCH --------- */ .updated-search { padding-right: 9.8rem; border: 0px solid #000 !important; flex-grow: 1; text-align: left; padding: 1.5rem; margin: var(--inputs-border-width); transition: box-shadow var(--duration-short) ease; -webkit-appearance: none; appearance: none; background-color: rgb(var(--color-background)); color: rgb(var(--color-foreground)); width: 100%; box-sizing: border-box; transition: box-shadow var(--duration-short) ease; border-radius: var(--inputs-radius); height: 4.5rem; min-height: calc(var(--inputs-border-width)* 2); min-width: calc(7rem +(var(--inputs-border-width)* 2)); position: relative; border: 0; font-size: 1.3rem; line-height: calc(1 + .5 / var(--font-body-scale)); letter-spacing: .04rem; } .drawer-search {padding: 10px 0; display: none;} /* --------- MENU --------- */ .appointment-link {width: auto; padding-right: 10px;} .appointment-link a {display: block; padding: 6px 15px;} @media screen and (max-width: 900px) { .header__icon--search, .appointment-link {display: none;} .drawer-search {padding: 10px 0; display: block;} .header__icons {transform: scale(0.9);} .header__heading-logo-wrapper {width: 160px;} } .appointment-link-drawer { display: flex; flex-direction: column; gap: 5px; padding: 3rem; width: auto; text-align: center; } .appointment-link-drawer a {display: block;} .menu-drawer { margin-top: -79px !important; border: none !important; border-right: .25px solid #7d7d7b !important; } .header__icons {padding-right: 0rem !important; align-items: center;} .header__icon--cart {margin-right: 0rem !important;} header-drawer {margin-left: 0rem !important;} .drawer-menu-btn { display: flex; justify-content: flex-start; align-items: center; width: 70px; z-index: 10; position: relative; } .menu-drawer__navigation, .menu-drawer__submenu {padding: 10rem 0 0 0 !Important;} .drawer-menu-btn span {padding-left: 0px; text-decoration: none !important;} .drawer-open:before { content: ""; display: block; width: 10px; height: 10px; background-color: transparent; border: 1px solid #000 !important; transform: rotate(45deg); margin-bottom: 2px; margin-left: 2px; } .drawer-close:before { content: ""; display: block; width: 10px; height: 10px; background-color: #000; border: 1px solid #000 !important; transform: rotate(45deg); margin-bottom: 2px; margin-left: 2px; } .menu-open .drawer-menu-btn:before {background-color: #000;} .drawer-open {display: flex !Important;} .drawer-close {display: none !Important;} .menu-open .drawer-close {display: flex !Important;} .menu-open .drawer-open {display: none !Important;} .drawer-open, .drawer-close {align-items: center; justify-content: flex-start; gap: 10px;} @media screen and (min-width: 990px) { header-drawer { display: block !important;} .header--middle-left .header__inline-menu, .header--middle-center .header__inline-menu { margin-left: 0; display: none !important;} .header__heading, .header__heading-link { justify-self: center !important; grid-area: initial !important;} } #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li:first-child, #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li {border: 0;} #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li a, #menu-drawer ul.menu-drawer__menu.has-submenu.list-menu li summary {text-transform: uppercase;} .menu-drawer-container summary .drawer-menu-btn {z-index: 10;} #menu-drawer { border-top: .25px solid #7d7d7b; border-right: .25px solid #7d7d7b; height: 100vh; } .menu-drawer__utility-links {display: none;} .label-container { display: flex; justify-content: flex-start; align-items: center; border-bottom: .25px solid #7d7d7b; } .label-container .label { border-left: .25px solid #7d7d7b; width: 33.33%; text-align: center; padding: 6px 20px; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; } .label-container .JC {border-left: none;} .label-container .label:hover, .label-container .JC {background-color: #f7ede3;} /* ----------------- CART DRAWER ------------*/ .cart-drawer .cart-item__totals, .totals__total-value {font-size: 14px !important;} /* ----- GENERAL --------- */ .multicolumn .title {font-size: 2.6em; margin-bottom: 20px !important;} @media only screen and (max-width: 990px) {.multicolumn .title {font-size: 2em;}} /* ----- CUSTOM CONTAINERS & LAYOUTS --------- */ #MainContent {margin: 0px;} .content-padding {margin: 0 40px;} .border-top-con { border-top: 1px solid #000; padding: 30px 0; } .border-bottom-con { border-bottom: 1px solid #000; padding: 30px 0; } .padding-con {padding: 40px 20px;} @media screen and (min-width: 990px) { .product:not(.product–no-media) .product__media-wrapper {max-width: 50%; width: calc(50% – 1rem / 2);} } /* ----- ALTERNATIVE HERO --------- */ .alternative-hero-con { border-top: .25px solid #7d7d7b; padding: 0; } .alt_hero_item {min-height: 80vh; height: 100%; background-size: cover; background-position: center; display: block;} .alt_hero_item_con {width: 50%; min-height: 80vh; height: 100%; } .alt_hero_item_con:last-child {padding: 5%;} /* --------- BRAND LABELS --------- */ [id$="__multicolumn_JAzxqb"] .title-wrapper-with-link {justify-content: center;} [id$="__multicolumn_JAzxqb"] .multicolumn-card { margin-left: 0rem !Important; margin-right: 0rem !important; } [id$="__multicolumn_JAzxqb"] .multicolumn-card__info { position: absolute; width: 100%; height: 100%; top: 0; padding: 10%; background-color: rgba(253,253,249,0.95); border: 10px solid transparent; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; z-index: 3; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; box-sizing: border-box; } [id$="__multicolumn_JAzxqb"] .multicolumn-card__image-wrapper {margin: 0 !important;} [id$="__multicolumn_JAzxqb"] .multicolumn-card__image-wrapper {background-color: #000;} [id$="__multicolumn_JAzxqb"] .multicolumn-card__image-wrapper .media img {opacity: 0.7;} [id$="__multicolumn_JAzxqb"] .multicolumn-card__info:hover {opacity: 1;} /* label logo centered above the description in the hover overlay (black on cream) */ [id$="__multicolumn_JAzxqb"] .overlay-logo { width: clamp(150px, 62%, 250px); margin: 0 0 1.8rem; } [id$="__multicolumn_JAzxqb"] .overlay-logo img { display: block; width: 100%; height: auto; } [id$="__multicolumn_JAzxqb"] .multicolumn-card { margin-left: 1.5rem; margin-right: 1.5rem; } .multicolumn-card__image-wrapper {position: relative; box-sizing: border-box;} .logo-image { width: auto; height: calc(120px * var(--logo-scale, 100) / 100); z-index: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .logo-image img { object-fit: contain; object-position: 50% 50%; width:100%; height:100%; filter: invert(100%); } /* --------- ABSOLUTE LOGO --------- */ #shopify-section-template--16650557653181__custom_liquid_bzRkQQ {border-bottom: .25px solid #7d7d7b;} .img-submark { position: absolute; top: -40px; right: 3%; z-index: 1; } .img-submark img { width: 200px; height: auto; transform: rotate(10deg); } @media screen and (max-width: 990px) { .img-submark {top: 50px; right: -50px;} .img-submark img {width: 150px;} } /* --------- IMAGE BANNER --------- */ #shopify-section-template--16650557653181__image_banner_YYzNYq {padding: 10px 0;} /* ----- MULTI COL - ALL --------- */ .multicolumn-list {overflow-y: hidden;} .multicolumn-btn-con {display: block; margin-top: 15px !important;} .multicolumn .slider-button {display: none;} .multicolumn .slider-counter__link--dots .dot { width: 1.1rem; height: 1.1rem; border-radius: 0%; border: .1rem solid rgba(var(--color-foreground), .5); } .multicolumn .slider-counter__link {transform: rotate(45deg);} .multicolumn .slider-buttons {padding: 20px 0 5px 0;} @media screen and (max-width: 990px) { .multicolumn-btn-con {display: block; margin-top: 5px !important;} } /* ----- FEATURED BRIDES --------- */ .real-brides-con {position: relative;} .real-brides-inner {display: flex; gap: 20px;} .half-con {width: 50%; position: relative;} .half-con:first-child { order: 2; background-color: #F7EDE3; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .real-brides-con .multicolumn-list {margin-bottom: 0;} .real-brides-con .multicolumn-card__image-wrapper { margin-left: 0rem !omportant; margin-right: 0rem !important; } .real-brides-con .multicolumn-card { box-sizing: border-box; position: relative; } .real-brides-con .multicolumn-card__image-wrapper { background-color: #000; } .real-brides-con .multicolumn-card__image-wrapper img {opacity: 0.7;} .real-brides-con .multicolumn-card__info { position: absolute; bottom: 5%; left: 5%; padding: 0; box-sizing: border-box; filter: invert(100%); } .real-brides-con .slider-counter__link {padding: 0rem;} .real-brides-con h3 {font-size: 2em;} .real-brides-con .slideshow__control-wrapper {display: flex; gap: 15px;} .real-brides-con .slider-buttons { position: absolute; bottom: 5%; right: 5%; filter: invert(100%); } .real-brides-con .title-wrapper-with-link {flex-direction: column; justify-content: center; align-items: center;} @media screen and (max-width: 990px) { .real-brides-con .multicolumn-card__info .inline-richtext {font-size: 1.6em;} .real-brides-con .multicolumn-card__info {bottom: 7%; left: 7%;} .real-brides-inner {flex-direction: column;} .half-con {width: 100%; position: relative;} .half-con:first-child { order: 1; background-color: transparent; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .half-con .title-wrapper-with-link { flex-direction: column;} .half-con:nth-child(2) {order: 2;} .real-brides-con .slider-buttons {position: relative; bottom: 0%; right: 0%; filter: invert(0%);} } #shopify-section-template--16650557653181__multicolumn_EnzzKp .multicolumn-card__image-wrapper { margin-left: 0rem !Important; margin-right: 0rem !important; } #shopify-section-template--16650557653181__multicolumn_EnzzKp .multicolumn-card { box-sizing: border-box; position: relative; } #shopify-section-template--16650557653181__multicolumn_EnzzKp .multicolumn-card__image-wrapper { background-color: #000; } #shopify-section-template--16650557653181__multicolumn_EnzzKp .multicolumn-card__image-wrapper img {opacity: 0.7;} #shopify-section-template--16650557653181__multicolumn_EnzzKp .multicolumn-card__info { position: absolute; bottom: 0; margin-left: 1.5rem; margin-right: 1.5rem; padding: 5% 30% 5% 5%; box-sizing: border-box; filter: invert(100%); } /* ----- PRESS MARQUEE --------- */ .c-slider__content-wrapper {padding: 0 15px; opacity: 0.5;} .c-slider__content-wrapper:hover {opacity: 1;} .c-slider-marquee {border-bottom: .25px solid #7d7d7b;} /* ----- FEATURED COLLUMNS - ABOUT + STOCKISTS --------- */ #shopify-section-template--16650557653181__multicolumn_epANKi .multicolumn-card__info{ text-align: center; padding: 1.5em 3em; } #shopify-section-template--16650557653181__multicolumn_epANKi .multicolumn-list__item:nth-child(2) { border-left: .25px solid #7d7d7b; border-right: .25px solid #7d7d7b; } .home-cta { padding: 2% 0;} .home-cta a {color: #000000; text-decoration: none;} .diamond { background: transparent; height: 10px !important; width: 10px !important; border: 1px solid #000 !important; display: inline-block; transform: rotate(45deg); } .image-list-con {padding: 100px 0; position: relative;} @media screen and (max-width: 990px) { #shopify-section-template--16650557653181__multicolumn_epANKi .multicolumn-list__item:nth-child(2) { border-left: none; border-right: none; border-top: .25px solid #7d7d7b; border-bottom: .25px solid #7d7d7b; } } /* --------- COLLECTION SLIDER --------- */ #shopify-section-template--16650557653181__featured_collection .collection__title { width: 50%; text-align: center; padding: 0; } .collection-title-con { padding: 0 0 50px 0; margin-left: 1.5rem; margin-right: 1.5rem; justify-content: space-between; align-items: flex-end; gap: 10%; } .collection-silder-con {display: flex; justify-content: space-between; align-items: flex-start;} .collection-01, .collection-02 {padding-top: 30px;} .collection-01 {width: 22%;} .collection-02 {width: 75%;} @media screen and (max-width: 990px) { .featured-collection {padding: 0 !important;} .collection-silder-con {flex-direction: column;} .collection-01 {width: 100%;} .collection-02 {width: 100%;} } .collection-slider .product-grid .card__inner {border: none !important;} .collection__title.title-wrapper {margin-bottom: 3rem !important;} @media screen and (min-width: 990px) { .slider--desktop.grid--3-col-desktop .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing)) !important; max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing)) !important; } .collection-slider .grid--6-col-desktop .grid__item { width: calc(16.66% - var(--grid-desktop-horizontal-spacing)) !important; max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing))!important; } .collection-slider .grid--5-col-desktop .grid__item { width: calc(20% - var(--grid-desktop-horizontal-spacing))!important; max-width: calc(20% - var(--grid-desktop-horizontal-spacing))!important; } .collection-slider .grid--4-col-desktop .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing))!important; max-width: calc(25% - var(--grid-desktop-horizontal-spacing))!important;} } .collection-slider .grid--3-col-desktop .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing)) !important; max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing)) !important; } .collection-slider .grid--2-col-desktop .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing)) !important; max-width: calc(50% - var(--grid-desktop-horizontal-spacing)) !important; } } @media screen and (min-width: 750px) and (max-width: 989px) { .slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing)); } } @media screen and (max-width: 749px) { .slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item { width: calc(52% - var(--grid-desktop-horizontal-spacing)); } } .collection .slider-component-desktop .slider-counter {display: none;} .collection .slider-component-desktop .slider-buttons { position: absolute; transform: translateY(-100%); /*top: calc(50% - 10px);*/ top: 0; width: 100%; justify-content: flex-end; z-index: 9; transition: 0.5s; opacity: 1; padding: 0; } .collection .slider-component-desktop:hover .slider-buttons {opacity: 1;} .collection .slider-component-desktop .slider-button { background: transparent; color: #000; opacity: 1; position: relative; } .collection .slider-component-desktop .slider-button:hover {opacity: 1;} .collection .slider-component-desktop .slider-button[disabled] .icon {color: #cdcdcd;} .collection .slider-component-desktop .slider-button .icon {height: 1rem;} /* --------- AFTER PAY --------- */ .aferpayInfo {font-size: 12px; letter-spacing: 0; display: flex; justify-content: flex-start; align-items: center; gap: 5px;} .aferpayInfo img {filter: grayscale(1);} .aferpayInfo .more-info-link {color: #000;} /* --------- PRODUCT CARD --------- */ .product-grid .card__heading { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px !important; } .page-width-slider {position: relative; width: calc(150rem + 5rem); padding: 5rem; right: 0;} #shopify-section-template--16650557653181__multicolumn_bDeFWV { border-bottom: 1px solid #e9e9e9; } .template-product .price-item--sale, .template-product .price-item--regular { text-align: left; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px !important; } .card__badge, .card__information .price__container .price--on-sale, .card__information .price__container .price-item--regular, .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information .price--on-sale, .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information .price, #shopify-section-template--16650557653181__multicolumn_bDeFWV .title-wrapper-with-link{ text-align: left; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 10px !important; padding-top: 5px; } .badge { border: none !important; font-size: 1rem; padding: 5px 10px !important; } .product__tax {display: none;} .card-wrapper.product-card-wrapper .card__inner>.card__content:before, .card-wrapper.product-card-wrapper .card:hover .card__inner>.card__content:before {display: none !important;} .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information .price {display: none;} .title-sample-sale .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information .price {display: block;} .template-name--active .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information .price {display: block;} .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information, .template-name--active .card-wrapper.product-card-wrapper .card__inner+.card__content .card__information {display: block;} .quick-add {} /* ------ COLLECTION PAGE------*/ .collection-hero {padding-top: 8vh !important;} .collection-hero__text-wrapper {text-align: center;} .collection-hero__title {font-size: 1.8em;} .collection-hero__description {margin: auto; transform: scale(0.9);} .collection-logo-img {width: 350px;} @media screen and (max-width: 750px) { .collection-logo-img {width: 230px} } /* ------ PAGE DEFULT ------*/ .template-page .main-page-title {font-size: 1.8em; text-align: center;} /* ------ CART / SEARCH / 404 / ARTICLE — join the same page-title size tier as above ------*/ .template-cart .title--primary {font-size: 1.8em;} .template-search h1.h2 {font-size: 1.8em;} .template-404 .rich-text__heading.h1 {font-size: 1.8em;} .article-template__title {font-size: 1.8em;} /* ------ PRODUCT ------*/ .product-page-links {} .product-page-links a {display: block; padding: 3px 0; color: #000;} .product-btn-con {display: flex; max-width: 300px; flex-direction: column; gap: 5px; text-align: center;} .product__title h1 {font-size: 2.5em !important;} .related-products__heading {text-align: center;} @media screen and (min-width: 750px) { .product__column-sticky {top: 11rem !important;} } .product__description h2 { text-transform: none !important; font-size: var(--font-body-size); letter-spacing: 0.06rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); font-family: var(--font-body-family) !important; font-style: var(--font-body-style) !important; font-weight: var(--font-body-weight) !important; } @media screen and (max-width: 750px) { .template-product .shopify-section section {padding-top: 0px;} .product__info-wrapper { margin-top: 10px; padding-top: 30px; border-top: .25px solid #7d7d7b;} } /* ------ BLOG PAGE------*/ .main-blog .title--primary {text-align: center; font-size: 1.8em;} .main-blog h1 {font-size: 1.8em;} @media screen and (min-width: 750px) { .blog-articles { /*grid-template-columns: repeat(3, 1fr) !important;*/ display: block !important; break-inside: avoid-column; column-count: 3; } } .blog-articles__article, .blog-article-card {width: 100% !important;} .blog-articles .article { padding-bottom: 30px; align-items: flex-start !important; page-break-inside: avoid; break-inside: avoid-column; } .blog-articles .article .card__heading a:after {display: none;} .article-img-con { border: none; background-color: #000; } .blog-articles__article:hover img {opacity: 0.7;} .article-info-con {padding-top: 20px;} .article-info-con .card__heading {padding-bottom: 10px; font-size: 1.4em;} .article-img-con img { display: block; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .article-template__content img {width: 100%;} .template-article .shopify-section:first-child .page-width {max-width: 100%; padding: 0;} .article-template {width: 50%; padding: 5%; background-color: #f7ede3;} .article-img {width: 50%; height: 100vh; position: sticky; top: 0; float: right;} .article-img img {width: 100%; height: 100%; object-fit: cover;} .article-template header {margin-top: 0 !Important;} /*.article-template__content div {text-align: left!important;}*/ .article-template__content img {padding: 10px 0; border: none !important;} .article-image-gallery {} .template-name--alternate .article-excert-bottom {text-align: center !important;} @media screen and (max-width: 990px) { .article-template {width: 100%; padding: 5%; background-color: #f7ede3;} .article-img {width: 100%; height: 50vh; position: relative; top: 0; float: none;} } .template-name--alternate .article-img {display: none;} .template-name--alternate .article-template {width: 100%; padding: 100px 0; background-color: transparent;} .template-name--alternate .article-template header {text-align: center;} .template-name--alternate .article-template__back {text-align: center;} /* ------------ BLOG FILTER ---------------- */ .blog-filter {display: flex; gap: 30px;} .filter-btn { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; color: #000; } .filter-btn::before { content: ''; display: flex; align-items: center; box-sizing: border-box; background: transparent; height: 10px !important; width: 10px !important; margin-right: 10px; border: 1px solid #000 !important; display: inline-block; transform: rotate(45deg); -webkit-transition: background-color .3s ease-in-out; -o-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } .active-filter::before, .filter-btn:hover::before {background-color: #000;} .custom-row {display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;} @media screen and (max-width: 990px) { .custom-row {flex-direction: column; align-items: center;} .filter-btn {width: auto; display: inline-block; padding: 0 10px;} .blog-filter {padding: 10px 0; width: 100%; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center;} } /* ------------ FOOTER ---------------- */ .contact-information {display: none !important;} .shopify-section-group-footer-group {margin: 0 0px !important;} .footer__content-top { padding: 50px !important; max-width: 100% !important; width: 100% !important; } .footer__content-bottom-wrapper{ padding: 0px 50px !important; max-width: 100% !important; width: 100% !important; } .footer, .footer__content-bottom { border-top: .25px solid #7d7d7b !important; } .footer-block__details-content>p, .footer-block__details-content>li { font-size: 12px !important; } .footer-block__heading { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; } .newsletter-form__field-wrapper .field__input { padding-left: 15px !important; background-color: transparent !important; } .newsletter-form__field-wrapper .field__label {display: none;} .localization-selector.link {padding: 0 30px 0 0 !important;} .footer__content-bottom {padding-top: 0 !important;} .disclosure__button {height: 20px !important;} .footer__copyright{margin-top: 0 !important; width: 100%;} .footer__content-bottom-wrapper {align-items: center;} .localization-form__select:before {box-shadow: none !important;} .footer__blocks-wrapper {display: flex; align-items: flex-start; gap: 5%;} .footer-block__newsletter {width: 100%; justify-content: flex-end; margin-right: 0 !important;} .footer__blocks-wrapper .footer-block {width: auto; min-width: 150px} .footer-block-image {display: block; width: 150px;} .newsletter-form__field-wrapper .field__input {padding-left: 0; background-color: #fff;} .newsletter-form__field-wrapper {margin-bottom: 10px !important;} .social-link {color: #000; text-decoration: none;} .social-bullet {padding: 0 10px;} .localization-selector.link {padding: 0 !important;} .localization-form:only-child .button, .localization-form:only-child .localization-form__select {margin: 0 !important} .disclosure .icon {display: none;} @media screen and (max-width: 1300px) { .footer__blocks-wrapper {gap: 2%;} } @media screen and (max-width: 990px) { .footer__blocks-wrapper {display: block; flex-direction: column;} .footer__content-top {padding: 40px 20px !important;} .footer-block {width: 50% !important; float: left; text-align: center;} .footer-block:first-child {width: 100% !important; margin: auto;} .footer-block:first-child img {margin: auto;} .footer-block-image {display: block !important; margin: auto; width: 120px; align-items: center; justify-content: center;} .footer-block__newsletter {width: 100% !important; clear: both;} .footer-block:nth-child(4) {clear: both;} } @media screen and (max-width: 749px) { .footer__content-bottom-wrapper {font-size: 9pm !important;} .footer__content-bottom-wrapper {padding: 20px !important;} .disclosure__button {height: 15px !important;} .localization-form:only-child .button, .localization-form:only-child .localization-form__select {margin: 0 auto !important;} .footer__localization, .localization-form {padding: 0 !important;} .footer__content-bottom-wrapper {row-gap: 0rem !important;} .st-wishlist-button .label, .localization-form:only-child .button, .localization-form:only-child .localization-form__select, .footer__copyright .copyright__content, .footer__copyright .copyright__content a {padding: 0; } } /* --------- INPUTS --------- */ .field, .field:before, .select:before, .customer .field:before, .customer select:before, .localization-form__select:before, .field:after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after, .field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select:after { box-shadow: none !important; outline: 0; margin: 0; } .field__input:focus, .field__input:not(:placeholder-shown), .field__input:-webkit-autofill, .customer .field input:focus, .customer .field input:not(:placeholder-shown), .customer .field input:-webkit-autofill { padding: 1.5rem !important; margin: 0; } .field__input, .customer .field input, .search__input, .search__input:hover, .search__input:active, .search__input:focus { border: 0px solid #000 !important; } .search-modal {border-bottom: none;} details[open] .modal-overlay:after { position: absolute; content: ""; background-color: transparent; } /* --------- IG BLOCK --------- */ .ig-block {width: 33.33%; gap: 10px; display: block; flex-direction: column;} .ig-image {margin-bottom: 15px;} .ig-con { border-top: 1px solid #000; padding: 30px 0; } .ig-block img { box-sizing: border-box; max-width: 100%; height: auto; display: block; } @media screen and (max-width: 990px) { .instagram-section {flex-direction: column; gap: 30px;} .ig-block {width: 100%; gap: 10px; display: block; flex-direction: column;} } /* --------- VIDEO CON --------- */ .c-video-section__item {height: 50vh; padding-bottom: 50vh;} .video-section {background-color: #444;} .c-video-section__item {opacity: 0.8;} .video-text-overlay { width: 100%; height: 100%; padding: 5%; position: absolute; display: flex; z-index: 999; } .video-text-inner {max-width: 500px;} .video-section__text-center {text-align: center;} .video-section__text-right {text-align: right;} .video-section__item-text-vertical-center {align-items: center;} .video-section__item-text-vertical-bottom {align-items: flex-end;} .video-section__item-text-horizontal-center {justify-content: center} .video-section__item-text-horizontal-right {justify-content: flex-end;} @media screen and (max-width: 990px) { .video-text-overlay {padding: 10% 8%;} } /*-------------- ACCORDIONS ------------------*/ .accordion-layout {position: relative;} .accordion-layout h1 {margin-bottom: 40px;} .accordion-layout h3 { border-bottom: .25px solid #7d7d7b; padding-top: 50px; margin-bottom: 30px; } .accordion-layout h3:first-child { border-top: none; padding-top: 0; margin-bottom: 30px;} .accordion-layout h4 { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px !important; font-style: normal; cursor: pointer; padding: 16px 70px 16px 0px; margin: 0; width: 100%; text-align: left; outline: none; transition: 0.4s; line-height: 2; position: relative; border-bottom: .25px solid #7d7d7b; font-family: $altFontStack; text-transform: uppercase; } .accordion-layout h4:after { content: ' '; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(https://cdn.shopify.com/s/files/1/0247/7771/9862/files/nav-arrow-down.svg); width: 25px; height: 25px; position: absolute; right: 0px; top: 0; top: 50%; transform: translate(0%, -50%); } .accordion-layout h4.active:after { content: " "; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(https://cdn.shopify.com/s/files/1/0247/7771/9862/files/nav-arrow-up.svg); } .panel { margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; padding: 0px; } .panel p {margin: 15px 0;} .panel ul {margin: 15px 0 15px 20px;} .panel:nth-child(1) {display: block; } /*-------------- TABS ------------------*/ .tab-customize {overflow: hidden;} .tab-customize button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; transition: 0.3s; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px !important; padding: 10px 20px 10px 0; opacity: 0.4; } .tab-customize button:hover {opacity: 1;} .tab-customize button.active {opacity: 1;} .tabcontent-cus {display: none; padding-bottom: 5px;} /* Normalize description rhythm so every product reads the same regardless of the per-product HTML authored in Admin (raw {{ description }}, never gets .rte). Descriptions are Word-pasted — paragraphs arrive as

/

, so tighten line-height + block gaps on all of them. !important beats the inline line-heights/margins the rich-text editor injects on paste. */ .tabcontent-cus, .tabcontent-cus p, .tabcontent-cus h1, .tabcontent-cus h2, .tabcontent-cus h3, .tabcontent-cus li {line-height: 1.4 !important;} .tabcontent-cus p, .tabcontent-cus h1, .tabcontent-cus h2, .tabcontent-cus h3 {margin-top: 0 !important; margin-bottom: 0.7rem !important;} .tabcontent-cus span {line-height: inherit !important;} .tabcontent-cus a, .tabcontent-cus u {color: #000; border-bottom: 1px solid #000; text-decoration: none;} .tabcontent-cus a:hover {opacity: 0.7;} /* Pickup-availability drawer ("VIEW STORE INFORMATION") opens at top:0 under the sticky header (drawer z-index:4 vs the nav group's z-index:100). Push its content below the nav so the store title / variant line / close button aren't blocked. */ pickup-availability-drawer { padding-top: calc(var(--nav-height, 79px) + 2rem) !important; } /*-------------- PRODUCT FILTERS ------------------*/ .facets__form-vertical { position: sticky; top: 0; border: .1rem solid rgba(var(--color-foreground), .1); padding: 10px; } .sorting-dropdown { z-index: 99; width: 100%; right: 0; padding: 20px 20px 20px 20px; display: none; background-color: rgb(var(--color-background)); position: absolute; top: calc(100% + .5rem); left: -1.2rem; width: 35rem; max-height: 55rem; overflow-y: auto; } .facets__disclosure {margin-right: 0rem !important;} .facets__heading, .facets__summary .icon {display: none !important;} .facets__wrapper { align-items: center; align-self: center; } aside#main-collection-filters { position: sticky; top: 79px; z-index: 2; background: rgb(var(--color-background)); } @media screen and (max-width: 990px) { aside#main-collection-filters { position: relative; top: 0px; } } /*-------------- STOCKIST PAGE ------------------*/ /* Custom theme-owned store locator (replaces the Listr / Simple Store Finder app). Map = Leaflet + CARTO tiles; store list = Theme-Editor blocks (sections/store-locator.liquid). */ .stk { background: #fff; } /* "enquiry now" (and any image-with-text CTA on this page) → brand underline button, matching .cs__btn / .cta__btn elsewhere, not Dawn's outlined box. */ .template-name--stockists .image-with-text .button { display: inline-block; min-width: 0; min-height: 0; margin: 0; padding: 0 0 4px; background: transparent !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none !important; color: #1a1a1a !important; font-family: "commuters-sans", sans-serif !important; font-size: 1.3rem !important; font-weight: 400 !important; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; transition: opacity 0.25s ease; } .template-name--stockists .image-with-text .button::before, .template-name--stockists .image-with-text .button::after { display: none !important; box-shadow: none !important; } .template-name--stockists .image-with-text .button:hover { opacity: 0.6; background: transparent !important; color: #1a1a1a !important; } .stk__head { text-align: center; max-width: 82rem; margin: 0 auto 3.2rem; } .stk__title { font-family: "ivymode", serif; font-weight: 300; font-size: 3.64rem; line-height: 1.15; letter-spacing: 0.02em; color: #1a1a1a; margin: 0 0 1.2rem; } .stk__intro, .stk__intro p { font-family: "articulat-cf", sans-serif !important; font-weight: 300; font-size: 1.4rem; line-height: 1.7; color: #4a4a47; margin: 0; } /* Contact & FAQ — match Stockist typography */ .template-name--contact .main-page-title, .page--faq .main-page-title { font-family: "ivymode", serif; font-weight: 300; font-size: 3.64rem; line-height: 1.15; letter-spacing: 0.02em; color: #1a1a1a; } .template-name--contact .rte, .page--faq .rte { font-family: "articulat-cf", sans-serif; font-weight: 300; font-size: 1.4rem; line-height: 1.7; color: #4a4a47; } .stk__layout { display: grid; grid-template-columns: minmax(30rem, 36rem) 1fr; gap: 3rem; align-items: stretch; } /* ---- list panel ---- */ .stk__panel { max-height: 62rem; overflow-y: auto; padding-right: 1.2rem; -webkit-overflow-scrolling: touch; } .stk__list { list-style: none; margin: 0; padding: 0; } /* "Show all locations" reset link */ .stk__showall { display: inline-block; font-family: "commuters-sans", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; color: #1a1a1a; background: none; border: 0; border-bottom: 1px solid #1a1a1a; padding: 0 0 1px; margin: 0 0 1.6rem; cursor: pointer; transition: opacity 0.3s ease; } .stk__showall:hover { opacity: 0.55; } /* ---- country accordion ---- */ .stk-acc { border-bottom: 0.25px solid #d2d2cf; } .stk-acc__head { display: flex; align-items: center; gap: 1rem; width: 100%; background: none; border: 0; padding: 1.6rem 0; cursor: pointer; text-align: left; font-family: "commuters-sans", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem; color: #1a1a1a; transition: opacity 0.25s ease; } .stk-acc__head:hover { opacity: 0.6; } .stk-acc__head:focus-visible { outline: 1px solid #1a1a1a; outline-offset: 3px; } .stk-acc__name { flex: 1 1 auto; } .stk-acc__count { font-size: 1rem; color: #9a9388; letter-spacing: 0.06em; } .stk-acc__chev { width: 8px; height: 8px; border-right: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; transform: rotate(45deg); transition: transform 0.3s cubic-bezier(.22,1,.36,1); flex: 0 0 auto; margin-left: 0.4rem; } .stk-acc.is-open .stk-acc__chev { transform: rotate(-135deg); } /* grid-rows 0fr→1fr = smooth height animation, no max-height guesswork */ .stk-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(.22,1,.36,1); } .stk-acc.is-open .stk-acc__panel { grid-template-rows: 1fr; } .stk-acc__stores { list-style: none; margin: 0; padding: 0; overflow: hidden; min-height: 0; } .stk-store { border-top: 0.25px solid #ececea; padding: 1.2rem; transition: background-color 0.35s ease; } .stk-store.is-active { background: #f2f2f0; } .stk-store__head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .stk-store__head[data-nopin] { cursor: default; } .stk-store__name { display: block; font-family: "articulat-cf", sans-serif; font-weight: 500; font-size: 1.45rem; color: #1a1a1a; letter-spacing: 0.01em; } .stk-store__badge { display: inline-block; font-family: "commuters-sans", sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; color: #1a1a1a; border: 0.5px solid #1a1a1a; padding: 1px 6px; margin-left: 6px; vertical-align: middle; } .stk-store__addr { display: block; font-family: "articulat-cf", sans-serif; font-weight: 300; font-size: 1.3rem; line-height: 1.5; color: #6f6f6c; margin-top: 0.4rem; } .stk-store__labels { display: block; font-family: "commuters-sans", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: #bdb7ad; margin-top: 0.6rem; } .stk-store__links { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin-top: 0.8rem; } .stk-store__link { font-family: "commuters-sans", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #1a1a1a; padding-bottom: 1px; transition: opacity 0.3s ease; } .stk-store__link:hover { opacity: 0.55; } .stk-store__phone { font-family: "articulat-cf", sans-serif; font-size: 1.2rem; color: #9a9388; } /* ---- map (Leaflet) ---- */ .stk__mapwrap { position: relative; } .stk__map { height: 62rem; width: 100%; background: #e9e6df; position: relative; z-index: 0; /* isolation creates a stacking context so Leaflet's internal z-indexes (panes ~200-700, controls ~800-1000) can NEVER paint over the sticky header group (z-index:100). Do not remove. */ isolation: isolate; } /* brand diamond pin (Leaflet divIcon, currentColor drives fill) */ .stk-pin { color: #1a1a1a; transition: transform 0.25s cubic-bezier(.22,1,.36,1), filter 0.25s ease; transform-origin: 50% 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .stk-pin svg { display: block; } .stk-pin.is-active { color: #000; transform: scale(1.3); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)); } /* Leaflet UI → brand styling */ .stk__map .leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.16); } .stk__map .leaflet-popup-content { margin: 14px 16px; } .stk-pop { display: flex; flex-direction: column; gap: 4px; } .stk-pop__name { font-family: "articulat-cf", sans-serif; font-weight: 500; font-size: 1.4rem; color: #1a1a1a; } .stk-pop__addr { font-family: "articulat-cf", sans-serif !important; font-weight: 300; font-size: 1.25rem; line-height: 1.5; color: #6f6f6c; } .stk-pop__link { font-family: "commuters-sans", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; color: #1a1a1a; border-bottom: 1px solid #1a1a1a; text-decoration: none; align-self: flex-start; margin-top: 2px; } .stk__map .leaflet-control-zoom a { border-radius: 0 !important; color: #1a1a1a; font-weight: 300; } .stk__map .leaflet-bar { box-shadow: 0 1px 6px rgba(0,0,0,0.15); border: none; } .stk__map .leaflet-control-attribution { font-family: "articulat-cf", sans-serif; font-size: 9px; background: rgba(255,255,255,0.78); } @media screen and (max-width: 989px) { .stk__layout { grid-template-columns: 1fr; gap: 2rem; } .stk__mapwrap { order: 1; } .stk__panel { order: 2; max-height: none; overflow: visible; padding-right: 0; } .stk__map { height: 36rem; } .stk__title { font-size: 2.6rem; } .template-name--contact .main-page-title, .page--faq .main-page-title { font-size: 2.6rem; } } /*-------------- TRUNK SHOWS PAGE ------------------*/ .template-name--trunk-shows .multicolumn-card { border: .25px solid #7d7d7b !important; background: transparent !important; } .template-name--trunk-shows .multicolumn .title, .template-name--trunk-shows .rich-text__heading {font-size: 1.8em; text-align: center;} .template-name--trunk-shows .multicolumn-card h3 { font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 11px; } /*-------------- BREADCRUMBS ------------------*/ .breadcrumbs {margin: 0 0 10px;} .breadcrumbs__list { list-style-type: none; margin: 0; padding: 0; } .breadcrumbs__item { display: inline-block; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 10px; } .breadcrumbs__item:not(:last-child):after { content: '>'; display: inline-block; position: relative; vertical-align: middle; padding: 0 5px; } .breadcrumbs__link {text-decoration: underline; color: #000;} .breadcrumbs__link[aria-current="page"] { color: inherit; font-weight: normal; text-decoration: none; } .breadcrumbs__link[aria-current="page"]:hover, .breadcrumbs__link[aria-current="page"]:focus { text-decoration: underline; } /* ---- TABLE ------- */ table:not([class]) {width: 100%;} table strong { display: inline-block; font-family: "commuters-sans", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em !important; font-size: 12px; } table:not([class]) td, table:not([class]) th { padding: 0 5px; border-bottom: .25px solid #7d7d7b; text-align: center; } /* ---- POLICY PAGES ------- */ .shopify-policy__container { max-width: 760px !Important; margin: 0 auto; padding: 36px 20px 90px 20px !important; } .shopify-policy__container .shopify-policy__title h1 { font-size: 1.8em; text-align: center; } #Details-1-template--16944978886845__product-grid, #Details-Mobile-1-template--16944978886845__product-grid {display: none;} .jc-logo, .mc-logo, .aw-logo { display: inline-block; background-size: auto 30px; background-position: center; background-repeat: no-repeat; width: 30px; height: 30px; padding: 0px; } .jc-logo {background-image: url('/cdn/shop/files/4_29001a4d-6493-4c93-9c8a-8a0f7dd6fe0d.png?v=1723624643');} .mc-logo {background-image: url('/cdn/shop/files/3_a5c823ad-76ed-432f-94b7-58f5449aaf62.png?v=1723624643');} .aw-logo {background-image: url('/cdn/shop/files/2_b7061b2b-a8f8-4d69-8356-f7b29626b1dd.png?v=1723624642');} #simple_store_finder__contentyktwpqrx {margin: 0 !important;} .title-bridal-gowns-new-zealand-designer-wedding-dresses-jessica-couture #Details-3-template--16650557391037__product-grid {display: none;} /* ========================================================= HOMEPAGE NAV — desktop (Brand / Shop / Explore + Appointments) Gentle Monster: sticky bar that is transparent/white over the hero and frosted-glass + dark once scrolled. Dropdowns are vertical single-column flyouts aligned to the content margin, fading down, with frost ONLY when scrolled. Panels render OUTSIDE the inverted .header-wrapper so backdrop-filter works. Scoped to .jc-nav + min-width 990px. ========================================================= */ @media screen and (min-width: 990px) { /* Show custom nav, hide hamburger, keep logo centered, +20px side padding */ .jc-nav header-drawer { display: none !important; } .jc-nav .header__inline-menu.header__home-nav { display: flex !important; align-items: center; } .jc-nav .header__heading, .jc-nav .header__heading-link { grid-area: heading !important; justify-self: center !important; } .jc-nav .header { padding-left: calc(3rem + 20px) !important; padding-right: calc(3rem + 20px) !important; background: transparent !important; } .jc-nav .header__inline-menu, .jc-nav .header__icons { min-width: 0; } /* ---- Sticky bar + scroll state (frost only when scrolled) ---- */ .jc-nav .header-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 59; /* above the frosted surface (58) */ transition: background-color .25s ease; /* NOT filter — animating invert() flashes a hue */ } /* The bar is transparent in BOTH states — the single .home-nav__frost element behind it (z 58) provides the frosted look when scrolled, so there is no seam between the bar and the dropdown. */ body.jc-nav:not(.home-nav-scrolled) .header-wrapper { filter: invert(100%); background: transparent; } body.jc-nav.home-nav-scrolled .header-wrapper { filter: none; background: transparent; } /* Neutralise the theme's .header-change opaque white (#fcfef9 !important). */ body.jc-nav .header-wrapper.header-change { background: transparent !important; filter: none !important; } /* ---- Triggers (left) ---- */ .header__home-nav .home-nav__list { display: flex; gap: 2.8rem; list-style: none; margin: 0; padding: 0; } .header__home-nav .home-nav__trigger { display: inline-flex; align-items: center; font-family: "commuters-sans", sans-serif; text-transform: none; letter-spacing: 0.04em; font-size: 13px; line-height: 1; color: currentColor; background: none; border: 0; cursor: pointer; padding: 8px 0; white-space: nowrap; text-decoration: none; position: relative; } /* Animated "expand-out" underline for the three main triggers (Labels/Shop/Explore): the ::after scales from the centre on hover, and stays out while the panel is open (.is-active). currentColor keeps it in step with the white→grey scroll states. */ .header__home-nav .home-nav__trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .header__home-nav .home-nav__trigger:hover::after, .header__home-nav .home-nav__trigger.is-active::after { transform: scaleX(1); } /* ---- Right side: inline CTAs (wide) vs Appointments dropdown (narrow) ---- */ .home-nav__cta { display: flex; align-items: center; gap: 2.2rem; margin-right: 1.6rem; } .home-nav__cta-link { font-family: "commuters-sans", sans-serif; font-size: 13px; letter-spacing: .04em; text-decoration: none; color: currentColor; border: 0; background: none; padding: 0; white-space: nowrap; } .home-nav__cta-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---- ONE frosted surface that covers the bar row + the dropdown (no seam). Clips its content and animates height to unroll the menu downward. ---- */ .jc-nav .home-nav__frost { position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; padding-top: var(--nav-height, 72px); height: var(--home-nav-frost-h, var(--nav-height, 72px)); overflow: hidden; z-index: 58; pointer-events: none; background: transparent; transition: height .38s cubic-bezier(.22, 1, .36, 1), background .25s ease; } .jc-nav .home-nav__frost.is-open { pointer-events: auto; } body.jc-nav.home-nav-scrolled .home-nav__frost, body.jc-nav.search-open .home-nav__frost { background: rgba(255, 255, 255, 0.70); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); box-shadow: 0 24px 40px -34px rgba(0, 0, 0, 0.28); } /* Panels: in-flow, transparent (frost owns the bg), full-width with a narrow inner column offset under the trigger (offset set in JS). */ .jc-nav .home-nav__panel { display: flex; padding: 0.3rem 0 2.8rem; background: transparent; } .jc-nav .home-nav__panel[hidden] { display: none; } .jc-nav .home-nav__panel-inner { display: flex; flex-direction: column; min-width: 180px; max-width: 280px; } /* Top state: white text over the hero (NOT while the search overlay's light frost is up) */ body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__panel .home-nav__group-label { color: #fff; } body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__panel a, body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__panel a:link, body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__panel a:visited { color: rgba(255, 255, 255, 0.85); } body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__panel a:hover { color: #fff; } /* Scrolled state — and search-open (white text would ghost into the search frost): dark text (frosted bg is provided by .home-nav__frost) */ body.jc-nav.home-nav-scrolled .home-nav__panel .home-nav__group-label, body.jc-nav.search-open .home-nav__panel .home-nav__group-label { color: #000; } body.jc-nav.home-nav-scrolled .home-nav__panel a, body.jc-nav.home-nav-scrolled .home-nav__panel a:link, body.jc-nav.home-nav-scrolled .home-nav__panel a:visited, body.jc-nav.search-open .home-nav__panel a, body.jc-nav.search-open .home-nav__panel a:link, body.jc-nav.search-open .home-nav__panel a:visited { color: #5f5f5f; } body.jc-nav.home-nav-scrolled .home-nav__panel a:hover, body.jc-nav.search-open .home-nav__panel a:hover { color: #000; } body.jc-nav.home-nav-scrolled .home-nav__viewall, body.jc-nav.home-nav-scrolled .home-nav__viewall:visited, body.jc-nav.search-open .home-nav__viewall, body.jc-nav.search-open .home-nav__viewall:visited { color: #000; } /* Shared panel typography */ .jc-nav .home-nav__group { margin-bottom: 1.8rem; } .jc-nav .home-nav__group:last-child { margin-bottom: 0; } .jc-nav .home-nav__group-label { display: block; font-family: "commuters-sans", sans-serif; font-size: 12px; letter-spacing: .08em; margin-bottom: 1rem; } .jc-nav .home-nav__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; } .jc-nav .home-nav__links a { font-family: "commuters-sans", sans-serif; font-size: 13px; line-height: 1.3; text-decoration: none; transition: color .15s ease; } .jc-nav .home-nav__links a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Shop: columns laid side by side (Mook's layout). Each column's parent header sits on the same top row; children expand downward within their own column, so neighbours are reached by moving RIGHT (headers never move) — no collapse-on-scroll-down close. Plain links + hover-expand parents. */ #home-nav-panel-shop .home-nav__panel-inner { max-width: none; } .jc-nav .home-nav__cols { display: flex; align-items: flex-start; gap: 3rem; } /* Each column hugs its TOP word so the gap between column headings is uniform. Secondary items (children / col-1's lower links) are constrained to the column width and spill right (see below) so they don't widen it. */ .jc-nav .home-nav__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; flex: 0 0 auto; width: max-content; } .jc-nav .home-nav__item { display: flex; flex-direction: column; } /* Col 1's links below "All dresses" must not widen the column past it. */ .jc-nav .home-nav__col > li:not(:first-child) { width: 0; min-width: 100%; overflow-x: visible; white-space: nowrap; } .jc-nav .home-nav__item > a, .jc-nav .home-nav__parent-label { font-family: "commuters-sans", sans-serif; font-size: 13px; line-height: 1.3; text-decoration: none; transition: color .15s ease, font-weight .15s ease; } .jc-nav .home-nav__item > a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Parent toggle: borderless button. On hover/expanded it gets BOTH bold and an animated expand-out underline (below) — that combo marks it as a parent dropdown; plain links keep their plain instant underline. */ .jc-nav .home-nav__parent-label { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; text-align: left; cursor: pointer; white-space: nowrap; position: relative; align-self: flex-start; } /* Children: collapsed (height 0) by default; JS sets height to scrollHeight to unroll, and the frost surface follows frame-by-frame (see trackFrost). */ .jc-nav .home-nav__sub { list-style: none; box-sizing: border-box; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; /* Don't widen the column past its label; items stay one line and spill right. overflow-y clips for the height unroll; overflow-x stays visible for the spill. */ width: 0; min-width: 100%; white-space: nowrap; height: 0; overflow-x: visible; overflow-y: clip; opacity: 0; transition: height .40s cubic-bezier(.22, 1, .36, 1), opacity .26s ease, padding-top .40s cubic-bezier(.22, 1, .36, 1); } .jc-nav .home-nav__parent.is-expanded .home-nav__sub { opacity: 1; padding-top: .7rem; } .jc-nav .home-nav__sub li { padding-left: .1rem; } .jc-nav .home-nav__sub a { font-family: "commuters-sans", sans-serif; font-size: 13px; line-height: 1.3; text-decoration: none; transition: color .15s ease; } .jc-nav .home-nav__sub a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Color states for parents + child bullets (mirror the existing a-color rules). A parent whose children are open (.is-expanded) gets the FULL bright hover colour — not just on re-hover — so it reads as the active parent (bold + bright + underline) the whole time its dropdown is showing. */ body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__parent-label, body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__sub { color: rgba(255, 255, 255, 0.85); } body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__parent-label:hover, body.jc-nav:not(.home-nav-scrolled):not(.search-open) .home-nav__parent.is-expanded > .home-nav__parent-label { color: #fff; } body.jc-nav.home-nav-scrolled .home-nav__parent-label, body.jc-nav.home-nav-scrolled .home-nav__sub, body.jc-nav.search-open .home-nav__parent-label, body.jc-nav.search-open .home-nav__sub { color: #5f5f5f; } body.jc-nav.home-nav-scrolled .home-nav__parent-label:hover, body.jc-nav.home-nav-scrolled .home-nav__parent.is-expanded > .home-nav__parent-label, body.jc-nav.search-open .home-nav__parent-label:hover, body.jc-nav.search-open .home-nav__parent.is-expanded > .home-nav__parent-label { color: #000; } /* Bolder subheading on hover / while its accordion is open (Jessica feedback). */ .jc-nav .home-nav__parent-label:hover, .jc-nav .home-nav__parent.is-expanded > .home-nav__parent-label { font-weight: 600; } /* Animated "expand-out" underline — ON THE PARENT DROPDOWN LABELS ONLY. Combined with the bold above, it marks them as parent dropdowns; all other nav links keep their plain instant underline. The ::after scales from the centre; currentColor keeps it in step with the white-over-hero → grey-when-scrolled colour states. */ .jc-nav .home-nav__parent-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .jc-nav .home-nav__parent-label:hover::after, .jc-nav .home-nav__parent.is-expanded > .home-nav__parent-label::after { transform: scaleX(1); } } /* ========================================================= HOMEPAGE SEARCH OVERLAY — Gentle Monster full-page frosted search. Frosted white takeover that fades + slides down; logo + nav bar stay on top (overlay z 57 < bar z 59). Centred search form, Best Sellers (5), Recently Viewed (localStorage, removable), close X top-right. ========================================================= */ .search-overlay { position: fixed; inset: 0; z-index: 57; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .38s cubic-bezier(.22, 1, .36, 1), visibility .38s; } /* All overlay text matches the navigation typography (override theme heading font) */ .search-overlay, .search-overlay * { font-family: "commuters-sans", sans-serif !important; } /* Force the bar to its dark/frosted state while search is open (the overlay's own frost sits behind the transparent bar; just disable the white invert so the logo + nav text are readable). */ body.jc-nav.search-open .header-wrapper, body.jc-nav.search-open .header-wrapper.header-change { filter: none !important; background: transparent !important; } .search-overlay.is-open { opacity: 1; visibility: visible; } .search-overlay[hidden] { display: none; } body.search-open { overflow: hidden; } .search-overlay__inner { max-width: 1180px; margin: 0 auto; padding: calc(var(--nav-height, 72px) + 4.4rem) 4rem 6rem; transform: translateY(-16px); transition: transform .38s cubic-bezier(.22, 1, .36, 1); } .search-overlay.is-open .search-overlay__inner { transform: none; } .search-overlay__close { position: fixed; top: calc(var(--nav-height, 72px) + 1.4rem); right: 3rem; width: 3.6rem; height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; color: #1a1a1a; border-radius: 999px; transition: background-color .18s ease, transform .18s ease; } .search-overlay__close:hover { background: rgba(0, 0, 0, 0.06); } .search-overlay__close:active { transform: scale(.94); } .search-overlay__close .icon { width: 1.6rem; height: 1.6rem; } .search-overlay__form { display: flex; align-items: center; gap: 1.2rem; max-width: 680px; margin: 0 auto 4.4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.28); } .search-overlay__form-icon { width: 1.9rem; height: 1.9rem; color: #1a1a1a; flex: 0 0 auto; } .search-overlay__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; font-family: "commuters-sans", sans-serif; font-size: 1.8rem; letter-spacing: .01em; color: #1a1a1a; padding: 1.2rem 0; } .search-overlay__input::placeholder { color: rgba(0, 0, 0, 0.4); } .search-overlay__section { margin-bottom: 3.6rem; } .search-overlay__heading { font-family: "commuters-sans", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1a; margin: 0 0 1.6rem; } /* Recently Viewed heading row: title + "Clear all" underline button. */ .search-overlay__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; margin-bottom: 1.6rem; } .search-overlay__section-head .search-overlay__heading { margin-bottom: 0; } .search-overlay__clear { font-family: "commuters-sans", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1a; background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.2; border-bottom: 1px solid currentColor; transition: opacity .15s ease; } .search-overlay__clear:hover { opacity: .55; } .search-overlay__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8rem; } .search-overlay__grid--results { grid-template-columns: repeat(4, 1fr); gap: 2rem; } /* Best Sellers: horizontal drag carousel (~10 cards) */ .search-overlay__carousel { display: flex; gap: 1.8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; cursor: grab; padding-bottom: .6rem; scrollbar-width: none; } .search-overlay__carousel::-webkit-scrollbar { display: none; } .search-overlay__carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; } .search-overlay__carousel .search-card { flex: 0 0 200px; scroll-snap-align: start; } .search-overlay__carousel .search-card * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .search-overlay__empty { text-align: center; color: #888; font-family: "commuters-sans", sans-serif; font-size: 13px; margin: 0; } .search-card, .search-card__link { position: relative; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: #1a1a1a; } .search-card__media { display: block; overflow: hidden; background: rgba(0, 0, 0, 0.04); aspect-ratio: 3 / 4; } .search-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .search-card:hover .search-card__media img, .search-card__link:hover .search-card__media img { transform: scale(1.04); } .search-card__ph { display: block; width: 100%; height: 100%; } .search-card__title { font-family: "commuters-sans", sans-serif; font-size: 13px; line-height: 1.3; } .search-card__remove { position: absolute; top: .6rem; right: .6rem; width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); border: 0; border-radius: 999px; cursor: pointer; color: #1a1a1a; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4); transition: background-color .18s ease, transform .18s ease; } .search-card__remove:hover { background: #fff; transform: scale(1.06); } .search-card__remove .icon { width: 1.1rem; height: 1.1rem; } @media screen and (max-width: 749px) { .search-overlay__grid { grid-template-columns: repeat(2, 1fr); } .search-overlay__inner { padding: calc(var(--nav-height, 64px) + 3rem) 2rem 4rem; } /* Mobile: close on the LEFT (where the hamburger is) */ .search-overlay__close { left: 1.5rem; right: auto; } } /* The mobile-left search + close buttons only exist on the homepage; hide on desktop */ @media screen and (min-width: 990px) { .jc-nav .header__mobile-search, .jc-nav .header__mobile-searchclose { display: none !important; } .jc-nav .header__mobile-left { display: contents; } } /* ========================================================= HOMEPAGE MOBILE NAV (<990px) — hamburger + search left, logo centre, profile + cart right; condensed single-level drawer (Gentle Monster). ========================================================= */ @media screen and (max-width: 989px) { /* Left cluster: hamburger + search together in the left grid area */ .jc-nav .header__mobile-left { grid-area: left-icons; display: flex; align-items: center; gap: 1.6rem; justify-self: start; } .jc-nav .header__mobile-left header-drawer { display: block; } .jc-nav .header__mobile-search { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: currentColor; } /* Equal VISUAL size. search/account fill their viewBox (reference ~1.9rem); cart's glyph is only ~15/24 of its box, so it needs a larger box to match. */ .jc-nav .header__mobile-search .icon, .jc-nav .header__icon--account .icon, .jc-nav .header__icon--account svg { width: 1.9rem !important; height: 1.9rem !important; } /* Close crosses (search-close) match the menu ✕ and cart ✕ (~1.7rem) */ .jc-nav .header__mobile-searchclose .icon { width: 1.7rem !important; height: 1.7rem !important; } .jc-nav #cart-icon-bubble .icon, .jc-nav #cart-icon-bubble svg { width: 2.7rem !important; height: 2.7rem !important; } /* The desktop frost element is unstyled on mobile and reserves 65px in flow (the white gap above the hero). It is only used by the desktop dropdowns. */ .jc-nav .home-nav__frost { display: none !important; } /* Animated 2-bar menu icon (homepage): two lines that rotate into an ✕ when the drawer opens — quick + minimal (Gentle Monster). The ✕ span (~1.7rem) matches the search-close and cart-close crosses. */ .jc-nav .drawer-burger { position: relative; display: inline-block; width: 1.7rem; height: 1.1rem; color: currentColor; } .jc-nav .drawer-burger__bar { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .22s ease; } .jc-nav .drawer-burger__bar:nth-child(1) { top: 25%; } .jc-nav .drawer-burger__bar:nth-child(2) { top: 75%; } .jc-nav .menu-drawer-container[open] .drawer-burger__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .jc-nav .menu-drawer-container[open] .drawer-burger__bar:nth-child(2) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* When the SEARCH drawer is open: the ✕ replaces the hamburger (same spot), the search icon disappears, leaving only ✕ · Logo · Profile · Bag (GM). */ .jc-nav .header__mobile-searchclose { display: none; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: currentColor; } body.jc-nav.search-open .header__mobile-left header-drawer { display: none; } body.jc-nav.search-open .header__mobile-search { display: none; } body.jc-nav.search-open .header__mobile-searchclose { display: inline-flex; } body.jc-nav.search-open .search-overlay__close { display: none; } /* Kill the desktop-only injections that were breaking the bar */ .jc-nav .home-nav__cta { display: none !important; } .jc-nav .desktop-localization-wrapper { display: none !important; } /* Right cluster: show profile + cart; the right-side search moves to the left */ .jc-nav .header__icons .header__icon--search { display: none !important; } .jc-nav .header__icon--account { display: inline-flex !important; } /* Centre the logo */ .jc-nav .header__heading, .jc-nav .header__heading-link { grid-area: heading; justify-self: center; } /* ----- Bar: fixed + frosted (match desktop) ----- fixed makes .section-header collapse to 0 so the hero is full-bleed (no white gap), and keeps the bar above the drawer (z3) and search overlay (z57). Transparent + white over the hero at top; frosted + dark scrolled. */ .jc-nav .header-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 59; transition: background-color .25s ease; /* NOT filter — animating invert() flashes a hue */ } body.jc-nav.home-nav-scrolled .header-wrapper, body.jc-nav .header-wrapper.header-change { filter: none !important; background: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); } /* ----- Condensed drawer panel (homepage) ----- The header-wrapper is invert(100%) over the hero, which would invert the drawer (white->black). While the drawer is open, disable the invert so the panel shows true colours. */ body.jc-nav .header-wrapper:has(.menu-drawer-container[open]) { filter: none !important; } /* Full-screen drawer (mobile AND tablet) — fills the whole viewport, no gap underneath, and overrides Dawn's 40rem side panel at >=750px. */ .jc-nav .menu-drawer { filter: none !important; background: #fff; top: 0; margin-top: 0 !important; height: 100vh; height: 100dvh; width: 100% !important; border: 0 !important; } /* The full-screen drawer is positioned (z3), so it paints above static bar icons. Lift the bar controls above it so they stay visible + clickable while open. Only NON-ancestors of the drawer may be positioned here — making .header__mobile-left positioned would shrink the drawer to that cluster. */ .jc-nav .menu-drawer-container > summary, .jc-nav .header__mobile-search, .jc-nav .header__heading, .jc-nav .header__icons { position: relative; z-index: 5; } /* Mask the nav-bar strip with SOLID white while the drawer is open, so the drawer's own scrolling list (a DESCENDANT of .header-wrapper, same as the bar icons above) can't show through underneath the ✕/search/logo/account icons once the user scrolls it. A background-color on .header-wrapper itself can't do this — an element's own background always paints behind its descendants regardless of opacity, and the drawer IS a descendant here (nested under .header__mobile-left). A z-index-ranked ::before, sized to the bar and placed between the drawer (z3) and the icons (z5), can. */ body.jc-nav .header-wrapper:has(.menu-drawer-container[open])::before { content: ""; position: absolute; inset: 0; z-index: 4; background: #fff; } .jc-nav .mobile-menu { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(var(--nav-height, 64px) + 2rem) 2.4rem 2.4rem; background: #fff; } .jc-nav .mobile-menu__nav { display: flex; flex-direction: column; gap: 1.8rem; } .jc-nav .mobile-menu__group { display: flex; flex-direction: column; gap: .7rem; } .jc-nav .mobile-menu__label { font-family: "commuters-sans", sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; margin-bottom: .2rem; } .jc-nav .mobile-menu__nav a { font-family: "commuters-sans", sans-serif; font-size: 1.7rem; line-height: 1.2; color: #1a1a1a; text-decoration: none; } .jc-nav .mobile-menu__nav a:active { opacity: .6; } /* ----- Shop accordions (nav-shop parents with children) ----- Parent rows read exactly like the plain links; the Jessica diamond (drawer-open / About-checkpoint motif) marks expandability — outline closed, filled open. Children expand via grid-rows (no JS measuring) with the nav's signature easing, and stagger-rise as they reveal. */ .jc-nav .mobile-menu__acc { display: flex; flex-direction: column; } .jc-nav .mobile-menu__parent { display: flex; align-items: center; gap: 1.1rem; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: "commuters-sans", sans-serif; font-size: 1.7rem; line-height: 1.2; color: #1a1a1a; } .jc-nav .mobile-menu__parent:active { opacity: .6; } .jc-nav .mobile-menu__dia { width: 8px; height: 8px; flex: none; border: 1px solid #1a1a1a; background: transparent; transform: rotate(45deg); transition: background-color .25s ease; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__dia { background: #1a1a1a; } .jc-nav .mobile-menu__subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1); } .jc-nav .mobile-menu__acc.is-open .mobile-menu__subwrap { grid-template-rows: 1fr; } .jc-nav .mobile-menu__sub { overflow: hidden; min-height: 0; margin: 0; padding: 0 0 0 1.2rem; list-style: none; display: flex; flex-direction: column; } .jc-nav .mobile-menu__sub li { padding-top: .7rem; } .jc-nav .mobile-menu__sub a { opacity: 0; display: inline-block; transform: translateY(6px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub a { opacity: 1; transform: none; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub li:nth-child(2) a { transition-delay: .04s; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub li:nth-child(3) a { transition-delay: .08s; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub li:nth-child(4) a { transition-delay: .12s; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub li:nth-child(5) a { transition-delay: .16s; } .jc-nav .mobile-menu__acc.is-open .mobile-menu__sub li:nth-child(n+6) a { transition-delay: .2s; } .jc-nav .mobile-menu__cta { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; padding-top: 2.4rem; } .jc-nav .mobile-menu__cta a { font-family: "commuters-sans", sans-serif; font-size: 1.6rem; color: #1a1a1a; text-decoration: none; } .jc-nav .mobile-menu__cta a:active { opacity: .6; } @media (prefers-reduced-motion: reduce) { .jc-nav .mobile-menu__subwrap, .jc-nav .mobile-menu__sub a, .jc-nav .mobile-menu__dia { transition: none; } .jc-nav .mobile-menu__sub a { transform: none; } } } /* Keep all close crosses consistent: cart drawer ✕ matches the search ✕ and the menu ✕ (~1.7rem) instead of Dawn's larger 2.4rem. */ .drawer__close svg { width: 1.7rem !important; height: 1.7rem !important; } /* Inner pages (no hero) have a fixed nav bar, so push their content below it. Homepage is excluded — its hero sits behind the bar. --nav-height is set by JS. */ body.jc-nav:not(.template-index) #MainContent { padding-top: var(--nav-height, 65px); } /* ============================================================ JC FOOTER ============================================================ */ /* ── Font base: set on container, children inherit ── */ .jc-footer { font-family: "commuters-sans", sans-serif; font-size: 13px; letter-spacing: 0.04em; } /* Only force !important on elements Dawn's stylesheet explicitly overrides */ .jc-footer h2, .jc-footer h3, .jc-footer button, .jc-footer input { font-family: "commuters-sans", sans-serif !important; font-size: 13px !important; letter-spacing: 0.04em; } .jc-footer { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.08); } .jc-footer__inner { /* no max-width: the footer always spans edge-to-edge like the header, content held by the same --jc-inset on both sides */ position: relative; padding: 48px var(--jc-inset) 92px; /* bottom: 40px offset + 28px icon + 24px breathing */ /* Grid: brand (logo) | newsletter | links — single row */ display: grid; grid-template-columns: 140px 1fr auto; column-gap: 60px; } /* ── Brand column (logo) ── */ .jc-footer__brand { display: flex; flex-direction: column; } .jc-footer__logo-link { display: inline-block; line-height: 0; } .jc-footer__logo { width: 80px; height: auto; display: block; } /* ── Social icons: absolute bottom-left, sharing the copyright's baseline ── */ .jc-footer__social { position: absolute; bottom: 40px; left: var(--jc-inset); display: flex; align-items: center; gap: 16px; } .jc-footer__social a { display: inline-flex; line-height: 0; opacity: 1; transition: opacity .2s ease; } .jc-footer__social a:hover { opacity: 0.55; } .jc-footer__social img { width: 28px !important; height: 28px !important; object-fit: contain; } /* Dawn's built-in social icon snippets (tiktok/twitter/snapchat/tumblr/vimeo) render inline , not like the 4 custom badge icons above — size them to match. */ .jc-footer__social svg { width: 28px !important; height: 28px !important; color: #000; } /* ── Newsletter column ── */ .jc-footer__newsletter { min-width: 0; align-self: start; } .jc-footer__nl-label { font-weight: 400 !important; color: #000000; margin: 0 0 16px 0; } .jc-footer__nl-form { width: 100%; } .jc-footer__nl-field { display: flex; align-items: flex-end; border-bottom: 1px solid #000000; padding-bottom: 8px; gap: 12px; } /* Floating label wrapper */ .jc-footer__nl-input-wrap { position: relative; flex: 1; min-width: 0; padding-top: 18px; } .jc-footer__nl-input { width: 100%; background: transparent; border: none; outline: none; font-weight: 400 !important; color: #000000; padding: 0; display: block; } /* Hidden placeholder — needed for :not(:placeholder-shown) trick */ .jc-footer__nl-input::placeholder { color: transparent; } /* Floating label */ .jc-footer__nl-floatlabel { position: absolute; left: 0; top: 18px; pointer-events: none; transform-origin: 0 0; color: rgba(0, 0, 0, 0.45); transition: transform .18s cubic-bezier(.4, 0, .2, 1), color .18s ease; } /* Float up on focus or when field has value */ .jc-footer__nl-input:focus ~ .jc-footer__nl-floatlabel, .jc-footer__nl-input:not(:placeholder-shown) ~ .jc-footer__nl-floatlabel { transform: translateY(-18px) scale(0.77); color: rgba(0, 0, 0, 0.55); } .jc-footer__nl-btn { flex: 0 0 auto; background: none; border: none; padding: 0 0 2px 0; cursor: pointer; display: flex; align-items: center; color: #000000; transition: opacity .2s ease; } .jc-footer__nl-btn:hover { opacity: 0.55; } /* Minimal chevron arrow */ .jc-footer__arrow-icon { display: block; width: 8px !important; height: 14px !important; } .jc-footer__nl-error { color: #c00; margin: 8px 0 0; } .jc-footer__nl-success { color: #000; margin: 8px 0 0; } /* ── Link columns (right column) — content-width columns with EQUAL gaps, so the rhythm between Bridal Service / Information / Country reads even (equal 1fr boxes looked uneven because the text widths differ) ── */ .jc-footer__links { display: grid; grid-template-columns: auto auto auto; column-gap: clamp(56px, 7vw, 150px); align-items: start; } .jc-footer__col { display: flex; flex-direction: column; } .jc-footer__col-heading { font-weight: 600 !important; color: #000000; margin: 0 0 14px 0; text-transform: none !important; } .jc-footer__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .jc-footer__col-list a { font-weight: 400 !important; color: #000000; text-decoration: none; transition: opacity .2s ease; } .jc-footer__col-list a:hover { opacity: 0.55; } /* ── Country dropdown (localization-form) ── */ .jc-footer__col--country { position: relative; } .jc-footer__country-form .disclosure { position: relative; } .jc-footer__country-form .disclosure__button { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #000000; text-align: left; text-transform: none !important; } .jc-footer__country-form .disclosure__button span { text-transform: none !important; font-size: 13px !important; letter-spacing: 0.04em; } .jc-footer__country-form .disclosure__button:hover { opacity: 0.65; } /* Hide Dawn's caret icon — we don't need it */ .jc-footer__country-form .icon-caret { display: none !important; } /* Dropdown list — opens upward */ .jc-footer__country-form .disclosure__list-wrapper { position: absolute; bottom: calc(100% + 8px); right: 0; left: auto; z-index: 50; background: #ffffff; min-width: 210px; max-height: 200px; overflow-y: auto; box-shadow: 0 -2px 16px rgba(0,0,0,0.08); padding: 4px 0; } .jc-footer__country-form .disclosure__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; } .jc-footer__country-form .disclosure__link { display: block; padding: 9px 16px; color: #000000; text-decoration: none; white-space: nowrap; text-transform: none !important; transition: background .15s ease; } .jc-footer__country-form .disclosure__link:hover { background: #f7ede3; } .jc-footer__country-form .disclosure__link--active { font-weight: 600 !important; } /* ── Copyright — absolutely pinned bottom-right ── */ .jc-footer__copy { position: absolute; bottom: 40px; right: calc(3rem + 20px); /* matches horizontal padding */ font-weight: 400 !important; color: #000000; white-space: nowrap; margin: 0; padding: 0; } /* ── Mobile (≤989px) ── */ @media screen and (max-width: 989px) { .jc-footer__inner { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 40px 1.5rem 72px; /* bottom pad for absolute copyright */ } /* Mobile order: logo → newsletter → social → links */ .jc-footer__brand { order: 1; align-self: center; } .jc-footer__newsletter { order: 2; width: 100%; } /* content-width columns spread edge-to-edge — equal visual gaps (same fix as desktop) */ .jc-footer__links { order: 4; grid-template-columns: auto auto auto; justify-content: space-between; gap: 0 12px; width: 100%; } .jc-footer__logo { width: 90px; } /* On mobile, social returns to flex flow (override desktop absolute) */ .jc-footer__social { position: static; order: 3; bottom: auto; left: auto; gap: 22px; align-self: flex-start; } .jc-footer__copy { bottom: 28px; right: 1.5rem; } } /* ============================================================ LABEL COLLECTION PAGES (collection.label-*) Hero (video-image, scoped via .label-hero) + "Collection" grid (collection-list, used ONLY here so safe to style). ============================================================ */ /* ── Hero (video-image) — banner height + centered title overlay ── */ /* Tame the section's hardcoded 90vh mobile height (desktop height is the editable maxImageHeight slider, set to 65vh in the templates). */ @media screen and (max-width: 990px) { .label-hero .c-video-section__item { padding-bottom: 58vh !important; } } /* Label name overlaid on the video: IvyMode, refined tracking. Colour is handled by the section's textColor:light (.invert-color uses filter:invert) — do NOT set color here or the invert flips it to black. */ .label-hero .video-text-overlay h1, .label-hero .video-text-overlay .L1 { font-family: "ivymode", serif; font-weight: 300; letter-spacing: 0.08em; text-transform: none; } .label-hero .video-text-inner { text-align: center; max-width: none; } /* Hero wordmark PNG overlay — sized, centered. White comes from the overlay's textColor:light (.invert-color filter:invert) flipping the black artwork. */ .label-hero .video-overlay-image { display: block; height: calc(clamp(35px, 5.2vw, 77px) * var(--wordmark-scale, 100) / 100); width: auto; max-width: 100%; margin: 0 auto; } @media screen and (max-width: 749px) { .label-hero .video-overlay-image { height: calc(clamp(18px, 9.7vw, 52px) * var(--wordmark-scale, 100) / 100); } } /* ── "Collection" section heading ── */ .section-collection-list .collection-list-title { font-family: "ivymode", serif; font-weight: 300; font-size: 2.4rem; letter-spacing: 0.05em; text-transform: none; text-align: center; margin: 0 0 3.2rem; } /* Title centered; "View all products" link pinned to the right edge */ .section-collection-list .title-wrapper-with-link { position: relative; justify-content: center; margin-bottom: 0; } .section-collection-list .collection-list__products-link { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: "commuters-sans", sans-serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #000000; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .2s ease; white-space: nowrap; } .section-collection-list .collection-list__products-link:hover { opacity: 0.55; } /* ── Card grid: inherit the product grid's spacing for exact card-size parity ── (no --grid-* overrides here, so it matches main-collection-product-grid). */ /* ── Card title: Commuters Sans, uppercase, centered below image ── */ .section-collection-list .card__content { padding: 0; } .section-collection-list .card__information { padding: 1.6rem 0 0; text-align: center; } .section-collection-list .card__heading { font-family: "commuters-sans", sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; } /* Drop Dawn's trailing arrow on collection cards — reference shows the name only */ .section-collection-list .card__heading .icon-wrap { display: none; } /* ── Subtle, tasteful image hover (transform only) ── */ .section-collection-list .card__media .media img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .section-collection-list .card:hover .card__media .media img { transform: scale(1.04); } /* ============================================================ HOMEPAGE HERO CAROUSEL (section: hero-video-carousel) Gentle Monster–style: full-bleed video slides, seamless infinite loop, drag/swipe + click-to-advance, thin segmented progress timer. CTAs sit outside the sliding track and crossfade per slide. ============================================================ */ /* contain the hero in its own stacking context, strictly below the fixed nav */ .hvc-section { margin: 0; position: relative; z-index: 0; isolation: isolate; } .hvc { position: relative; width: 100%; height: var(--hvc-height, 92vh); overflow: hidden; background: #f7ede3; /* brand fallback before media paints */ color: #fff; -webkit-user-select: none; user-select: none; } /* never let a drag grab/select the media — the gesture only moves slides */ .hvc img, .hvc video { -webkit-user-drag: none; -khtml-user-drag: none; user-select: none; -webkit-touch-callout: none; } .hvc__media { pointer-events: none; } /* drag starts on the slide, not on an image */ /* viewport + sliding track */ .hvc__viewport { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; /* keep vertical scroll; capture horizontal drag */ } .hvc__track { display: flex; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.22, 1, .36, 1); } .hvc__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; } /* media */ .hvc__media { position: absolute; inset: 0; } .hvc__video, .hvc__poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hvc__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 60%, rgba(0,0,0,.30) 100%); } /* hero UI fades out as the hero scrolls up (set via JS) so it never collides with the transparent fixed nav */ .hvc__overlay, .hvc__ctas, .hvc__timer { opacity: var(--hvc-ui, 1); } /* overlay (wordmark / heading) — centered */ .hvc__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6%; pointer-events: none; /* clicks pass through to the viewport for nav */ z-index: 2; } .hvc__wordmark { width: clamp(150px, 20vw, 300px); /* minimal — lets the video lead */ height: auto; display: block; opacity: 0.82; } /* CTAs — outside the sliding track, pinned above the timer; one per slide, crossfading so only the active slide's buttons show */ .hvc__ctas { position: absolute; left: 0; right: 0; bottom: 5.4rem; height: 0; /* the stacked CTAs position from here */ z-index: 3; pointer-events: none; } .hvc__cta { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 2.8rem; justify-content: center; align-items: center; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .45s ease; } .hvc__cta.is-active { opacity: 1; } /* Only the ACTIVE slide's buttons receive clicks. A child's explicit pointer-events overrides the parent's `none`, so the hidden non-active CTAs (stacked at the same spot) would otherwise still intercept clicks — set their buttons to none too. */ .hvc__cta .hvc__btn { pointer-events: none; } .hvc__cta.is-active .hvc__btn { pointer-events: auto; } .hvc__heading { margin: 0; font-family: "ivymode", serif; font-weight: 300; font-size: clamp(2.6rem, 5vw, 5.4rem); letter-spacing: 0.06em; line-height: 1.05; text-transform: uppercase; color: #fff; } .hvc__btn { display: inline-block; font-family: "commuters-sans", sans-serif; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid currentColor; /* underline, not a box */ padding-bottom: 4px; transition: opacity .25s ease; } .hvc__btn:hover, .hvc__btn:focus-visible { opacity: 0.6; } /* thin segmented progress timer */ .hvc__timer { position: absolute; left: 50%; bottom: 3.2rem; transform: translateX(-50%); display: flex; gap: 10px; width: min(420px, 60vw); z-index: 3; } .hvc__seg { position: relative; flex: 1 1 0; height: 2px; /* thin, max 2px */ padding: 0; border: 0; background: rgba(255,255,255,0.2); /* inactive = 20% */ overflow: hidden; cursor: pointer; } .hvc__seg::before { /* invisible larger tap target */ content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; } .hvc__seg-fill { display: block; width: 100%; height: 100%; background: #fff; /* active fill = full white */ transform: scaleX(0); transform-origin: left center; } .hvc__seg.is-done .hvc__seg-fill { transform: scaleX(1); } .hvc__seg.is-active .hvc__seg-fill { animation: hvcFill var(--hvc-duration, 6s) linear forwards; } .hvc.hvc--paused .hvc__seg.is-active .hvc__seg-fill { animation-play-state: paused; } .hvc.hvc--no-auto .hvc__seg.is-active .hvc__seg-fill { animation: none; transform: scaleX(1); } @keyframes hvcFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* drag affordance */ .hvc__viewport { cursor: grab; } .hvc--dragging .hvc__viewport { cursor: grabbing; } .hvc--dragging .hvc__track { transition: none; } /* mobile */ @media screen and (max-width: 749px) { .hvc { height: min(var(--hvc-height, 92vh), 86vh); } .hvc__wordmark { width: min(46vw, 230px); } .hvc__heading { font-size: clamp(2.2rem, 9vw, 3.6rem); } .hvc__btn { font-size: 1.15rem; letter-spacing: 0.1em; white-space: normal; text-align: center; line-height: 1.6; } .hvc__ctas { bottom: 4.4rem; } /* stack the buttons vertically on all slides — long labels were clipping at the edges */ .hvc__cta { flex-direction: column; gap: 1.5rem; width: 100%; white-space: normal; padding: 0 1.6rem; } .hvc__timer { bottom: 2.2rem; width: 70vw; } } /* reduced motion: no track animation either */ @media (prefers-reduced-motion: reduce) { .hvc__track { transition: none; } } /* ========================================================================== COLLECTION SPLIT — "From Our Latest" two-up full-bleed showcase ========================================================================== */ .collection-split-section { margin: 0; --cs-head-h: 14rem; } .collection-split { background: #fdfdf9; } /* centered heading band — matches the "Discover our Labels" treatment */ .collection-split__head { text-align: center; padding: 5rem 2rem 4.6rem; } .collection-split__heading { margin: 0; font-family: "ivymode", serif; font-weight: 300; font-size: 3.64rem; /* matches the "Discover our Labels" multicolumn title (36.4px) */ letter-spacing: 0.05em; line-height: 1.2; text-transform: none; color: #1a1a1a; } .collection-split__heading em { font-style: italic; } /* edge-to-edge 2-up grid, no gap */ .cs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .cs__panel { position: relative; overflow: hidden; height: clamp(620px, 72vw, 1040px); /* tall portrait ≈ 2:3 (720×1080 Figma frame) */ } .cs__media { position: absolute; inset: 0; } .cs__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* tint as a pseudo-element (an empty .cs__tint div gets killed by base.css `div:empty{display:none}`) */ .cs__media::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--cs-tint, 0.4); transition: opacity 0.45s ease; pointer-events: none; } /* hovered panel only: image grows, tint deepens */ .cs__panel:hover .cs__img { transform: scale(1.05); } .cs__panel:hover .cs__media::after { opacity: var(--cs-tint-hover, 0.6); } /* top-left text block — 50px in from the side, 100px down */ .cs__content { position: absolute; top: 100px; left: 50px; right: auto; max-width: 30rem; z-index: 2; color: #fff; } .cs__name { margin: 0; font-family: "ivymode", serif !important; /* beat the global `p { font-family: articulat-cf !important }` */ font-weight: 300; font-size: clamp(3.6rem, 5vw, 6.8rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; } /* IvyMode "COLLECTION" under the name */ .cs__subtitle { margin: 0.6rem 0 1.8rem; font-family: "ivymode", serif !important; /* beat the global `p { font-family: articulat-cf !important }` */ font-size: clamp(1.5rem, 1.7vw, 2rem); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.92; } .cs__text { font-family: "articulat-cf", sans-serif; font-weight: 300; font-size: 1.3rem; line-height: 1.65; } .cs__text p { margin: 0 0 1rem; } .cs__text p:first-child { letter-spacing: 0.04em; margin-bottom: 1.6rem; } /* CTA — text label with a 1px stroke underline (never a box) */ .cs__btn { display: inline-block; margin-top: 1.4rem; font-family: "commuters-sans", sans-serif; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: opacity 0.25s ease; } .cs__btn:hover { opacity: 0.7; } .cs__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* mobile — stack full-width, no sticky */ @media screen and (max-width: 749px) { .collection-split-section { position: static; } .collection-split__head { padding: 3.6rem 1.6rem 3rem; } .collection-split__heading { font-size: 2.6rem; } .cs__grid { grid-template-columns: 1fr; } .cs__panel { height: clamp(520px, 130vw, 720px); } .cs__content { top: 48px; left: 24px; right: 24px; max-width: none; } .cs__name { font-size: clamp(3rem, 11vw, 4.4rem); } .cs__subtitle { margin: 0.4rem 0 1.4rem; } } /* sticky scroll-over reveal (Mode Mischief) — desktop/tablet only */ @media screen and (min-width: 750px) { /* Pin, but offset upward by the heading height so the heading band clears the viewport at pin and only the panels remain — fills the screen up to the nav. */ .collection-split-section { position: sticky; top: calc(-1 * var(--cs-head-h, 14rem)); z-index: 0; } .cs__panel { height: 100vh; } /* panels fill the viewport once pinned */ /* EVERY following section is the cover layer AND must be opaque, so the pinned panels can never bleed through later sections (the footer-area bleed fix). */ .collection-split-section ~ .shopify-section { position: relative; z-index: 2; background-color: #fdfdf9; } } /* page rhythm: the side inset used by the header + footer — non-full-bleed sections align their content to this same edge */ :root { --jc-inset: calc(3rem + 20px); } @media screen and (min-width: 750px) { /* "Discover our Labels" — release Dawn's narrow page-width to the shared inset. Sides only: the padding shorthand would wipe Dawn's section-padding top/bottom. */ [id$="__multicolumn_JAzxqb"] .page-width { max-width: 100%; padding-left: var(--jc-inset); padding-right: var(--jc-inset); } } /* ========================================================================== SHARED SECTION HEADING — centered IvyMode title (matches "Discover our Labels") ========================================================================== */ .jc-sec-head { text-align: center; padding: 5rem 2rem 4.6rem; } .jc-sec-head__title { margin: 0; font-family: "ivymode", serif; font-weight: 300; font-size: 3.64rem; /* 36.4px — matches the multicolumn "Discover our Labels" title */ letter-spacing: 0.05em; line-height: 1.2; text-transform: none; color: #1a1a1a; } .jc-sec-head__title em { font-style: italic; } @media screen and (max-width: 749px) { .jc-sec-head { padding: 3.6rem 1.6rem 3rem; } .jc-sec-head__title { font-size: 2.6rem; } } /* ========================================================================== DISCOVER OUR BESTS — static full-bleed 4-up product row ========================================================================== */ .collection-bests-section { margin: 0; } .collection-bests { background: #fdfdf9; } .cb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .cb__item { position: relative; display: block; overflow: hidden; height: clamp(360px, 30vw, 620px); text-decoration: none; } .cb__media { position: absolute; inset: 0; } .cb__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* darken overlay (pseudo-element — an empty div would be killed by base.css :empty) */ .cb__item::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .cb__item:hover .cb__img { transform: scale(1.04); } .cb__item:hover::after { opacity: var(--cb-tint, 0.25); } .cb__item:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; } @media screen and (max-width: 749px) { .cb__grid { grid-template-columns: repeat(2, 1fr); } .cb__item { height: clamp(280px, 64vw, 460px); } } /* ========================================================================== VIEW OUR DRESSES — big drag wheel + mini click-sync scrubber ========================================================================== */ .dress-scroller-section { margin: 0; } .dress-scroller { background: #fdfdf9; padding-bottom: 4rem; } .ds__empty { text-align: center; padding: 4rem 2rem; color: #777; font-family: "articulat-cf", sans-serif; } /* big wheel — user-select:none so a press-drag never starts a text selection (a held-button selection, like a leaked native drag, freezes :hover page-wide) */ .ds__wheel { overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .ds__wheel:active { cursor: grabbing; } .ds__track { display: flex; gap: 0; will-change: transform; } .ds__item { position: relative; flex: 0 0 auto; width: clamp(260px, 32vw, 460px); height: clamp(380px, 46vw, 660px); overflow: hidden; display: block; } .ds__img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* MM-style hover: image grows slightly inside the clipped tile (matches .cs__panel). NB: hover is driven by a JS-toggled .is-hover class, NOT CSS :hover — when tiles slide under a stationary cursor (drag/momentum/trackpad) the browser doesn't recompute :hover, so the flip would stick on the wrong tile. */ .ds__item.is-hover .ds__img { transform: scale(1.05); } /* hovered tile: its dress name brightens to solid white (highlight) */ .ds__item.is-hover .ds__caption { opacity: 1; } /* hover = alternate angle: the 2nd product image is stacked on top and cross-fades in (nothing is rendered when a product has only one image, so this no-ops gracefully) */ .ds__img--alt { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; } .ds__item.is-hover .ds__img--alt { opacity: 1; } /* soft base scrim so the white caption stays readable over pale gowns */ .ds__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top, rgba(0, 0, 0, 0.28), transparent); z-index: 2; pointer-events: none; } /* product name — Mode Mischief style, bottom-left on the image, IvyMode */ .ds__caption { position: absolute; left: 18px; bottom: 16px; z-index: 2; max-width: calc(100% - 36px); font-family: "ivymode", serif !important; font-weight: 300; font-size: 1.4rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0.6; /* subtle at rest */ transition: opacity 0.45s ease; /* fades to solid white when its tile is hovered */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* mini scrubber — Gentle Monster style: a small centered strip, the selected product dead-center and scaled up; track is transform-driven (no native scroll) */ .ds__mini-wrap { position: relative; margin-top: 2.4rem; } .ds__mini { width: min(420px, 70vw); margin: 0 auto; overflow: hidden; padding: 6px 0; /* headroom for the active-thumb scale */ cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .ds__mini:active { cursor: grabbing; } .ds__mini-track { display: flex; align-items: center; gap: 10px; width: max-content; will-change: transform; } .ds__thumb { flex: 0 0 auto; width: 38px; height: 54px; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; opacity: 0.4; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .ds__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } .ds__thumb:hover { opacity: 0.75; } .ds__thumb.is-active { opacity: 1; transform: scale(1.18); } .ds__thumb:focus-visible { outline: 1px solid #1a1a1a; outline-offset: 2px; } .ds__foot { text-align: center; margin-top: 2.8rem; } /* underline CTA on cream — override the white-on-image .cs__btn colors */ .ds__viewall { color: #1a1a1a; } .ds__viewall:focus-visible { outline-color: #1a1a1a; } @media screen and (max-width: 749px) { .ds__item { width: 72vw; height: 96vw; } .ds__caption { left: 14px; bottom: 12px; font-size: 1.2rem; } } /* ========================================================================== SPONSOR LOGOS — static centered press band (replaces the marquee) ========================================================================== */ .sponsor-logos-section { margin: 0; } .sponsor-logos { background: #fdfdf9; padding: 4.4rem var(--jc-inset); text-align: center; } .spl__head { margin-bottom: 2.6rem; } .spl__eyebrow { font-family: "commuters-sans", sans-serif; font-size: 1.2rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1a1a1a; margin: 0 0 0.4rem; } .spl__heading { font-family: "ivymode", serif; font-weight: 300; font-size: 2rem; color: #1a1a1a; margin: 0; } .spl__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 3.5vw, 4rem); } /* normalise each logo to a consistent box so wide wordmarks don't dominate the row */ .spl__logo { display: inline-flex; align-items: center; justify-content: center; height: 46px; } .spl__logo-img { max-height: 38px; max-width: 150px; width: auto; height: auto; object-fit: contain; opacity: 0.5; transition: opacity 0.3s ease; } .spl__logo:hover .spl__logo-img { opacity: 1; } /* small IvyMode caption under the logos — rendered exactly as typed */ .spl__caption { margin: 2.6rem 0 0; font-family: "ivymode", serif !important; font-weight: 300; font-size: 1.3rem; letter-spacing: 0.08em; color: #1a1a1a; opacity: 0.55; text-align: center; } @media screen and (max-width: 749px) { .sponsor-logos { padding: 3rem 1.6rem; } .spl__row { gap: 1.8rem 2.6rem; } .spl__logo { height: 36px; } .spl__logo-img { max-height: 28px; max-width: 110px; } .spl__caption { font-size: 1.15rem; margin-top: 2rem; } } /* ========================================================================== STOCKIST HERO — full-bleed "Find a Store" panel (reuses .cs__ typography) ========================================================================== */ .stockist-hero-section { margin: 0; } /* mid-left text block (the MUSE panels are top-left); wider so the copy holds */ .stockist-hero .cs__content { top: 50%; transform: translateY(-50%); max-width: 46rem; } /* the long subheading stays on one line, slightly smaller than COLLECTION */ .stockist-hero .cs__subtitle { white-space: nowrap; font-size: clamp(1.3rem, 1.5vw, 1.8rem); } @media screen and (min-width: 750px) { /* Mode-Mischief "midway" pin (the MM building-illustration treatment): the hero never moves — the section above scrolls off it, then the section below covers it. The sticky element itself must stay margin-free (Chrome mis-clamps sticky travel when the stuck element carries large margins), so the geometry lives on the neighbours: • the preceding section's -100vh margin-bottom pulls the hero's flow box up underneath the opaque z2 covers, so it's already pinned back there ("always there") and gets revealed as the cover scrolls away; • the following section's +100vh margin-top is the cover runway: the next section starts rising the moment the hero is fully revealed (no extra dwell). z1 = above the pinned collection-split (z0), below the z2 covers. Must stay after the blanket `.collection-split-section ~ .shopify-section` rule (later wins). */ .shopify-section.sponsor-logos-section { margin-bottom: -100vh; } .shopify-section.stockist-hero-section { position: sticky; top: 0; z-index: 1; } .stockist-hero-section + .shopify-section { margin-top: 100vh; } } @media screen and (max-width: 749px) { .stockist-hero .cs__content { top: 50%; transform: translateY(-50%); } .stockist-hero .cs__subtitle { white-space: normal; } } /* ========================================================================== REAL BRIDES GRID — Mode Mischief "moments" multigrid (journal tiles) ========================================================================== */ .bride-grid-section { margin: 0; } .bride-grid { background: #fdfdf9; padding-bottom: 4rem; } .rb__grid { display: grid; grid-template-columns: repeat(var(--rb-cols, 5), 1fr); gap: 2px; /* hairline seams, per the MM reference */ } .rb__tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; text-decoration: none; } .rb__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* soft base scrim so the white overlay reads on bright photos */ .rb__tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .rb__overlay { position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .rb__name { font-family: "ivymode", serif !important; font-weight: 300; font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; line-height: 1.3; } /* underline "See More" — standing rule: stroke underline, never a box */ .rb__see { font-family: "commuters-sans", sans-serif; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border-bottom: 1px solid currentColor; padding-bottom: 3px; } .rb__tile:hover .rb__img { transform: scale(1.05); } .rb__tile:hover::after, .rb__tile:hover .rb__overlay { opacity: 1; } .rb__tile:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; } .rb__foot { text-align: center; margin-top: 2.8rem; } .bride-grid .cs__btn { color: #1a1a1a; } .bride-grid .cs__btn:focus-visible { outline-color: #1a1a1a; } @media screen and (max-width: 749px) { .rb__grid { grid-template-columns: repeat(2, 1fr); } /* no hover on touch — overlay always on */ .rb__tile::after, .rb__overlay { opacity: 1; } .rb__name { font-size: 1.2rem; } .rb__see { font-size: 1rem; } } /* ========================================================================== BOOK APPOINTMENT CTA — huge centered heading + circular script sticker ========================================================================== */ .cta-appointment-section { margin: 0; } .cta-appointment { background: #fdfdf9; padding: 9rem var(--jc-inset) 8rem; } .cta__inner { position: relative; max-width: 1280px; margin: 0 auto; text-align: center; } .cta__head-row { position: relative; display: inline-block; } .cta__heading { margin: 0; font-family: "ivymode", serif; font-weight: 300; font-size: calc(clamp(4.2rem, 7.4vw, 10.6rem) * var(--cta-heading-scale, 100) / 100); letter-spacing: 0.02em; line-height: 1.05; text-transform: uppercase; color: #1a1a1a; } .cta__sticker { position: absolute; right: clamp(-90px, -6vw, -50px); bottom: clamp(-70px, -5vw, -40px); width: clamp(110px, 12.5vw, 185px); height: auto; pointer-events: none; } .cta__text { margin: 2.2rem auto 0; font-family: "ivymode", serif !important; font-weight: 300; font-size: clamp(1.4rem, 1.5vw, 1.8rem); letter-spacing: 0.08em; text-transform: uppercase; color: #1a1a1a; max-width: 90rem; } .cta__btn { margin-top: 3.2rem; color: #1a1a1a; } .cta__btn:focus-visible { outline-color: #1a1a1a; } @media screen and (max-width: 749px) { .cta-appointment { padding: 5.6rem 1.6rem 5rem; } .cta__heading { font-size: calc(clamp(3rem, 9.4vw, 4.4rem) * var(--cta-heading-scale, 100) / 100); } .cta__sticker { position: static; display: block; margin: 2rem auto 0; width: 96px; } .cta__text { font-size: 1.25rem; } } /* ========================================================================== SOCIAL POSTS — three IG tiles + Mode Mischief-style Instagram popup ========================================================================== */ .social-posts-section { margin: 0; } .social-posts { background: #fdfdf9; padding: 4.4rem var(--jc-inset) 7rem; } .sp__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; } .sp__tile { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; overflow: hidden; aspect-ratio: 4 / 5; } .sp__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .sp__tile:hover .sp__img { transform: scale(1.05); } .sp__tile:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; } .sp__handle { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.4rem; font-family: "commuters-sans", sans-serif; font-size: 1.2rem; letter-spacing: 0.08em; color: #1a1a1a; text-decoration: none; transition: opacity 0.25s ease; } .sp__handle:hover { opacity: 0.6; } .sp__ig { width: 15px; height: 15px; display: block; } /* ---- popup (portalled to ) ---- */ .sp__overlay { position: fixed; inset: 0; z-index: 990; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; padding: 2rem; } /* `display:flex` above would defeat the [hidden] attribute — keep it dead when closed */ .sp__overlay[hidden] { display: none; } .sp__overlay.is-open { opacity: 1; } .sp__modal { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; width: min(1060px, 94vw); height: min(700px, 86vh); background: #fff; overflow: hidden; } .sp__close { position: absolute; top: 1.4rem; right: 1.8rem; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; font-family: "commuters-sans", sans-serif; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: #1a1a1a; } .sp__close:hover { opacity: 0.6; } .sp__stage { position: relative; overflow: hidden; background: #f2f0ec; } .sp__frame { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: pan-y; } .sp__frame:active { cursor: grabbing; } .sp__strip { display: flex; height: 100%; will-change: transform; } .sp__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; user-select: none; } .sp__chev { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #1a1a1a; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; } .sp__chev:hover { opacity: 0.75; } .sp__chev--prev { left: 1.2rem; } .sp__chev--next { right: 1.2rem; } .sp__dots { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; } .sp__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: background 0.25s ease; } .sp__dot.is-on { background: #fff; } .sp__panel { position: relative; padding: 5.6rem 3.2rem 7rem; display: flex; flex-direction: column; overflow-y: auto; } .sp__panel-handle { display: inline-flex; align-items: center; gap: 0.8rem; font-family: "commuters-sans", sans-serif; font-size: 1.3rem; letter-spacing: 0.08em; color: #1a1a1a; text-decoration: none; } .sp__panel-handle:hover { opacity: 0.6; } .sp__caption { margin: 2.4rem 0 0; font-family: "articulat-cf", sans-serif !important; font-weight: 300; font-size: 1.4rem; line-height: 1.7; color: #1a1a1a; } .sp__view { display: inline-block; margin-top: 2.4rem; align-self: flex-start; font-family: "commuters-sans", sans-serif; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: #1a1a1a; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; } .sp__view:hover { opacity: 0.6; } .sp__postnav { position: absolute; left: 3.2rem; right: 3.2rem; bottom: 2.4rem; display: flex; align-items: center; justify-content: space-between; font-family: "commuters-sans", sans-serif; } .sp__postnav button { padding: 0 0 3px; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer; font-family: inherit; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1a1a; } .sp__postnav button:hover { border-bottom-color: currentColor; } .sp__counter { font-size: 1.1rem; letter-spacing: 0.12em; color: #999; } /* IG chrome — title bar with window-style closer, carousel pill, blue post dots. Mobile-only; desktop keeps the editorial MM layout. */ .sp__bar { display: none; } .sp__bar-close { padding: 0.6rem 1rem; border: 0; background: none; cursor: pointer; font-family: "commuters-sans", sans-serif; font-size: 1.5rem; line-height: 1; color: #1a1a1a; } .sp__pill { display: none; position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; padding: 0.4rem 1rem; border-radius: 999px; background: rgba(38, 38, 38, 0.8); font-family: "commuters-sans", sans-serif; font-size: 1.1rem; letter-spacing: 0.06em; color: #fff; } .sp__pdots { display: none; align-items: center; justify-content: center; gap: 5px; padding: 1rem 0 0.2rem; } .sp__pdot { width: 6px; height: 6px; border-radius: 50%; background: #dbdbdb; transition: background 0.25s ease; } .sp__pdot.is-on { background: #0095f6; } /* Instagram blue */ @media screen and (max-width: 749px) { /* IG-style swipe carousel: cards snap one-by-one with edge peek */ .social-posts { padding: 4rem 0 5rem; } .sp__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.2rem; padding: 0 8vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sp__row::-webkit-scrollbar { display: none; } .sp__post { flex: 0 0 84%; scroll-snap-align: center; } .sp__modal { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; /* bar / image / dots / caption */ height: 88vh; width: 94vw; } .sp__bar { display: flex; align-items: center; justify-content: flex-end; height: 4.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .sp__close { display: none; } /* replaced by the bar's ✕ on mobile */ .sp__pill { display: inline-block; } .sp__pdots { display: flex; } .sp__stage { aspect-ratio: 4 / 5; position: relative; } .sp__frame { position: absolute; } .sp__chev { display: none; } /* swipe + chaining own the gesture on touch */ /* mobile keeps it minimal: account name + Prev 1/3 Next only */ .sp__caption, .sp__view { display: none; } .sp__modal { height: auto; max-height: 88vh; } .sp__panel { padding: 1.8rem 2rem 6.8rem; } .sp__postnav { left: 2rem; right: 2rem; bottom: 1.8rem; } } /* the popup follows the visitor's system theme (IG dark palette) — page stays light */ @media (prefers-color-scheme: dark) { .sp__modal, .sp__bar, .sp__pdots, .sp__panel { background: #262626; } .sp__bar { border-bottom-color: rgba(255, 255, 255, 0.12); } .sp__bar-close, .sp__close, .sp__panel-handle, .sp__caption, .sp__view, .sp__postnav button { color: #f5f5f5; } .sp__counter { color: #a8a8a8; } .sp__pdot { background: #555; } .sp__pdot.is-on { background: #0095f6; } .sp__stage { background: #121212; } /* the IG glyph is a black SVG — flip it white inside the dark popup */ .sp__panel-handle .sp__ig { filter: invert(1); } } /* ========================================================================== EVENT FEATURE — "Upcoming Events" editorial split banner ========================================================================== */ .event-feature-section { margin: 0; } .event-feature { background: #fdfdf9; padding: 0 var(--jc-inset) 4rem; } /* "What we're UP TO" — left-aligned to the page inset (breaks the centered-title repetition); the section already pads its sides to --jc-inset, so zero the shared centered heading's own side padding to hit that same margin. */ .event-feature .jc-sec-head { text-align: left; padding-left: 0; padding-right: 0; } .ev__split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; } .ev__media { overflow: hidden; } .ev__img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; } .ev__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 5rem 5.6rem; background: #f6f4ef; } .ev__eyebrow { margin: 0 0 1.6rem; font-family: "commuters-sans", sans-serif; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: #1a1a1a; opacity: 0.65; } .ev__title { margin: 0; font-family: "ivymode", serif !important; font-weight: 300; font-size: clamp(2.6rem, 2.8vw, 3.6rem); line-height: 1.15; color: #1a1a1a; } .ev__meta { margin: 1.4rem 0 0; font-family: "commuters-sans", sans-serif; font-size: 1.2rem; letter-spacing: 0.16em; text-transform: uppercase; color: #1a1a1a; opacity: 0.75; } .ev__text { margin-top: 2.2rem; font-family: "articulat-cf", sans-serif; font-weight: 300; font-size: 1.4rem; line-height: 1.7; color: #1a1a1a; max-width: 46rem; } .ev__text p { margin: 0 0 1rem; } .ev__btn { margin-top: 2.6rem; color: #1a1a1a; } .ev__btn:focus-visible { outline-color: #1a1a1a; } @media screen and (max-width: 749px) { .ev__split { grid-template-columns: 1fr; } .ev__img { min-height: 0; aspect-ratio: 4 / 3; } .ev__content { padding: 3.2rem 2rem 4rem; } } /* ========================================================= PRODUCT PAGE — REAL WEDDING "As seen on" collage (.pp-rw) Replaces the description's couple-link bullet list with a square photo grid (Team Canva reference). Tiles reuse the homepage rb-tile snippet (.rb__* base styles, already 1:1). ========================================================= */ .pp-rw { margin-top: 1rem; } .pp-rw__heading { font-family: "ivymode", serif; font-weight: 300; font-style: normal; font-size: 3.6rem; line-height: 1.1; letter-spacing: -0.03em; text-transform: none; /* a theme rule uppercases headings here — casing below is literal */ color: #1a1a1a; margin: 0 0 1.2rem; } .pp-rw__heading em { font-style: italic; } /* "As" italic accent, "SEEN ON" plain — matches .jc-sec-head__title */ .pp-rw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pp-rw__grid .rb__name { font-size: 1.3rem; } @media screen and (max-width: 749px) { .pp-rw__heading { font-size: 2.8rem; } .pp-rw__grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= PRODUCT PAGE — "More to Love" similar-dresses carousel (.sd) Horizontal drag carousel of recommended products at the bottom of the product page. Cards come from Dawn's card-product snippet; heading reuses .jc-sec-head. ========================================================= */ .sd { padding: 2rem var(--jc-inset) 6rem; } .sd .jc-sec-head { margin-bottom: 3rem; } .sd__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .sd__track::-webkit-scrollbar { display: none; } .sd__track.is-dragging { cursor: grabbing; } .sd__slide { flex: 0 0 30rem; } .sd__slide .card, .sd__slide .card * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } @media screen and (max-width: 749px) { .sd { padding-left: 20px; padding-right: 20px; padding-bottom: 4rem; } .sd__slide { flex: 0 0 22rem; } } /* ========================================================= LABEL PAGE — collection filter carousel (.ccf) Portrait tiles above the filters; clicking toggles the Search & Discovery "Collection" facet (multi-select). Selected = editorial focus: gallery-mat ink frame + name underline; unselected tiles soften while filtering. ========================================================= */ /* Kill Dawn's stock full-grid white dim during the carousel's AJAX filter fetch (facets.js adds .loading to .collection for every facet request; Dawn's own template-collection.css shows a big opaque .loading-overlay while it's in flight). Scoped to the 3 label templates only — every other collection/search page keeps Dawn's default loading dim untouched. The small per-count spinner (.loading__spinner, near "N products") is a separate element and still shows. */ .template-name--label-jessica .collection.loading .loading-overlay, .template-name--label-chloe .collection.loading .loading-overlay, .template-name--label-atelier .collection.loading .loading-overlay { display: none; } .ccf { padding: 3.4rem var(--jc-inset) 1rem; } .ccf .jc-sec-head { padding-top: 0; padding-bottom: 2.4rem; } .ccf .jc-sec-head__title { font-size: 2.4rem; } @media screen and (max-width: 749px) { .ccf .jc-sec-head__title { font-size: 2rem; } } /* Reusable small breakpoint heading (.jc-heading-break) — same size as the carousel's. */ .jc-heading-break .jc-sec-head { padding: 2.4rem 2rem 0.4rem; } .jc-heading-break .jc-sec-head__title { font-size: 2.4rem; } @media screen and (max-width: 749px) { .jc-heading-break .jc-sec-head { padding: 2rem 1.6rem 0.2rem; } .jc-heading-break .jc-sec-head__title { font-size: 2rem; } } .ccf__track { list-style: none; margin: 0; padding: 4px; /* room for the selected outline (offset 3px + 1px line) */ display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; } .ccf__track::-webkit-scrollbar { display: none; } .ccf__track.is-dragging { cursor: grabbing; } .ccf__item { flex: 0 0 auto; } .ccf__tile { position: relative; display: block; width: 22.5rem; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; transition: opacity 0.3s ease; } .ccf__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } /* soft scrim so the white name reads on bright photos (pseudo — div:empty gotcha) */ .ccf__tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.18); transition: background 0.3s ease; pointer-events: none; } .ccf__name { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 1rem; font-family: "commuters-sans", sans-serif; font-size: 1.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-align: center; pointer-events: none; } /* the underline is its own element edge so it can animate cleanly */ .ccf__name::after { content: ""; position: absolute; left: 50%; bottom: calc(50% - 1.9em); width: 3.2em; height: 1px; background: currentColor; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .ccf__tile:hover .ccf__img { transform: scale(1.04); } .ccf__tile:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* Selected: gallery-mat frame + underline; brand ink, no color shift */ .ccf__tile.is-selected { outline: 1px solid #1a1a1a; outline-offset: 3px; } .ccf__tile.is-selected .ccf__name::after { transform: translateX(-50%) scaleX(1); } .ccf__tile.is-selected::before { background: rgba(0, 0, 0, 0.28); } /* While any tile is selected, the others step back (hover brings one forward) */ .ccf--filtering .ccf__tile:not(.is-selected) { opacity: 0.5; } .ccf--filtering .ccf__tile:not(.is-selected):hover, .ccf--filtering .ccf__tile:not(.is-selected):focus-visible { opacity: 1; } @media screen and (max-width: 749px) { .ccf { padding: 2.4rem 20px 0.6rem; } .ccf__tile { width: 15rem; } .ccf__name { font-size: 1.2rem; } }