/* ============================================ PRO CUSTOM — Apple × Nike Hybrid High-performance, zero-jank stylesheet ============================================ */ /* ---- FONTS ---- */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter: wght@300;400;500;600;700&display=swap'); /* ---- ROOT TOKENS ---- */ :root { --c-bg: #ffffff; --c-surface: #f5f5f7; --c-ink: #1d1d1f; --c-ink-muted: #6e6e73; --c-accent: #111111; --c-accent-hover: #333333; --c-border: rgba(0,0,0,0.08); --c-white: #ffffff; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --f-display: 'Bebas Neue', 'Arial Black', sans-serif; --radius-card: 16px; --radius-btn: 980px; --shadow-card: 0 2px 20px rgba(0,0,0,0.06); --shadow-card-hover: 0 8px 40px rgba(0,0,0,0.12); --transition-fast: 0.15s ease; --transition-mid: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ---- RESET & BASE ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; text-rendering: optimizeLegibility; } body { font-family: var(--f-body); background: var(--c-bg); color: var(--c-ink); font-size: 16px; line-height: 1.6; margin: 0; } /* ---- TYPOGRAPHY ---- */ h1, h2, h3, h4 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95; color: var(--c-ink); margin: 0 0 0.5em; } h1 { font-size: clamp(3.5rem, 9vw, 8rem); } h2 { font-size: clamp(2.2rem, 5vw, 5rem); } h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); } h4 { font-size: clamp(1rem, 2vw, 1.4rem); } p { font-size: clamp(0.95rem, 1.5vw, 1.1rem); color: var(--c-ink-muted); font-weight: 400; line-height: 1.65; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* ---- HEADER / NAV ---- */ .header, header, #shopify-section-header { background: rgba(255,255,255,0.88) !important; backdrop-filter: saturate(200%) blur(24px); -webkit-backdrop-filter: saturate(200%) blur(24px); border-bottom: 1px solid var(--c-border) !important; position: sticky !important; top: 0; z-index: 999; transition: background var(--transition-fast); } .header__inner, .header-wrapper, .header__row { max-width: 1400px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; } /* Logo */ .header__logo, .header__heading, .site-header__logo { font-family: var(--f-display) !important; font-size: 1.6rem !important; letter-spacing: 0.06em !important; color: var(--c-ink) !important; text-transform: uppercase !important; } .header__logo img { height: 36px; width: auto; } /* Nav links */ .header__nav a, .nav-link, .header__menu-item, .site-nav__link, .list-menu__item a { font-family: var(--f-body) !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--c-ink) !important; padding: 6px 14px !important; border-radius: 6px; transition: background var(--transition-fast), color var(--transition-fast) !important; } .header__nav a:hover, .nav-link:hover, .list-menu__item a:hover { background: var(--c-surface) !important; color: var(--c-ink) !important; } /* Cart icon */ .header__cart, .site-header__cart { position: relative; } /* ---- HERO / BANNER ---- */ .hero, .banner, .slideshow, .section-hero, [class*="banner"], [class*="hero"] { min-height: 85vh; position: relative; overflow: hidden; display: flex; align-items: flex-end; } .banner__media img, .hero__media img, .slideshow__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .banner:hover .banner__media img { transform: scale(1.03); } .banner__overlay, .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 40%, transparent 70% ); z-index: 1; } .banner__content, .hero__content, .slideshow__text-wrapper { position: relative; z-index: 2; padding: 60px 64px; max-width: 800px; } .banner__content h1, .banner__content h2, .hero__content h1, .slideshow__heading { color: #fff !important; text-shadow: 0 2px 40px rgba(0,0,0,0.3); margin-bottom: 20px; } .banner__content p, .hero__content p, .slideshow__subtext { color: rgba(255,255,255,0.85) !important; font-size: 1.1rem; margin-bottom: 32px; max-width: 480px; } /* ---- BUTTONS ---- */ .btn, .button, [class*="button--primary"], .shopify-payment-button__button--unbranded, input[type="submit"], button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--c-ink) !important; color: var(--c-white) !important; border: 2px solid var(--c-ink) !important; border-radius: var(--radius-btn) !important; padding: 14px 32px !important; font-family: var(--f-body) !important; font-size: 0.88rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; cursor: pointer; transition: all var(--transition-fast) !important; white-space: nowrap; text-decoration: none !important; } .btn:hover, .button:hover, [class*="button--primary"]:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: transparent !important; color: var(--c-ink) !important; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important; } /* Secondary/ghost button */ [class*="button--secondary"], .btn--secondary { background: transparent !important; color: var(--c-ink) !important; border: 2px solid var(--c-ink) !important; } [class*="button--secondary"]:hover { background: var(--c-ink) !important; color: #fff !important; } /* White variant (on dark backgrounds) */ .banner__content .btn, .banner__content .button, .hero__content .btn { background: #fff !important; color: var(--c-ink) !important; border-color: #fff !important; } .banner__content .btn:hover { background: transparent !important; color: #fff !important; } /* ---- PRODUCT GRID ---- */ .collection, .product-grid, .grid--products, .products-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 28px !important; padding: 0 !important; } /* ---- PRODUCT CARDS ---- */ .card-wrapper, .product-card, .card, .grid__item { border: none !important; border-radius: var(--radius-card) !important; overflow: hidden !important; background: var(--c-surface) !important; box-shadow: var(--shadow-card) !important; transition: transform var(--transition-mid), box-shadow var(--transition-mid) !important; cursor: pointer; } .card-wrapper:hover, .product-card:hover, .card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-card-hover) !important; } /* Card image */ .card__media, .card-media, .product-card__image-wrapper { aspect-ratio: 1 / 1 !important; overflow: hidden !important; background: #e8e8ed !important; } .card__media img, .card-media img, .product-card__image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } .card-wrapper:hover .card__media img, .product-card:hover img { transform: scale(1.06) !important; } /* Card body */ .card__content, .card-information, .product-card__info { padding: 20px !important; background: var(--c-surface) !important; } .card__heading, .card-information__title, .product-card__title { font-family: var(--f-display) !important; font-size: 1.25rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--c-ink) !important; margin: 0 0 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .price, .product-price, .card-information__price { font-family: var(--f-body) !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--c-ink) !important; } .price--on-sale .price__regular, .price s { color: var(--c-ink-muted) !important; font-weight: 400 !important; } /* Sale badge */ .badge--sale, .card__badge { background: #ff3b30 !important; color: #fff !important; font-family: var(--f-body) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 4px !important; } /* ---- SECTION LAYOUT ---- */ .section, .shopify-section > div, [class*="section-"] { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* Section padding rhythm */ .section-padding, .section { padding-top: 80px; padding-bottom: 80px; } .section__header { text-align: center; margin-bottom: 56px; } .section__header h2 { margin-bottom: 16px; } /* ---- FEATURED COLLECTION ---- */ .featured-collection, #shopify-section-featured-collection { background: var(--c-bg); } /* ---- RICH TEXT / PROMO BLOCKS ---- */ .rich-text, .content-block, .promo-block { text-align: center; padding: 100px 40px; background: var(--c-surface); border-radius: 24px; margin: 40px 0; } .rich-text h2 { margin-bottom: 20px; } .rich-text p { max-width: 600px; margin: 0 auto 32px; } /* ---- MARQUEE / ANNOUNCEMENT BAR ---- */ .announcement-bar, .announcement-bar__message { background: var(--c-ink) !important; color: #fff !important; font-family: var(--f-body) !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; padding: 10px 0 !important; text-align: center !important; } /* ---- PRODUCT PAGE ---- */ .product, .product-section, .product__media-wrapper, #shopify-section-main-product { max-width: 1400px; margin: 0 auto; padding: 40px 32px; } .product__media-gallery, .product-media-container { display: grid; gap: 12px; } /* Main product image */ .product__media, .product-media { border-radius: 20px !important; overflow: hidden !important; background: var(--c-surface) !important; aspect-ratio: 1 / 1; } .product__media img, .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--transition-mid); } .product__media:hover img { transform: scale(1.04); } /* Product thumbnails */ .product__thumbnails, .product-thumbnails, .thumbnail-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .thumbnail-list__item, .product__thumbnail { width: 80px; height: 80px; border-radius: 10px !important; overflow: hidden !important; cursor: pointer; border: 2px solid transparent !important; transition: border-color var(--transition-fast), transform var(--transition-fast) !important; } .thumbnail-list__item:hover, .thumbnail-list__item.active, .product__thumbnail--active { border-color: var(--c-ink) !important; transform: scale(1.05); } /* Product info column */ .product__info-wrapper, .product__info, .product-info { padding: 0 0 0 48px; } /* Product title */ .product__title, .product-single__title, h1.product__title { font-family: var(--f-display) !important; font-size: clamp(2.5rem, 5vw, 4.5rem) !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; line-height: 0.95 !important; color: var(--c-ink) !important; margin-bottom: 16px !important; } /* Product price */ .product__price, .product-single__price, .price-item { font-family: var(--f-body) !important; font-size: 1.5rem !important; font-weight: 700 !important; color: var(--c-ink) !important; } /* Product description */ .product__description, .product-single__description, .rte { font-size: 0.98rem !important; color: var(--c-ink-muted) !important; line-height: 1.7 !important; margin: 24px 0 !important; } /* Variant selectors */ .product-form__input, .variant-input-wrap, .swatch-wrapper { margin-bottom: 20px; } .product-form__input label, .variant-label { font-family: var(--f-body) !important; font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--c-ink) !important; display: block; margin-bottom: 10px; } /* Swatch buttons */ .swatch, .variant-input, .color-swatch { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer !important; transition: transform var(--transition-fast), border-color var(--transition-fast) !important; margin: 0 6px 6px 0 !important; } .swatch:hover { transform: scale(1.1) !important; } .swatch.active, .swatch[aria-checked="true"] { border-color: var(--c-ink) !important; box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-ink) !important; } /* Size buttons */ .variant-input--size button, .size-swatch, [data-option-type="size"] .product-form__radio + label { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 52px !important; height: 44px !important; padding: 0 14px !important; border-radius: 8px !important; border: 1.5px solid var(--c-border) !important; font-size: 0.85rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all var(--transition-fast) !important; margin: 0 6px 6px 0 !important; background: transparent !important; } .variant-input--size button:hover, [data-option-type="size"] .product-form__radio:checked + label { background: var(--c-ink) !important; color: #fff !important; border-color: var(--c-ink) !important; } /* Add to cart */ .product-form__submit, .product-form .btn, .add-to-cart, [name="add"] { width: 100% !important; height: 56px !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: var(--radius-btn) !important; background: var(--c-ink) !important; color: #fff !important; border: 2px solid var(--c-ink) !important; transition: all 0.2s ease !important; margin-top: 8px !important; } .product-form__submit:hover, [name="add"]:hover { background: transparent !important; color: var(--c-ink) !important; } /* Buy now */ .shopify-payment-button__button { border-radius: var(--radius-btn) !important; font-family: var(--f-body) !important; font-weight: 700 !important; font-size: 1rem !important; height: 56px !important; margin-top: 12px !important; } /* Trust badges / product meta */ .product__meta, .product-badges { display: flex; align-items: center; gap: 16px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); font-size: 0.8rem; color: var(--c-ink-muted); font-weight: 500; } /* ---- STICKY ADD TO CART ---- */ .sticky-atc { position: fixed; bottom: -80px; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--c-border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; z-index: 998; transition: bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sticky-atc.visible { bottom: 0; } .sticky-atc__info { flex: 1; } .sticky-atc__title { font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; } .sticky-atc__price { font-weight: 700; font-size: 1rem; } .sticky-atc__btn { min-width: 200px; height: 48px; background: var(--c-ink); color: #fff; border: none; border-radius: var(--radius-btn); font-family: var(--f-body); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background var(--transition-fast); } .sticky-atc__btn:hover { background: #333; } /* ---- FOOTER ---- */ footer, .footer, #shopify-section-footer { background: var(--c-ink) !important; color: rgba(255,255,255,0.6) !important; padding: 80px 0 40px !important; margin-top: 100px; } .footer__content, .footer-block { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; } .footer__heading, .footer-block__heading { font-family: var(--f-display) !important; font-size: 1rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: #fff !important; margin-bottom: 20px !important; } .footer__list a, .footer-block__list a, .footer a { font-size: 0.85rem !important; color: rgba(255,255,255,0.55) !important; text-decoration: none !important; transition: color var(--transition-fast) !important; display: block; margin-bottom: 10px; } .footer a:hover { color: #fff !important; } .footer__bottom { max-width: 1400px; margin: 60px auto 0; padding: 24px 32px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: rgba(255,255,255,0.35); } /* ---- BREADCRUMBS ---- */ .breadcrumbs, .breadcrumb { font-size: 0.8rem; color: var(--c-ink-muted); margin-bottom: 24px; } .breadcrumbs a { color: var(--c-ink-muted); transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--c-ink); } /* ---- SCROLL ANIMATIONS ---- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in-view { opacity: 1; transform: none; } /* ---- PAGE TRANSITION ---- */ .page-fade { animation: pageFadeIn 0.4s ease forwards; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- LOADING SKELETON ---- */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---- CART ---- */ .cart-item, .cart-items .cart-item { padding: 24px 0; border-bottom: 1px solid var(--c-border); } .cart-item__title { font-family: var(--f-display) !important; font-size: 1.1rem !important; text-transform: uppercase !important; } .cart-subtotal, .cart__footer { font-family: var(--f-display); font-size: 1.5rem; text-transform: uppercase; } /* ---- RESPONSIVE ---- */ @media (max-width: 1024px) { .footer__content { grid-template-columns: 1fr 1fr; gap: 32px; } .product__info-wrapper { padding-left: 32px; } } @media (max-width: 768px) { :root { --radius-card: 12px; } .header__inner { padding: 0 20px; height: 56px; } .banner__content { padding: 40px 24px; } h1 { font-size: clamp(2.8rem, 12vw, 5rem); } h2 { font-size: clamp(2rem, 8vw, 3.5rem); } .section { padding: 60px 20px; } .collection { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } .product, #shopify-section-main-product { padding: 24px 20px; } .product__info-wrapper { padding-left: 0; margin-top: 32px; } .footer__content { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; gap: 12px; text-align: center; } .sticky-atc { padding: 12px 20px; } .sticky-atc__info { display: none; } .sticky-atc__btn { min-width: unset; flex: 1; } } @media (max-width: 480px) { .collection { grid-template-columns: 1fr !important; } } --- File 2 — assets/pro-custom.js Add a new asset → blank file → pro-custom.js: /* ============================================ PRO CUSTOM JS Scroll animations, sticky ATC, perf boosts ============================================ */ (function() { 'use strict'; // ---- Page fade-in ---- document.body.classList.add('page-fade'); // ---- Scroll reveal ---- const revealObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); revealObserver.unobserve(entry.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); function initReveal() { const targets = document.querySelectorAll( '.card-wrapper, .product-card, .card, .rich-text, .banner, .section__header, .featured-collection' ); targets.forEach((el, i) => { el.classList.add('reveal'); el.style.transitionDelay = `${(i % 4) * 80}ms`; revealObserver.observe(el); }); } // ---- Sticky Add to Cart ---- function initStickyATC() { const productForm = document.querySelector('.product-form, form[action="/cart/add"]'); const addBtn = document.querySelector('.product-form__submit, [name="add"]'); const titleEl = document.querySelector('.product__title, .product-single__title, h1.product__title'); const priceEl = document.querySelector('.product__price .price-item--regular, .price-item--regular'); if (!productForm || !addBtn) return; // Build sticky bar const bar = document.createElement('div'); bar.className = 'sticky-atc'; bar.innerHTML = `
${titleEl ? titleEl.textContent.trim() : ''}
${priceEl ? priceEl.textContent.trim() : ''}
Add to Cart
`; document.body.appendChild(bar); // Wire button to original form submit bar.querySelector('.sticky-atc__btn').addEventListener('click', () => { addBtn.click(); }); // Show/hide based on original button visibility const atcObserver = new IntersectionObserver((entries) => { bar.classList.toggle('visible', !entries[0].isIntersecting); }, { threshold: 0 }); atcObserver.observe(addBtn); } // ---- Smooth image zoom on product page ---- function initProductImageZoom() { const mainImage = document.querySelector('.product__media img, .product-media img'); if (!mainImage) return; const wrapper = mainImage.closest('.product__media, .product-media'); if (!wrapper) return; wrapper.style.cursor = 'zoom-in'; wrapper.addEventListener('mousemove', (e) => { const rect = wrapper.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; mainImage.style.transformOrigin = `${x}% ${y}%`; mainImage.style.transform = 'scale(1.6)'; mainImage.style.transition = 'transform 0s'; }); wrapper.addEventListener('mouseleave', () => { mainImage.style.transform = 'scale(1)'; mainImage.style.transition = 'transform 0.4s ease'; mainImage.style.transformOrigin = 'center center'; }); } // ---- Lazy load images (native fallback) ---- function initLazyLoad() { document.querySelectorAll('img:not([loading])').forEach(img => { img.setAttribute('loading', 'lazy'); img.setAttribute('decoding', 'async'); }); } // ---- Prefetch on hover ---- function initPrefetch() { const prefetched = new Set(); document.addEventListener('mouseover', (e) => { const link = e.target.closest('a[href]'); if (!link) return; const href = link.href; if (!href || href.startsWith('#') || prefetched.has(href)) return; if (!href.includes(window.location.hostname)) return; const el = document.createElement('link'); el.rel = 'prefetch'; el.href = href; document.head.appendChild(el); prefetched.add(href); }, { passive: true }); } // ---- Header scroll effect ---- function initHeaderScroll() { const header = document.querySelector('.header, header, #shopify-section-header'); if (!header) return; let lastY = 0; window.addEventListener('scroll', () => { const y = window.scrollY; if (y > 80) { header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.08)'; } else { header.style.boxShadow = 'none'; } lastY = y; }, { passive: true }); } // ---- Quantity input stepper ---- function initQuantityStepper() { const qtyInput = document.querySelector('.quantity__input, input[name="quantity"]'); if (!qtyInput) return; const wrapper = qtyInput.parentElement; wrapper.style.cssText = ` display: flex; align-items: center; gap: 0; border: 1.5px solid #e0e0e0; border-radius: 980px; overflow: hidden; width: fit-content; margin-bottom: 16px; `; // Style buttons wrapper.querySelectorAll('button').forEach(btn => { btn.style.cssText = ` width: 40px; height: 44px; border: none; background: transparent; font-size: 1.2rem; cursor: pointer; font-weight: 500; transition: background 0.15s; `; }); qtyInput.style.cssText = ` width: 48px; text-align: center; border: none; font-family: inherit; font-size: 1rem; font-weight: 600; `; } // ---- Init all ---- function init() { initReveal(); initLazyLoad(); initPrefetch(); initHeaderScroll(); // Product page only if (document.querySelector('.product, .product-section')) { initStickyATC(); initProductImageZoom(); initQuantityStepper(); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();
– RECOVR
Opening soon
Sign up for our newsletter to be the first to know when we launch.
Email
Sign up
Enter password
Password
Submit
