/** Shopify CDN: Minification failed Line 129:15 Expected identifier but found whitespace Line 129:23 Unexpected ";" **/ /*============================================================================== WONDER & WORN DESIGN SYSTEM Theme: Stellar (Broadcast by Presidio) Brand Guide Implementation Version: 1.0 This stylesheet contains ALL custom Wonder & Worn styling. Leave Stellar's theme.css untouched whenever possible. ==============================================================================*/ /*============================================================================== CUSTOM FONT REGISTRATION ==============================================================================*/ @font-face { font-family: "Prairie Script Bold"; src: url("/cdn/shop/files/prairiescriptbold.woff?v=1785540470") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nitti"; src: url("/cdn/shop/files/Nitti-Regular.woff?v=1785538404") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/cdn/shop/files/Satoshi-Regular.woff?v=1785530311") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } /*============================================================================== Wonder & Worn Design System v1.0 Foundation v1.1 Typography v1.2 Colors v1.3 Components v1.4 Homepage v1.5 Collections v1.6 Product Pages ==============================================================================*/ /*============================================================================== 01 | BRAND TOKENS ==============================================================================*/ :root { /*========================================================================== BRAND TYPOGRAPHY ==========================================================================*/ --ww-font-script: "Prairie Script Bold", serif; --ww-font-heading: "Nitti", monospace; --ww-font-body: "Satoshi", sans-serif; /*========================================================================== FONT WEIGHTS ==========================================================================*/ --ww-weight-regular: 400; --ww-weight-medium: 500; --ww-weight-bold: 700; /*========================================================================== LETTER SPACING (Based on Brand Guide) ==========================================================================*/ --ww-track-script: -.10em; --ww-track-heading: -.03em; --ww-track-body: 0; /*========================================================================== LINE HEIGHTS ==========================================================================*/ --ww-line-script: 1; --ww-line-heading: 1.15; --ww-line-body: 1.6; /*========================================================================== BORDER RADIUS ==========================================================================*/ --ww-radius-sm: 6px; --ww-radius-md: 12px; --ww-radius-lg: 20px; --ww-radius-xl: 32px; /*========================================================================== TRANSITIONS ==========================================================================*/ --ww-transition: .25s ease; } /*============================================================================== 02 | BRAND COLORS ==============================================================================*/ /*========================================================================== PRIMARY ==========================================================================*/ --ww-cream: #F8F5EE; --ww-off-white: #FCFBF7; /*========================================================================== BLUES ==========================================================================*/ --ww-powder-blue: #D9E8F1; --ww-cloudy-blue: #BFCED8; /*========================================================================== GREENS ==========================================================================*/ --ww-soft-green: #D8E1C9; --ww-green-tea: #A8B78D; /*========================================================================== WARM TONES ==========================================================================*/ --ww-chamomile: #F4E6C5; --ww-marigold: #E4B54B; /*========================================================================== EARTH TONES ==========================================================================*/ --ww-brick: #8F4A3B; --ww-cherry: #B4433E; --ww-nutmeg: #8D6B4C; --ww-chalkboard: #3B3834; } /*============================================================================== 03 | TYPOGRAPHY UTILITIES ==============================================================================*/ /* Font Family Utilities */ .ww-script { font-family: var(--ww-font-script); } .ww-nitti { font-family: var(--ww-font-heading); } .ww-satoshi { font-family: var(--ww-font-body); } /* Text Transform */ .ww-uppercase { text-transform: uppercase; } /* Text Alignment */ .ww-text-center { text-align: center; } .ww-text-left { text-align: left; } .ww-text-right { text-align: right; } /*============================================================================== 04 | TYPOGRAPHY COMPONENTS ==============================================================================*/ /* Editorial Headline */ .ww-headline{ font-family:var(--ww-font-script); letter-spacing:var(--ww-track-script); line-height:1; font-weight:400; } /* Section Label */ .ww-label{ font-family:var(--ww-font-heading); text-transform:uppercase; letter-spacing:var(--ww-track-heading); font-weight:400; } /* Body Copy */ .ww-body{ font-family:var(--ww-font-body); line-height:var(--ww-line-body); } /*============================================================================== 05 | STELLAR THEME MAPPING ==============================================================================*/ /*-------------------------------------------------------------------------- BODY TYPOGRAPHY --------------------------------------------------------------------------*/ body, p, li, .rte, input, textarea, select { font-family: var(--ww-font-body); } /*-------------------------------------------------------------------------- NAVIGATION --------------------------------------------------------------------------*/ .site-nav, .navlink, .header__menu, .header__menu a { font-family: var(--ww-font-heading); text-transform: uppercase; letter-spacing: var(--ww-track-heading); } /*-------------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------------*/ .btn, .button, button { font-family: var(--ww-font-heading); text-transform: uppercase; letter-spacing: var(--ww-track-heading); } /*-------------------------------------------------------------------------- PRODUCT TITLES --------------------------------------------------------------------------*/ .product-item__title, .product__title, .product-title, .product-information h3 { font-family: var(--ww-font-heading); text-transform: uppercase; letter-spacing: var(--ww-track-heading); } /*============================================================================== 06 | HOMEPAGE SECTION HEADERS ==============================================================================*/ /* Section Label */ .grid__heading-holder .grid__heading { font-family: var(--ww-font-heading); text-transform: uppercase; letter-spacing: var(--ww-track-heading); font-weight: 400; } /* Editorial subtitle */ .grid__heading-holder .grid__description { margin-top: 0.75rem; } .grid__heading-holder .grid__description p { font-family: var(--ww-font-script) !important; font-size: clamp(1.2rem, 1.7vw, 1.6rem); letter-spacing: var(--ww-track-script: 0;); line-height: 1.05; text-align: center; margin: 0 auto; max-width: 42ch; } /*============================================================================== 06 | COMPONENTS ==============================================================================*/ /*============================================================================== WW-001 | HERO ==============================================================================*/ /*============================================================================== WW-002 | SHOP BY CATEGORY ==============================================================================*/ /*============================================================================== WW-003 | EDITORIAL BANNER ==============================================================================*/ .ww-editorial-banner{ width:100%; } .ww-editorial-banner__image{ position:relative; overflow:hidden; min-height:700px; background:var(--ww-chalkboard); } .ww-editorial-banner__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ww-editorial-banner__overlay{ position:absolute; inset:0; background:linear-gradient( 90deg, rgba(59,56,52,var(--overlay-opacity)) 0%, rgba(59,56,52,calc(var(--overlay-opacity) * .45)) 35%, rgba(59,56,52,0) 65% ); } .ww-editorial-banner__content{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; max-width:520px; min-height:700px; padding-left:8vw; padding-right:2rem; } /*-------------------------------------------------------------- Typography --------------------------------------------------------------*/ .ww-eyebrow{ font-family:var(--ww-font-heading); font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; color:white; margin-bottom:1rem; } .ww-script{ font-family:var(--ww-font-script); font-size:clamp(3rem,5vw,5.5rem); line-height:.95; letter-spacing:-.06em; color:var(--ww-off-white); margin-bottom:1.5rem; } .ww-copy{ font-family:var(--ww-font-body); font-size:1.05rem; line-height:1.8; color:white; max-width:34ch; margin-bottom:2rem; } .ww-link{ display:inline-flex; width:max-content; font-family:var(--ww-font-heading); text-transform:uppercase; letter-spacing:.08em; color:white; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:.35rem; transition:var(--ww-transition); } .ww-link:hover{ border-color:white; } /*-------------------------------------------------------------- Section Heights --------------------------------------------------------------*/ .ww-height-small .ww-editorial-banner__image, .ww-height-small .ww-editorial-banner__content{ min-height:500px; } .ww-height-medium .ww-editorial-banner__image, .ww-height-medium .ww-editorial-banner__content{ min-height:650px; } .ww-height-large .ww-editorial-banner__image, .ww-height-large .ww-editorial-banner__content{ min-height:800px; } .ww-height-full .ww-editorial-banner__image, .ww-height-full .ww-editorial-banner__content{ min-height:100vh; } /*============================================================================== WW-004 | NEW TO THE SHOP ==============================================================================*/ /*============================================================================== WW-005 | WELCOME ==============================================================================*/ /*============================================================================== WW-006 | COMMUNITY CARDS ==============================================================================*/ /*============================================================================== WW SHARED COMPONENTS ==============================================================================*/ /*------------------------------------------------------------------------------ WW Eyebrow ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ WW Editorial Heading ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ WW Body Copy ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ WW Editorial Link ------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ WW Buttons ------------------------------------------------------------------------------*/ /*============================================================================== WW-101 | PRODUCT CARD POLISH ==============================================================================*/ /* Product images */ .product-item__image, .product-grid-item__image, .grid-product__image, .product-item img { border-radius: 12px; overflow: hidden; } /* Product image animation */ .product-item img, .product-grid-item img { transition: transform .35s ease, filter .35s ease; } .product-item:hover img, .product-grid-item:hover img { transform: scale(1.03); } .product-item, .grid-product { transition: transform .25s ease; } .product-item:hover, .grid-product:hover { transform: translateY(-4px); }