/** Shopify CDN: Minification failed Line 27:0 All "@import" rules must come first **/ /* ========================================================= ANOM GAMING — CINEMATIC THEME (CSS) Paste into: Shopify Admin → Edit Code → Assets → Add a new asset → anom-cinematic.css Reference in theme.liquid : {{ 'anom-cinematic.css' | asset_url | stylesheet_tag }} ========================================================= */ :root { --ink: #0a0a0c; --ink-2: #111114; --bone: #e8e6df; --signal: #ff3c00; --cyan: #00e5ff; --rule: rgba(232, 230, 223, 0.08); --rule-strong: rgba(232, 230, 223, 0.22); --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --head: "Orbitron", sans-serif; --body: "Syne", system-ui, sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Syne:wght@400;600;800&family=JetBrains+Mono:wght@400;600&display=swap'); html, body { background: var(--ink); color: var(--bone); font-family: var(--body); } @media (hover: hover) and (pointer: fine) { html, body { cursor: none; } } * { letter-spacing: 0.01em; } h1, h2, h3, .h-mono { font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } .mono, .price, .label, .spec-value, .spec-label { font-family: var(--mono); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } a { color: var(--bone); text-decoration: none; } /* ========================================================== CUSTOM CURSOR ========================================================== */ .anom-cursor-dot, .anom-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); will-change: transform; mix-blend-mode: difference; } .anom-cursor-dot { width: 6px; height: 6px; background: var(--bone); border-radius: 50%; } .anom-cursor-ring { width: 36px; height: 36px; border: 1px solid var(--bone); border-radius: 50%; transition: width .25s, height .25s, border-color .25s, background .25s; } .anom-cursor-ring.hover { width: 56px; height: 56px; border-color: var(--signal); background: rgba(255,60,0,0.08); } .anom-cursor-ring.click { width: 24px; height: 24px; } /* ========================================================== PARTICLE CANVAS + SCANLINE + GRAIN ========================================================== */ #anom-particle-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; } .anom-scanline { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: linear-gradient( to bottom, transparent 0%, rgba(0, 229, 255, 0.04) 49.5%, rgba(0, 229, 255, 0.10) 50%, rgba(0, 229, 255, 0.04) 50.5%, transparent 100% ); background-size: 100% 400%; animation: anom-scan 8s linear infinite; } @keyframes anom-scan { 0% { background-position: 0% -100%; } 100% { background-position: 0% 200%; } } .anom-grain { position: fixed; inset: -50%; pointer-events: none; z-index: 9997; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); animation: anom-grain-shift 0.5s steps(1) infinite; } @keyframes anom-grain-shift { 0% { transform: translate(0, 0); } 10% { transform: translate(-3%, 2%); } 20% { transform: translate(4%, -1%); } 30% { transform: translate(-2%, -4%); } 40% { transform: translate(1%, 3%); } 50% { transform: translate(-4%, 1%); } 60% { transform: translate(2%, -2%); } 70% { transform: translate(-1%, 4%); } 80% { transform: translate(3%, -3%); } 90% { transform: translate(-3%, 0); } 100% { transform: translate(0, 0); } } /* ========================================================== GHOST WATERMARK ========================================================== */ .anom-ghost { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 900; font-size: 30vw; line-height: 1; color: rgba(232, 230, 223, 0.035); letter-spacing: -0.02em; pointer-events: none; user-select: none; z-index: 1; white-space: nowrap; transform: translateY(2vh); } /* ========================================================== NAV ========================================================== */ .anom-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .anom-nav.scrolled { background: rgba(10, 10, 12, 0.55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--rule); } .anom-nav a, .anom-nav .anom-brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; } .anom-nav .anom-links { display: flex; gap: 28px; } .anom-nav .anom-brand { font-family: var(--head); font-weight: 900; font-size: 14px; letter-spacing: 0.22em; } /* ========================================================== HERO ========================================================== */ .anom-hero { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 32px; } .anom-hero .anom-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--cyan); margin-bottom: 24px; opacity: 0; animation: anom-fade-in 1s 0.2s forwards; } .anom-hero h1 { font-size: clamp(48px, 9vw, 160px); line-height: 0.92; margin: 0; } .anom-hero .anom-line { display: block; overflow: hidden; } .anom-hero .anom-line span { display: inline-block; transform: translateY(110%); animation: anom-slide-up 1.1s cubic-bezier(.2,.8,.2,1) forwards; } .anom-hero .anom-line:nth-child(1) span { animation-delay: 0.40s; } .anom-hero .anom-line:nth-child(2) span { animation-delay: 0.55s; } .anom-hero .anom-line:nth-child(3) span { animation-delay: 0.70s; } .anom-hero .anom-sub { max-width: 560px; margin-top: 28px; font-size: 16px; line-height: 1.55; opacity: 0; animation: anom-fade-in 1s 1.2s forwards; } .anom-hero .anom-ctas { margin-top: 40px; display: flex; gap: 16px; opacity: 0; animation: anom-fade-in 1s 1.4s forwards; flex-wrap: wrap; } .anom-hero .anom-cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; padding: 14px 22px; border: 1px solid var(--rule-strong); transition: background 0.25s, border-color 0.25s, color 0.25s; cursor: none; } .anom-hero .anom-cta.primary { background: var(--signal); color: var(--ink); border-color: var(--signal); } .anom-hero .anom-cta.primary:hover { background: transparent; color: var(--signal); } .anom-hero .anom-cta.ghost:hover { border-color: var(--bone); } @keyframes anom-slide-up { to { transform: translateY(0); } } @keyframes anom-fade-in { to { opacity: 1; } } /* ========================================================== SECTIONS ========================================================== */ .anom-section { position: relative; z-index: 2; padding: 140px 32px; border-top: 1px solid var(--rule); } .anom-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 80px; } .anom-section-head h2 { font-size: clamp(28px, 4vw, 56px); margin: 0; } .anom-section-head .anom-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--cyan); } .anom-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); } .anom-reveal.in-view { opacity: 1; transform: translateY(0); } .anom-reveal.d-1 { transition-delay: 0.05s; } .anom-reveal.d-2 { transition-delay: 0.15s; } .anom-reveal.d-3 { transition-delay: 0.25s; } .anom-reveal.d-4 { transition-delay: 0.35s; } /* ========================================================== PRODUCT GRID + SPEC BARS ========================================================== */ .anom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .anom-card { background: var(--ink-2); padding: 40px; display: flex; flex-direction: column; gap: 18px; transition: background 0.3s; min-height: 420px; cursor: none; } .anom-card:hover { background: #16161a; } .anom-card .anom-code { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.25em; } .anom-card h3 { font-size: 32px; margin: 0; line-height: 0.95; } .anom-card .anom-desc { font-size: 14px; opacity: 0.75; line-height: 1.55; } .anom-card .anom-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; margin-top: auto; } .anom-bar-wrap { margin-top: 14px; } .anom-bar-labels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; opacity: 0.6; margin-bottom: 6px; } .anom-bar { height: 2px; background: rgba(232,230,223,0.08); position: relative; overflow: hidden; } .anom-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: var(--signal); transition: width 1.4s cubic-bezier(.2,.8,.2,1); } .anom-card.in-view .anom-bar-fill { width: var(--fill, 70%); } /* ========================================================== 3-COLUMN + 4-PHASE ========================================================== */ .anom-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .anom-cols-3 .anom-col { padding: 32px 0; border-top: 1px solid var(--rule-strong); } .anom-cols-3 .anom-col .anom-num { font-family: var(--mono); font-size: 12px; color: var(--cyan); letter-spacing: 0.2em; } .anom-cols-3 .anom-col h4 { font-family: var(--head); font-size: 22px; margin: 12px 0 16px; } .anom-cols-3 .anom-col p { font-size: 14px; line-height: 1.6; opacity: 0.8; } .anom-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .anom-phase { background: var(--ink-2); padding: 32px; } .anom-phase .anom-tag { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: 0.25em; } .anom-phase h4 { font-family: var(--head); font-size: 18px; margin: 10px 0 12px; } .anom-phase p { font-size: 13px; line-height: 1.55; opacity: 0.8; } /* ========================================================== PRODUCT PAGE ========================================================== */ .anom-pdp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; padding: 140px 32px 80px; position: relative; z-index: 2; } .anom-pdp-media { background: var(--ink-2); aspect-ratio: 4/5; border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--rule-strong); letter-spacing: 0.3em; } .anom-pdp h1 { font-size: clamp(32px, 5vw, 64px); margin: 0 0 20px; line-height: 0.95; } .anom-pdp .anom-price { font-family: var(--mono); font-size: 18px; margin-bottom: 12px; letter-spacing: 0.1em; } .anom-pdp .anom-stock { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.2em; margin-bottom: 32px; } .anom-pdp .anom-desc { font-size: 15px; line-height: 1.65; opacity: 0.85; max-width: 440px; } .anom-spec { margin-top: 40px; border-top: 1px solid var(--rule-strong); } .anom-spec .anom-row { display: grid; grid-template-columns: 160px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; } .anom-spec .anom-row .anom-k { opacity: 0.55; } .anom-variant-group { margin-top: 28px; } .anom-variant-group .anom-variant-label { font-family: var(--mono); font-size: 11px; opacity: 0.6; letter-spacing: 0.25em; margin-bottom: 10px; } .anom-variant-group .anom-variant-row { display: flex; flex-wrap: wrap; gap: 10px; } .anom-variant-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; padding: 10px 14px; border: 1px solid var(--rule-strong); background: transparent; color: var(--bone); cursor: none; transition: background 0.2s, border-color 0.2s, color 0.2s; } .anom-variant-btn:hover { border-color: var(--bone); } .anom-variant-btn.selected { background: var(--bone); color: var(--ink); border-color: var(--bone); } .anom-btn-cart { display: inline-block; margin-top: 32px; padding: 16px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; background: var(--signal); color: var(--ink); border: 1px solid var(--signal); cursor: none; transition: background 0.25s, color 0.25s; } .anom-btn-cart:hover { background: transparent; color: var(--signal); } /* ========================================================== FOOTER ========================================================== */ .anom-footer { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 48px; align-items: center; padding: 60px 32px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-align: center; } .anom-footer .anom-links-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; } .anom-footer .anom-left { text-align: left; } .anom-footer .anom-right { text-align: right; } /* responsive */ @media (max-width: 900px) { html, body { cursor: auto; } .anom-cursor-dot, .anom-cursor-ring { display: none; } .anom-cols-3, .anom-phases, .anom-grid { grid-template-columns: 1fr; } .anom-pdp { grid-template-columns: 1fr; gap: 40px; padding-top: 120px; } .anom-section { padding: 80px 20px; } .anom-ghost { font-size: 60vw; } .anom-footer { grid-template-columns: 1fr; text-align: left; } .anom-footer .anom-right, .anom-footer .anom-left { text-align: left; } .anom-hero h1 { font-size: clamp(44px, 14vw, 90px); } .anom-nav { padding: 14px 20px; } .anom-nav .anom-links { gap: 18px; } }