/** Shopify CDN: Minification failed Line 721:924 Expected identifier but found whitespace Line 727:668 Expected "}" to go with "{" **/ /* ================================================================== NOA — Custom CSS Overrides v3 Premium music culture brand — dark editorial aesthetic Phase 1: Colors, Typography, Uppercase Headings ================================================================== */ /* Load editorial fonts from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;700&display=swap'); /* ---- Brand Color Palette ---- */ :root { /* Core brand colors */ --noa-bg: #0A0A0A; --noa-surface: #1A1A2E; --noa-surface-alt: #151520; --noa-heading: #F2F0EB; --noa-body: #A0A0A0; --noa-border: #1A1A2E; --noa-border-light: #252535; --noa-white: #F2F0EB; --noa-muted: #666666; /* City accent tones */ --noa-brooklyn: #E8872E; --noa-berlin: #808080; --noa-berlin-neon: #39FF14; --noa-bristol: #1B2A4A; --noa-lagos: #F4C430; --noa-lisbon: #2E5090; --noa-la: #8B3A8B; /* Font stacks */ --noa-heading-font: 'Oswald', 'Impact', 'Arial Narrow', sans-serif; --noa-body-font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif; } /* ---- Override Horizon Theme Color Variables ---- */ :root { /* Scheme 1: Primary dark */ --color-scheme-1-background: var(--noa-bg); --color-scheme-1-foreground-heading: var(--noa-heading); --color-scheme-1-foreground: var(--noa-body); --color-scheme-1-primary: var(--noa-white); --color-scheme-1-border: var(--noa-border); /* Scheme 2: Card surfaces */ --color-scheme-2-background: var(--noa-surface); --color-scheme-2-foreground-heading: var(--noa-heading); --color-scheme-2-foreground: var(--noa-body); /* Scheme 3: Secondary surface */ --color-scheme-3-background: var(--noa-surface-alt); --color-scheme-3-foreground-heading: var(--noa-heading); --color-scheme-3-foreground: var(--noa-body); /* Override Horizon theme font variables */ --font-body--family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --font-heading--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --font-h1--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --font-h2--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --font-h3--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --font-h4--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --font-h5--family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --font-h6--family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --font-paragraph--family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --font-subheading--family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --font-accent--family: 'Oswald', 'Impact', 'Arial Narrow', sans-serif !important; --button-font-family-primary: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; --button-font-family-secondary: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important; } /* ---- Typography: Headings ---- */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, [class*="heading"], .product__title, .collection-hero__title, .section-header__title { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } h1, .h1 { letter-spacing: 0.1em !important; } h5, h6, .h5, .h6 { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; } /* ---- Typography: Body ---- */ body, p, .rte, .product__description, [class*="body"], [class*="paragraph"] { font-family: var(--noa-body-font) !important; color: var(--noa-body); } /* ---- Color Overrides: Background ---- */ body { background-color: var(--noa-bg) !important; } /* Warm off-white for primary text elements */ a { color: var(--noa-white); } a:hover { color: #FFFFFF; } /* ---- Button Styles ---- */ .button, .btn, [class*="button--primary"], button[type="submit"] { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 500 !important; } /* ---- Product Cards ---- */ .card, .product-card, [class*="card"] { background-color: var(--noa-surface) !important; border-color: var(--noa-border) !important; } .product-card__title, .card__heading { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--noa-heading) !important; } /* ---- Navigation ---- */ .header__heading-link { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; } nav a, .header__menu-item { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.85em !important; } /* ---- Footer ---- */ .footer { background-color: var(--noa-bg) !important; border-top: 1px solid var(--noa-border) !important; } /* ---- Announcement Bar ---- */ .announcement-bar { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.75em !important; } /* ---- Price Styling ---- */ .price, [class*="price"] { font-family: var(--noa-body-font) !important; letter-spacing: 0.04em !important; color: var(--noa-heading) !important; } /* ---- Collection Page ---- */ .collection-hero { background-color: var(--noa-bg) !important; } /* ---- Borders & Dividers ---- */ hr, [class*="divider"], [class*="separator"] { border-color: var(--noa-border) !important; } /* ---- Horizon Text Block Fix ---- */ .h1 p, .h2 p, .h3 p, .h4 p, .h1 > *, .h2 > *, .h3 > *, .h4 > *, [class*="text-block"].h1 p, [class*="text-block"].h2 p, [class*="text-block"].h3 p { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } .h1 p, [class*="text-block"].h1 p { letter-spacing: 0.1em !important; } [class*="__subheading"] p { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; color: var(--noa-heading) !important; } /* ---- Product Grid Titles ---- */ .card__title, .card__title a, [class*="product"] [class*="title"] { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--noa-heading) !important; } /* ---- Hide Horizon slideshow controls on product cards ---- */ .card .slideshow-control, .product-card .slideshow-control, .card .icon-arrow, .quick-add__button { opacity: 0 !important; pointer-events: none !important; } /* ================================================================ Phase 3: Product Page Layout & Styling ================================================================ */ /* ---- Product Image Grid: Remove white gaps between images ---- */ .product__media-list, .product-media-grid, [class*="product"] .grid, .product__media-wrapper { gap: 2px !important; background-color: var(--noa-bg) !important; } .product__media-item, .product-media-grid__item { background-color: var(--noa-surface) !important; border: none !important; overflow: hidden !important; } /* ---- Product Image Container: Darken white bg around mockups ---- */ .product__media img, .product-media-grid img, .product__media-item img, [class*="product-media"] img { background-color: var(--noa-surface) !important; mix-blend-mode: multiply !important; } /* ---- Product Title on PDP ---- */ .product__title, .product-info__title, h1.product__title { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; font-size: 2rem !important; margin-bottom: 0.5rem !important; } /* ---- Product Description: More authority ---- */ .product__description, .product-info__description, [class*="product"] .rte, .product__text { font-family: var(--noa-body-font) !important; color: var(--noa-body) !important; font-size: 0.95rem !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; margin-bottom: 1rem !important; } /* ---- Price styling on PDP ---- */ .product__price, .product-info__price, .price--large { font-family: var(--noa-heading-font) !important; font-weight: 600 !important; color: var(--noa-heading) !important; font-size: 1.25rem !important; letter-spacing: 0.04em !important; } /* ---- Size selector pills ---- */ .variant-picker__option, .size-picker__option, [class*="variant"] label, .product-form__option label { font-family: var(--noa-body-font) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-color: var(--noa-border) !important; color: var(--noa-body) !important; } .variant-picker__option:hover, .size-picker__option:hover, [class*="variant"] label:hover, .product-form__option label:hover { border-color: var(--noa-heading) !important; color: var(--noa-heading) !important; } /* ---- Add to Cart button: More assertive ---- */ .product-form__cart-submit, .product-form__submit, button[name="add"], .product-form .button--primary { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; font-size: 0.9rem !important; border: 2px solid var(--noa-heading) !important; background-color: transparent !important; color: var(--noa-heading) !important; transition: all 0.3s ease !important; } .product-form__cart-submit:hover, .product-form__submit:hover, button[name="add"]:hover, .product-form .button--primary:hover { background-color: var(--noa-heading) !important; color: var(--noa-bg) !important; } /* ---- Buy with Shop Pay: Tone down the purple ---- */ .shopify-payment-button__button, .shopify-payment-button .shopify-payment-button__button--unbranded, [class*="shopify-payment"] { border-radius: 0 !important; opacity: 0.85 !important; } .shopify-payment-button__button:hover { opacity: 1 !important; } /* ---- "More payment options" link ---- */ .shopify-payment-button__more-options, [class*="payment-button"] a { font-family: var(--noa-body-font) !important; color: var(--noa-body) !important; font-size: 0.8rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* ---- Size Guide collapse/expand styling ---- */ .product__accordion, .accordion, details.product__collapsible, [class*="size-guide"], .collapsible-content { border-color: var(--noa-border) !important; } .product__accordion summary, .accordion__title, details summary, [class*="size-guide"] summary { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; color: var(--noa-heading) !important; font-size: 0.85rem !important; padding: 1rem 0 !important; } /* ---- Size Guide Table ---- */ .product__accordion table, .size-chart table, details table, .collapsible-content table { width: 100% !important; border-collapse: collapse !important; font-family: var(--noa-body-font) !important; font-size: 0.85rem !important; color: var(--noa-body) !important; } .product__accordion th, .size-chart th, details th { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 600 !important; color: var(--noa-heading) !important; font-size: 0.75rem !important; padding: 0.75rem 1rem !important; border-bottom: 1px solid var(--noa-border) !important; background-color: var(--noa-surface-alt) !important; } .product__accordion td, .size-chart td, details td { padding: 0.6rem 1rem !important; border-bottom: 1px solid rgba(26, 26, 46, 0.5) !important; color: var(--noa-body) !important; } .product__accordion tr:hover td, .size-chart tr:hover td, details tr:hover td { background-color: var(--noa-surface-alt) !important; color: var(--noa-heading) !important; } /* ---- "You May Also Like" section ---- */ .product-recommendations__heading, [class*="recommendations"] h2, .related-products h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; color: var(--noa-heading) !important; font-size: 1.1rem !important; margin-bottom: 1.5rem !important; } /* ---- Quantity selector styling ---- */ .quantity__button, .quantity__input, [class*="quantity"] button, [class*="quantity"] input { font-family: var(--noa-body-font) !important; color: var(--noa-heading) !important; border-color: var(--noa-border) !important; } /* ================================================================ Phase 4: City-Differentiated Collection Pages Each city gets a unique accent color via body.collection-{handle} ================================================================ */ /* ---- City Accent Color Variables ---- */ body.collection-berlin { --noa-city-accent: #C0C0C0; } body.collection-brooklyn { --noa-city-accent: #FF6B35; } body.collection-bristol { --noa-city-accent: #1A6B8A; } body.collection-lagos { --noa-city-accent: #4A7C59; } body.collection-los-angeles { --noa-city-accent: #C4A265; } body.collection-lisbon { --noa-city-accent: #C4725A; } /* ---- Collection Title: City accent underline ---- */ [class*="collection"] h1, .collection-hero__title, .collection-header__title { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; color: var(--noa-heading) !important; font-size: 2.5rem !important; padding-bottom: 0.75rem !important; border-bottom: 3px solid var(--noa-city-accent, var(--noa-heading)) !important; display: inline-block !important; margin-bottom: 1rem !important; } /* ---- Collection Description: Styling ---- */ .collection-hero__description, .collection-header__description, [class*="collection"] .rte { font-family: var(--noa-body-font) !important; color: var(--noa-body) !important; font-size: 1rem !important; line-height: 1.6 !important; letter-spacing: 0.02em !important; max-width: 640px !important; margin-bottom: 2rem !important; } /* ---- Product Card: City accent hover ---- */ [class*="collection"] .product-card:hover, [class*="collection"] .card:hover { border-color: var(--noa-city-accent, var(--noa-border)) !important; } /* ---- Product Card Title on collection grid ---- */ .product-card__title, .card__title, .card-product__title { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: 600 !important; color: var(--noa-heading) !important; } /* ---- Product Card Price on collection grid ---- */ .product-card__price, .card__price, .price { font-family: var(--noa-body-font) !important; color: var(--noa-body) !important; font-weight: 500 !important; } /* ---- Filter/Sort bar on collection pages ---- */ .collection-filters, [class*="facets"], .active-facets { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: 0.8rem !important; color: var(--noa-body) !important; } /* ---- Collection grid spacing ---- */ .collection-wrapper, .collection-product-list, [class*="collection"] .grid { gap: 1rem !important; } /* ================================================================ Phase 5: Homepage Refinement ================================================================ */ /* ---- Hero Section Typography ---- */ .banner__heading, .hero__heading, [class*="banner"] h1, [class*="hero"] h1, [class*="banner"] h2, [class*="hero"] h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } /* ---- Hero Subheading ---- */ .banner__text, .hero__text, [class*="banner"] .banner__text, [class*="hero"] p { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 400 !important; color: var(--noa-body) !important; font-size: 1.1rem !important; } /* ---- Hero CTA Button ---- */ .banner__buttons .button, .hero__buttons .button, [class*="banner"] .button--primary, [class*="hero"] .button--primary { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; border: 2px solid var(--noa-heading) !important; background-color: transparent !important; color: var(--noa-heading) !important; padding: 12px 32px !important; transition: all 0.3s ease !important; } .banner__buttons .button:hover, .hero__buttons .button:hover { background-color: var(--noa-heading) !important; color: var(--noa-bg) !important; } /* ---- Featured Collection Section Title ---- */ .featured-collection h2, .collection-list h2, [class*="featured"] h2, section h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } /* ---- "View all" link styling ---- */ .view-all, [class*="view-all"], a[href*="/collections"] { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.8rem !important; color: var(--noa-body) !important; text-decoration: none !important; border-bottom: 1px solid var(--noa-border) !important; padding-bottom: 2px !important; transition: border-color 0.3s ease !important; } /* ---- Newsletter / Email Section ---- */ .newsletter, [class*="newsletter"], [class*="email-signup"] { background-color: var(--noa-surface) !important; border-top: 1px solid var(--noa-border) !important; padding: 3rem 0 !important; } .newsletter h2, [class*="newsletter"] h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } .newsletter__subheading, [class*="newsletter"] p { font-family: var(--noa-body-font) !important; color: var(--noa-body) !important; } .newsletter input[type="email"], [class*="newsletter"] input[type="email"] { background-color: var(--noa-bg) !important; border: 1px solid var(--noa-border) !important; color: var(--noa-heading) !important; font-family: var(--noa-body-font) !important; } .newsletter button, [class*="newsletter"] button[type="submit"] { background-color: transparent !important; border: 2px solid var(--noa-heading) !important; color: var(--noa-heading) !important; font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* ---- Footer ---- */ .footer, footer, [class*="footer"] { background-color: var(--noa-bg) !important; border-top: 1px solid var(--noa-border) !important; color: var(--noa-body) !important; font-family: var(--noa-body-font) !important; } .footer h3, footer h3, .footer__heading { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--noa-heading) !important; font-weight: 600 !important; } .footer a, footer a { color: var(--noa-body) !important; transition: color 0.3s ease !important; } .footer a:hover, footer a:hover { color: var(--noa-heading) !important; } /* ---- Announcement Bar ---- */ .announcement-bar, [class*="announcement"] { background-color: var(--noa-surface) !important; color: var(--noa-body) !important; font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.75rem !important; } /* ---- 404 Page ---- */ .template-404 h1, [class*="404"] h1 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; color: var(--noa-heading) !important; } /* ---- Global Link Styling ---- */ a { color: var(--noa-body) !important; transition: color 0.2s ease !important; } a:hover { color: var(--noa-heading) !important; } /* ---- Search Page ---- */ .search__heading, [class*="search"] h1 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; color: var(--noa-heading) !important; } .search input[type="search"], [class*="search"] input[type="search"] { background-color: var(--noa-surface) !important; border: 1px solid var(--noa-border) !important; color: var(--noa-heading) !important; font-family: var(--noa-body-font) !important; } /* Phase 5: Homepage Refinement */ .banner__heading, .hero__heading, [class*="banner"] h1, [class*="hero"] h1 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } .banner__text, .hero__text, [class*="banner"] .banner__text, [class*="hero"] p { font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 400 !important; color: var(--noa-body) !important; font-size: 1.1rem !important; } .banner__buttons .button, .hero__buttons .button, [class*="banner"] .button--primary { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; border: 2px solid var(--noa-heading) !important; background-color: transparent !important; color: var(--noa-heading) !important; padding: 12px 32px !important; transition: all 0.3s ease !important; } .banner__buttons .button:hover, .hero__buttons .button:hover { background-color: var(--noa-heading) !important; color: var(--noa-bg) !important; } .featured-collection h2, .collection-list h2, [class*="featured"] h2, section h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } .newsletter, [class*="newsletter"], [class*="email-signup"] { background-color: var(--noa-surface) !important; border-top: 1px solid var(--noa-border) !important; } .newsletter h2, [class*="newsletter"] h2 { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; color: var(--noa-heading) !important; } .newsletter input[type="email"], [class*="newsletter"] input[type="email"] { background-color: var(--noa-bg) !important; border: 1px solid var(--noa-border) !important; color: var(--noa-heading) !important; font-family: var(--noa-body-font) !important; } .footer, footer, [class*="footer"] { background-color: var(--noa-bg) !important; border-top: 1px solid var(--noa-border) !important; color: var(--noa-body) !important; font-family: var(--noa-body-font) !important; } .footer h3, footer h3, .footer__heading { font-family: var(--noa-heading-font) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--noa-heading) !important; font-weight: 600 !important; } .footer a, footer a { color: var(--noa-body) !important; transition: color 0.3s ease !important; } .footer a:hover, footer a:hover { color: var(--noa-heading) !important; } .announcement-bar, [class*="announcement"] { background-color: var(--noa-surface) !important; color: var(--noa-body) !important; font-family: var(--noa-body-font) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: /* FIX: Remove mix-blend-mode that makes product images invisible on dark backgrounds */ .product__media img, .product-media-grid img, .product__media-item img, [class*="product-media"] img { mix-blend-mode: normal !important; } img { mix-blend-mode: normal !important; }