/** Shopify CDN: Minification failed Line 254:209 Unexpected "}" Line 316:180 Unexpected "}" **/ /* STATIC SUPPLY CO — Brand CSS v1.0 */ /* Void Black / Tape White / Signal Neon */ /* Fonts: Bebas Neue / Space Mono / Permanent Marker */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Permanent+Marker&display=swap'); :root { --ssc-black: #0a0a0a; --ssc-white: #f0ede8; --ssc-neon: #39ff14; --ssc-orange: #ff6b2b; --ssc-gray: #2a2a2a; --ssc-mid-gray: #888; } /* Base */ body, html { background-color: var(--ssc-black) !important; color: var(--ssc-white) !important; font-family: 'Space Mono', monospace !important; } /* VHS Scanlines */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px); pointer-events: none; z-index: 9999; } /* Typography */ h1, h2, h3, h4, h5, h6, .heading, [class*="heading"], [class*="title"] { font-family: 'Bebas Neue', sans-serif !important; color: var(--ssc-white) !important; letter-spacing: 2px !important; } p, span, div, li, a, label, input, textarea, button { font-family: 'Space Mono', monospace !important; } /* Header */ .header, header, .site-header, [class*="header"], .shopify-section-header { background-color: var(--ssc-black) !important; border-bottom: 1px solid var(--ssc-gray) !important; } .header a, header a, [class*="header"] a { color: var(--ssc-white) !important; font-family: 'Space Mono', monospace !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; text-decoration: none !important; } .header a:hover, header a:hover { color: var(--ssc-neon) !important; } .header__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: 28px !important; letter-spacing: 4px !important; } /* Buttons */ .btn, button, .button, [class*="btn"], input[type="submit"] { background-color: var(--ssc-neon) !important; color: var(--ssc-black) !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 16px !important; letter-spacing: 3px !important; border: 1px solid var(--ssc-neon) !important; border-radius: 0 !important; transition: all 0.3s ease !important; } .btn:hover, button:hover, .button:hover { background-color: transparent !important; color: var(--ssc-neon) !important; } /* Cards / Products */ .card, .product-card, [class*="card"], .grid__item { background-color: var(--ssc-gray) !important; border: 1px solid #333 !important; color: var(--ssc-white) !important; } .card:hover, [class*="card"]:hover { border-color: var(--ssc-neon) !important; } .card__heading, .card__title, [class*="card__heading"], [class*="card__title"] { font-family: 'Bebas Neue', sans-serif !important; color: var(--ssc-white) !important; letter-spacing: 2px !important; } .price, [class*="price"] { color: var(--ssc-neon) !important; font-family: 'Space Mono', monospace !important; } /* Forms */ input, textarea, select { background-color: var(--ssc-gray) !important; border: 1px solid #444 !important; color: var(--ssc-white) !important; } input:focus, textarea:focus, select:focus { border-color: var(--ssc-neon) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--ssc-mid-gray) !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 10px !important; } /* Footer */ .footer, footer, [class*="footer"] { background-color: var(--ssc-black) !important; border-top: 1px solid var(--ssc-gray) !important; color: var(--ssc-mid-gray) !important; } .footer a, footer a, [class*="footer"] a { color: var(--ssc-mid-gray) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-decoration: none !important; } .footer a:hover, footer a:hover { color: var(--ssc-neon) !important; } [class*="footer__logo"], [class*="footer__heading"] { font-family: 'Bebas Neue', sans-serif !important; color: var(--ssc-white) !important; letter-spacing: 4px !important; } /* Dividers */ hr, .divider, [class*="divider"] { border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--ssc-neon), transparent) !important; opacity: 0.3 !important; } /* Badges */ .badge, .tag, [class*="badge"], .product__badge { background-color: var(--ssc-orange) !important; color: var(--ssc-black) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; } /* Announcement Bar */ .announcement-bar, [class*="announcement"] { background-color: var(--ssc-orange) !important; color: var(--ssc-black) !important; font-size: 11px !important; letter-spacing: 3px !important; text-transform: uppercase !important; } /* Cart */ .cart, .cart-drawer, [class*="cart"] { background-color: var(--ssc-black) !important; color: var(--ssc-white) !important; } /* Section headings */ .section__heading, [class*="section-header"] { font-family: 'Bebas Neue', sans-serif !important; color: var(--ssc-white) !important; letter-spacing: 4px !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; background: var(--ssc-black); } ::-webkit-scrollbar-thumb { background: var(--ssc-gray); } ::-webkit-scrollbar-thumb:hover { background: var(--ssc-neon); } /* Selection */ ::selection { background: var(--ssc-neon); color: var(--ssc-black); } /* Neon glow utility */ .ssc-neon { color: var(--ssc-neon) !important; } .ssc-orange { color: var(--ssc-orange) !important; } /* Fix: RTE description text — Tape White */ .rte, .rte p, .rte li, .rte ul, .rte ol, .rte span, .rte strong, .rte em, .rte a, .text-block, [class*="text-block"], .product__description, [class*="product__description"] { color: #f0ede8 !important; } /* Fix: Zoom/unstyled buttons — transparent */ .button-unstyled, [class*="zoom-button"], [class*="button-unstyled"] { background-color: transparent !important; border: none !important; color: inherit !important; } /* Fix: Product media — dark background */ .product-media-container, [class*="product-media"] { background-color: #1a1a1a !important; }/* Fix: Email input overlapping subscribe button */ /* Fix: Email signup form — input overlapping button */ .email-signup__input-group { overflow: hidden; } .email-signup__input { background: transparent !important; border: none !important; color: #0a0a0a !important; padding-right: 56px !important; box-sizing: border-box !important; } .email-signup__input::placeholder { color: #555 !important; } .email-signup__button { background: #39FF14 !important; border-radius: 100px !important; color: #0a0a0a !important; margin: 6px !important; flex-shrink: 0 !important; } } /* ============================================= Mobile optimizations (max 768px) ============================================= */ @media (max-width: 768px) { /* Prevent hero from overflowing horizontally */ body, html { overflow-x: hidden; } /* Scale hero image/media to fit screen */ .section--hero, [class*="hero"], .hero { max-width: 100vw; overflow: hidden; } /* Scale down hero text so it doesn't clip */ .hero__title, [class*="hero__title"], [class*="hero-title"] { font-size: clamp(2rem, 10vw, 5rem) !important; line-height: 1.1 !important; white-space: normal !important; word-break: break-word !important; } /* Email signup — stack label above input on small screens */ .email-signup__form { flex-direction: column; gap: 16px; } .email-signup__form > * { width: 100% !important; } .email-signup__input-group { width: 100% !important; } /* Product cards — comfortable tap targets */ .card__heading a, .card-information a { font-size: 0.9rem !important; } /* Announcement bar — readable on small screen */ .announcement-bar__message { font-size: 0.75rem !important; } /* Hero — contain full logo on mobile, no cropping */ .hero__media { object-fit: contain !important; background-color: #0a0a0a !important; } } }