/** Shopify CDN: Minification failed Line 22:23 Expected ":" **/ /* ============================================================ WAVVY — SHOPIFY QUICK-WIN OVERRIDES Paste this at the very BOTTOM of your theme's main stylesheet (Online Store → Themes → ⋯ → Edit code → assets/base.css for Dawn-based themes, or assets/theme.css / theme.scss.liquid on others). It loads under everything else so it wins. These are intentionally broad + use !important because theme class names vary. If something doesn't change, right-click it in your browser → Inspect → read the real class name → add it to the matching group below. That's the whole skill. ============================================================ */ :root{ --wavvy-black:#0C0C0C; --wavvy-white:#FFFFFF; --wavvy-off:#ECF0F1;w --wavvy-acid:#F8F806; /* signature electric yellow */ --wavvy-red:#FE3921; --wavvy-cyan:#8DD5E8; --wavvy-pink:#FA8072; } /* ---- 1. HARD EDGES: kill rounded corners site-wide (very on-brand) ---- */ *{ border-radius:0 !important; } /* ---- 2. TYPE: Geist for everything, Geist Mono for labels/prices ---- * (the that loads these fonts goes in theme.liquid — see the .md guide) */ body, p, li, .rte, input, select, textarea, button{ font-family:"Geist Mono", ui-monospace, monospace !important; } h1,h2,h3,h4,.h0,.h1,.h2,.h3, .product__title, .card__heading, .collection__title, .title{ font-family:"Geist", sans-serif !important; font-weight:900 !important; letter-spacing:-.02em !important; text-transform:uppercase; } /* mono treatment for the "dossier" bits */ .price, [class*="price"], .product-meta, .caption-with-letter-spacing, .label, .badge, time, .card-information .caption{ font-family:"Geist Mono", ui-monospace, monospace !important; letter-spacing:.04em; } /* ---- 3. COLOR: dark base + white text (reinforces the color scheme you'll set in Settings → Colors — see guide) ---- */ body{ background:var(--wavvy-black) !important; color:var(--wavvy-white) !important; } a:hover{ color:var(--wavvy-acid) !important; } /* ---- 4. BUTTONS → acid yellow block ---- */ .button, button.button, .btn, .shopify-payment-button__button--unbranded, .product-form__submit, [type="submit"].button{ background:var(--wavvy-acid) !important; color:var(--wavvy-black) !important; border:none !important; font-family:"Geist Mono", monospace !important; text-transform:uppercase; letter-spacing:.1em; font-weight:700; } .button:hover{ background:var(--wavvy-white) !important; } /* outline / secondary buttons */ .button--secondary{ background:transparent !important; color:var(--wavvy-white) !important; border:1px solid var(--wavvy-white) !important; } /* ---- 5. ANNOUNCEMENT BAR → yellow mono strip ---- */ .announcement-bar, [class*="announcement"]{ background:var(--wavvy-acid) !important; color:var(--wavvy-black) !important; } .announcement-bar *{ font-family:"Geist Mono", monospace !important; text-transform:uppercase; letter-spacing:.14em; font-size:13px; /* px, not rem — immune to Dawn's 62.5% root */ } /* ---- 6. PRODUCT CARDS → bordered, uppercase, mono price ---- */ .card, .card-wrapper, .product-card{ border:1px solid var(--wavvy-black); } .card__heading, .full-unstyled-link{ text-transform:uppercase !important; font-weight:800 !important; letter-spacing:-.01em !important; } /* inset the title + price so they don't hug the card border */ .card-wrapper .card__content{ padding:14px 16px 16px !important; } .card-wrapper .card__information{ padding:0 !important; } .card-wrapper .card-information{ padding:0 !important; } /* product card title/price hover → grey instead of the global acid yellow */ .card-wrapper a:hover, .card__heading a:hover, .card__heading:hover, .card-information a:hover, .full-unstyled-link:hover, .card-wrapper .price:hover{ color:#808080 !important; } /* ---- 7. FORM FIELDS → dark ---- */ input, select, textarea, .field__input{ background:#161616 !important; color:#fff !important; border:1px solid #2a2a2a !important; } input:focus, .field__input:focus{ border-color:var(--wavvy-acid) !important; } /* ---- 8. HEADER NAV → clean white-stroke boxes (black bg, white text) ---- * Fixes Dawn's chunky 4px-border nav. Targets the desktop inline menu only; the mobile hamburger drawer keeps its normal styling. */ .header__inline-menu .list-menu{ display:flex !important; gap:10px !important; align-items:center; flex-wrap:wrap; } .header__inline-menu .list-menu__item{ margin:0 !important; width:auto !important; flex:0 0 auto !important; } .header__menu-item{ display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; width:auto !important; min-width:0 !important; flex:0 0 auto !important; white-space:nowrap !important; box-sizing:border-box !important; border:1px solid #fff !important; background:#000 !important; color:#fff !important; padding:7px 18px !important; /* matches wavvy.supply */ border-radius:0 !important; font-family:"Geist Mono", monospace !important; font-size:10px !important; /* matches wavvy.supply */ font-weight:700 !important; letter-spacing:1.4px !important; /* matches wavvy.supply */ text-transform:uppercase !important; text-decoration:none !important; line-height:1 !important; /* hugs the caps so they sit centered */ transition:.18s; } /* Dawn underlines the inner text span on hover — turn that off */ .header__menu-item span{ text-decoration:none !important; background-image:none !important; width:auto !important; text-align:center !important; line-height:1 !important; display:block; } .header__menu-item:hover{ background:var(--wavvy-acid) !important; border-color:var(--wavvy-acid) !important; color:#000 !important; } /* ---- 9. HEADER ICONS → white (Dawn renders search/account/cart black, which disappears on the black bar) ---- */ .header__icons a, .header__icon, .header__icons .svg-wrapper{ color:#fff !important; } .header__icons svg, .header__icon svg{ color:#fff !important; } .header__icons svg path{ fill:#fff !important; } .header__icons .cart-count-bubble{ background:var(--wavvy-acid) !important; } .header__icons .cart-count-bubble *{ color:#000 !important; } /* mobile hamburger + close icon → white (it's outside .header__icons) */ .header__icon--menu, .header__icon--menu svg{ color:#fff !important; } .header__icon--menu .icon, .header__icon--menu svg path, .header__icon--menu svg line, .header__icon--menu svg rect{ stroke:#fff !important; fill:#fff !important; } /* ===== PRODUCT PAGE: ADD TO CART — force acid fill so it's visible/clickable ===== */ .product-form .product-form__submit, .product__info-container .product-form__submit, .product-form__submit.button{ background:#F8F806 !important; /* atomic yellow fill */ color:#0C0C0C !important; /* black label */ border:0 !important; box-shadow:none !important; min-height:52px !important; } .product-form .product-form__submit span, .product__info-container .product-form__submit span{color:#0C0C0C !important;} .product-form__submit::after{display:none !important;} /* kill Dawn's invisible outline overlay */ .product-form .product-form__submit:hover, .product__info-container .product-form__submit:hover{background:#FFFFFF !important;color:#0C0C0C !important;} /* ===== PRODUCT PAGE: ADD TO CART — acid fill, sized 15% smaller ===== */ .product-form .product-form__submit, .product__info-container .product-form__submit, .product-form__submit.button{ background:#F8F806 !important; color:#0C0C0C !important; border:0 !important; box-shadow:none !important; min-height:44px !important; height:44px !important; width:85% !important; font-size:13px !important; } .product-form .product-form__submit span, .product__info-container .product-form__submit span{color:#0C0C0C !important;} .product-form__submit::after{display:none !important;} .product-form .product-form__submit:hover, .product__info-container .product-form__submit:hover{background:#FFFFFF !important;color:#0C0C0C !important;} /* ===== PRODUCT PAGE: bigger size pills (S M L XL 2XL) — all screen sizes ===== */ .product-form__input--pill input[type=radio] + label, .product-form__input label{ min-width:60px !important; min-height:54px !important; padding:14px 20px !important; font-size:15px !important; letter-spacing:.04em !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .product-form__input--pill{ gap:10px !important; } /* ===== CART POP-UP (cart notification) — legible + text fits inside buttons ===== */ .cart-notification .button--primary{ background:#F8F806 !important; color:#0C0C0C !important; border:0 !important; } .cart-notification .button--primary::after{display:none !important;} .cart-notification .button--primary span{color:#0C0C0C !important;} .cart-notification .button-label, .cart-notification button.link{color:#FFFFFF !important;opacity:1 !important;} .cart-notification .button-label:hover{color:#F8F806 !important;} .cart-notification .button--secondary{color:#FFFFFF !important;border-color:#FFFFFF !important;} .cart-notification .button--primary, .cart-notification .button--secondary{ font-size:11px !important; /* smaller so text fits */ letter-spacing:.05em !important; padding:13px 12px !important; /* breathing room inside the box */ white-space:nowrap !important; /* keep each on one line */ } .cart-notification .button--secondary:hover, .cart-notification .button--secondary:hover *{color:#0C0C0C !important;} /* ===== COLLECTION GRID: Sort dropdown — light, legible, down-chevron on the left ===== */ .wavvy-coll .wavvy-coll__sort{ background-color:#FFFFFF !important; color:#0C0C0C !important; border:1px solid #0C0C0C !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:left 12px center !important; padding:8px 14px 8px 32px !important; } .wavvy-coll .wavvy-coll__sort option{ color:#0C0C0C !important; background:#FFFFFF !important; } /* ===== PRODUCT PAGE: bigger main title ===== */ .product__title, .product__title h1, .product__info-container h1{ font-size:clamp(28px,3.4vw,40px) !important; line-height:1.02 !important; letter-spacing:-.01em !important; } /* ===== PRODUCT GALLERY: bordered main image + thumbs, acid highlight on selected ===== */ .product__media-wrapper .product__media, .product__media-item .product__media{ border:1px solid #43484d !important; } .thumbnail{ border:1px solid #43484d !important; } .thumbnail[aria-current]{ border-color:#F8F806 !important; box-shadow:0 0 0 1px #F8F806 !important; } /* ===== PRODUCT PAGE: bolder, slightly bigger price ===== */ .product__info-container .price .price-item, .product__info-container .price__regular .price-item, .product__info-container .price-item--regular, .product__info-container .price-item--sale{ font-size:18px !important; font-weight:700 !important; letter-spacing:.02em !important; } /* ===== HEADER NAV: hover = yellow bg, black border, black text ===== */ .header__menu-item{ transition:background .15s, color .15s, border-color .15s !important; } .header__menu-item:hover, .header__menu-item:focus{ background:#F8F806 !important; border-color:#0C0C0C !important; color:#0C0C0C !important; } .header__menu-item:hover *, .header__menu-item:focus *{ color:#0C0C0C !important; }