/** Shopify CDN: Minification failed Line 133:0 Unexpected "{" Line 133:1 Expected identifier but found "%" Line 134:47 Unexpected "(" Line 141:72 Unterminated string token Line 146:3 Expected identifier but found "%" Line 147:2 Unexpected "{" Line 147:3 Expected identifier but found "%" Line 148:16 Unexpected "/" Line 153:3 Expected identifier but found "%" Line 159:2 Unexpected "{" ... and 13 more hidden warnings **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:collection-promo-banner (INDEX:0) */ .products-promo { position: relative; overflow: hidden; min-height: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 11rem 1.5rem 5rem; } .products-promo:not(.products-promo--has-image)::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; color: inherit; background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 64px); } .products-promo__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; } .products-promo__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 0; } .products-promo__pattern { position: absolute; inset: 0; overflow: hidden; opacity: .1; color: currentColor; } .products-promo__pattern-mark { position: absolute; width: 40vw; max-width: 480px; height: auto; } .products-promo__pattern-mark--left { top: -10%; left: -8%; transform: rotate(-8deg); } .products-promo__pattern-mark--right { bottom: -14%; right: -10%; transform: rotate(10deg); } .products-promo__pattern-mark--outline { stroke-width: .6; } /* max-width is generous on purpose: at the nowrap heading's largest size (desktop, clamp caps at 4rem) it measures ~730px wide. A narrower content box combined with white-space:nowrap made text-align:center stop centering symmetrically once the line overflowed its box (verified directly on the live page: it pinned the left edge to the box edge and let ALL the overflow spill right, visibly shifting the heading off from the eyebrow/subtext above/below it). 1100px keeps this box comfortably wider than the heading can ever get, so it never overflows and text-align:center centers all three lines on the exact same axis. */ .products-promo__content { position: relative; z-index: 1; max-width: 1100px; width: 100%; margin: 0 auto; } /* Body font (Inter), not the Univers Black display face -- a condensed bold face at 12px with wide tracking was hard to read. Semi-bold + tighter tracking keeps the "eyebrow" feel while staying legible. */ .products-promo__eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; opacity: var(--text-emphasis-opacity, .85); } /* Univers Black is the default h1-h4 face already (see :root --font-display); "Style trailing period" below swaps a trailing "." to the Soulmaze script punctuation mark used site-wide for brand headlines. clamp's floor + nowrap keep this on one line down to narrow phones instead of wrapping to two -- keep heading copy short. */ .products-promo__heading { font-size: clamp(1.7rem, 7vw, 4rem); line-height: 1.05; letter-spacing: 0.006em; margin: 0 0 1.25rem; white-space: nowrap; } .products-promo__heading .punct { font-family: var(--font-punct); font-weight: 400; } .products-promo__subtext { opacity: var(--text-emphasis-opacity, .85); margin: 0; line-height: 1.65; font-size: 15px; } /* END_SECTION:collection-promo-banner */ /* START_SECTION:coming-soon (INDEX:2) */ .coming-soon { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .coming-soon::before { /* Tone-on-tone diagonal stripe texture -- reads as an intentional full-width header treatment rather than a flat placeholder block, using only the section's own text color at low opacity so it always matches whichever scheme is picked without needing an uploaded photo. */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06; color: inherit; background-image: repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 64px); } .coming-soon__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; } .coming-soon__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .coming-soon__pattern { position: absolute; inset: 0; overflow: hidden; opacity: .1; color: currentColor; } .coming-soon__pattern-mark { position: absolute; width: 46vw; max-width: 560px; height: auto; } .coming-soon__pattern-mark--left { top: -8%; left: -10%; transform: rotate(-8deg); } .coming-soon__pattern-mark--right { bottom: -14%; right: -8%; transform: rotate(10deg); } .coming-soon__pattern-mark--outline { stroke-width: .6; } .coming-soon__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.18) 100%); } .coming-soon__content { position: relative; z-index: 1; text-align: center; max-width: 900px; margin: 0 auto; padding: 6rem 1.5rem; display: flex; flex-direction: column; align-items: center; } /* Body font (Inter), not the Univers Black display face -- see the same note on .products-promo__eyebrow in collection-promo-banner.liquid. */ .coming-soon__eyebrow { font-family: var(--font-body); font-size: clamp(10px, 2.6vw, 13px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; opacity: var(--text-emphasis-opacity, .85); white-space: nowrap; } /* Both forced to a single line (clamp floor + nowrap) rather than wrapping -- copy is kept short specifically so this stays legible down to small phones instead of shrinking to an unreadable size. */ .coming-soon__heading { font-size: clamp(1.6rem, 7vw, 4rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 1.25rem; white-space: nowrap; } .coming-soon__subtext { opacity: var(--text-emphasis-opacity, .85); margin: 0 0 2rem; line-height: 1.5; font-size: clamp(11px, 3.4vw, 15px); white-space: nowrap; } .coming-soon__subtext p { margin: 0; } .coming-soon__form-row { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; } .coming-soon__form-row input { flex: 1; padding: 14px 16px; border: 1px solid var(--clr-scheme-border, rgba(255,255,255,.25)); background: transparent; color: inherit; font-size: 14px; } .coming-soon__form-row button { padding: 14px 20px; background: var(--clr-scheme-text, var(--clr-cream)); color: var(--clr-scheme-bg, var(--clr-ink)); border: none; font-family: var(--font-display); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; } .coming-soon__form-success { font-size: 14px; opacity: .85; } .coming-soon__link { display: inline-block; margin-top: 1.5rem; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; opacity: .85; } .coming-soon__link:hover { opacity: 1; } /* END_SECTION:coming-soon */ /* START_SECTION:contact-form (INDEX:3) */ .contact-form-section { max-width: 680px; margin: 0 auto; padding: 10rem 1.5rem 4rem; } /* Nudges just the eyebrow+heading ("We'd love to hear from you" / "Get in touch") up 20px without moving the subtext or anything below it -- pulling the eyebrow up shifts the whole flow after it too, so subtext gets a matching +20px added back to its own margin to stay anchored in its original spot. */ .contact-form-section .section-heading__eyebrow { margin-top: -20px; } .contact-form-section .section-heading__subtext { margin-top: calc(1.25rem + 20px); } .contact-form__page-content { margin-top: 1.5rem; line-height: 1.6; } .contact-form__page-content p { margin: 0 0 .75rem; } .contact-form__page-content a { text-decoration: underline; } /* Both the section subtext ("Questions about an order...") and the page body copy ("Our customer support team...") stay on one line each once there's genuinely enough room -- widens the whole section a bit at this breakpoint since the default 680px reading-width isn't enough even on desktop, same single-line pattern used on the 404/Coming Soon pages elsewhere on the site. Falls back to normal wrapping below it. */ @media (min-width: 900px) { .contact-form-section { max-width: 860px; } .contact-form-section .section-heading__subtext, .contact-form-section .contact-form__page-content p { white-space: nowrap; } } .contact-form__row { margin-bottom: 1.25rem; } .contact-form__row label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; } .contact-form__row input, .contact-form__row textarea { width: 100%; border: 1px solid var(--clr-border); background: transparent; padding: 12px 14px; font-size: 15px; font-family: inherit; } .contact-form__row input:focus, .contact-form__row textarea:focus { outline: none; border-color: var(--clr-ink); } .contact-form__success { background: var(--clr-ink); color: var(--clr-cream); padding: 1rem; margin-bottom: 1.5rem; text-align: center; } .contact-form__errors { color: #b3261e; margin-bottom: 1.5rem; } /* END_SECTION:contact-form */ /* START_SECTION:custom-product-grid (INDEX:4) */ {%- comment -%} Shared across every product grid site-wide (Main collection, this section, and search results all render the same .product-grid markup, so this one stylesheet is the single source of truth for all of them). Progressive collapse, one column tier per real breakpoint, instead of the old setup which only had a mobile tier and a single "desktop" tier that held 4-up all the way from 768px up through ultra-wide monitors -- that's what was cramming tiles too small on anything narrower than a large desktop. Now: 1 (phone) -> 2 (tablet) -> 3 (small desktop/laptop) -> 4 (full desktop), matching the breakpoints already used elsewhere in the theme (768/1000/1280 -- see collection-strip and the desktop header overrides in theme.css.liquid). {%- endcomment -%} {%- comment -%} No max-width/margin:auto here anymore -- product grids now run the full viewport width (minus this side padding) instead of capping at --container, so columns get more room and product photos render noticeably bigger. Applies everywhere this shared grid is used: collection pages, search results, and this section itself. {%- endcomment -%} .product-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 32px 20px; padding: 0 1.5rem; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; } } @media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } } @media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 56px 40px; } } {%- comment -%} "Columns (mobile)" editor setting -- only takes effect below the tablet breakpoint, so choosing 2 or 3 there can't leak into and override the tablet/desktop tiers above. {%- endcomment -%} @media (max-width: 767px) { .product-grid--cols-mobile-1 { grid-template-columns: repeat(1, 1fr); } .product-grid--cols-mobile-2 { grid-template-columns: repeat(2, 1fr); } .product-grid--cols-mobile-3 { grid-template-columns: repeat(3, 1fr); } } {%- comment -%} "Columns (desktop)" editor setting -- only takes effect at full desktop width, where there's room; a page set to 5 or 6 still steps down through 3/2/1 exactly like the 4-column default below that, rather than squeezing 6-up tiles onto a tablet. {%- endcomment -%} @media (min-width: 1280px) { .product-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .product-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .product-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } .product-grid--cols-5 { grid-template-columns: repeat(5, 1fr); } .product-grid--cols-6 { grid-template-columns: repeat(6, 1fr); } } .product-grid-section { } .product-grid__placeholder, .product-grid__empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--clr-border); color: rgba(33,33,33,.6); max-width: var(--container); margin: 0 auto; } /* END_SECTION:custom-product-grid */ /* START_SECTION:main-404 (INDEX:11) */ .state-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10rem 1.5rem; max-width: var(--container); margin: 0 auto; } /* "404" as a big bold numeral above the headline, but dialed back from the previous pass -- smaller size and the original dark-gray color instead of full-black/full-opacity, so the headline stays the clear focal point and "404" reads as a supporting label above it. Scoped to main-404.liquid only, so this doesn't touch genuine eyebrow labels elsewhere on the site. */ .state-page__eyebrow { font-family: var(--font-display); font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -.01em; color: rgba(33,33,33,.6); margin-bottom: .75rem; } .state-page__text { margin-top: 1.25rem; color: rgba(33,33,33,.7); line-height: 1.6; } .state-page__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; } /* Heading + subtext each stay on a single line once there's room for it (tablet landscape and up) -- wider container above plus a smaller, tuned clamp on the heading specifically so "Even dreamers take a wrong turn." never runs wider than the container at any width in this range. Below these breakpoints they fall back to normal wrapping rather than shrinking the text to the point of being hard to read on a phone. */ @media (min-width: 768px) { .state-page__heading { white-space: nowrap; font-size: clamp(1.8rem, 4.8vw, 3.6rem); } } @media (min-width: 1000px) { .state-page__text { white-space: nowrap; } } /* END_SECTION:main-404 */ /* START_SECTION:main-cart (INDEX:12) */ .cart-page { max-width: var(--container); margin: 0 auto; padding: 10rem 1.5rem 4rem; } .cart-page__empty { text-align: center; padding: 4rem 1.5rem; } .cart-page__empty p { color: rgba(33,33,33,.7); margin-bottom: 2rem; } .cart-page__table { width: 100%; border-collapse: collapse; } .cart-page__table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(33,33,33,.5); padding-bottom: 1rem; border-bottom: 1px solid var(--clr-border); } .cart-page__row td { padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--clr-border); vertical-align: top; } .cart-page__product-cell { display: flex; gap: 1rem; } .cart-page__image { width: 80px; height: 96px; flex-shrink: 0; background: var(--clr-panel); display: block; } .cart-page__image img { width: 100%; height: 100%; object-fit: contain; } .cart-page__title { font-weight: 500; } .cart-page__variant { font-size: 13px; color: rgba(33,33,33,.6); margin-top: 4px; } .cart-page__remove { display: block; margin-top: 8px; font-size: 12px; text-decoration: underline; color: rgba(33,33,33,.6); background: none; border: none; padding: 0; } .cart-page__qty-input { width: 64px; padding: 8px; border: 1px solid var(--clr-border); font-family: inherit; } .cart-page__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 2rem; } .cart-page__summary { max-width: 340px; width: 100%; margin-left: auto; } .cart-page__subtotal { display: flex; justify-content: space-between; font-size: 1.1rem; margin-bottom: .5rem; } .cart-page__note { font-size: 12px; color: rgba(33,33,33,.6); margin-bottom: 1rem; } .cart-page__continue { display: block; text-align: center; margin-top: 1rem; } @media (max-width: 640px) { .cart-page__table thead { display: none; } .cart-page__row td { display: flex; justify-content: space-between; align-items: center; border-bottom: none; padding: .5rem; } .cart-page__row td[data-label]::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; color: rgba(33,33,33,.5); } .cart-page__row { display: block; border-bottom: 1px solid var(--clr-border); padding-bottom: 1rem; margin-bottom: 1rem; } } /* END_SECTION:main-cart */ /* START_SECTION:main-collection (INDEX:13) */ /* No max-width cap -- lets the product grid inside run full viewport width (see custom-product-grid.liquid for the matching change) so columns get more room and photos render bigger. The heading above it stays visually contained on its own via .section-heading's own max-width, so this doesn't affect that. */ .collection-page { padding: 10rem 1.5rem 4rem; } /* Applied only when the promo banner above already provides the top clearance/breathing room -- avoids double-stacking the header offset. */ .collection-page--tight-top { padding-top: 4rem; } .collection-page__empty { text-align: center; padding: 4rem 1.5rem; color: rgba(33,33,33,.6); } .collection-page__pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; font-size: 14px; } .collection-page__pagination .is-current { font-weight: 600; } /* END_SECTION:main-collection */ /* START_SECTION:main-product (INDEX:14) */ .product-page { max-width: var(--container); margin: 0 auto; padding: 10rem 1.5rem 4rem; } .product-page__back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(33,33,33,.6); margin-bottom: 1.5rem; } .product-page__back:hover { color: var(--clr-charcoal); } .product-page__grid { display: grid; gap: 2.5rem; } @media (min-width: 768px) { .product-page__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .product-page .featured-product__info { position: relative; margin-top: 12px; } @media (min-width: 768px) { .product-page[data-sticky-info="true"] .featured-product__info { position: sticky; top: 8rem; align-self: start; } } .featured-product__size-chart-link { margin-top: .75rem; font-size: 12px; letter-spacing: .05em; text-decoration: underline; text-transform: uppercase; background: none; border: none; padding: 0; cursor: pointer; color: inherit; } .featured-product__trust-badges { margin-top: 1rem; font-size: 12px; color: rgba(33,33,33,.6); text-align: center; } .size-chart-popup { position: fixed; inset: 0; z-index: 90; } .size-chart-popup[hidden] { display: none; } .size-chart-popup__overlay { position: absolute; inset: 0; background: rgba(10,10,10,.5); } .size-chart-popup__panel { position: relative; max-width: 560px; max-height: 80vh; overflow-y: auto; margin: 8vh auto 0; background: var(--clr-cream); color: var(--clr-charcoal); padding: 2.5rem 2rem; } .size-chart-popup__close { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: inherit; } {%- comment -%} Quantity stepper + Add to Bag, side by side instead of stacked full- width. Previously the quantity selector had zero styling of its own (plain default /