/* ========================================================= FUTRON UNIFORM LAB — clothing microsite (uniform-lab.html) Dark-first ALWAYS, regardless of the site-wide theme toggle or system preference — this is the cyberpunk side. It forces its own values onto the shared --color-* tokens (declared on body.ul-body, which every descendant — nav, footer, main — inherits) so the shared nav/footer components stay visually consistent with index.html while this page itself never goes light. The theme toggle still updates localStorage so index.html respects the user's choice when they navigate back. Darker, more artistic. Neon pushed slightly harder, same discipline. ========================================================= */ :root { --coal-900: #0A0F12; --coal-700: #161B22; --coal-500: #252B36; /* Extended Uniform Lab accent ramp ("Neon Sign" palette — the source the locked #FF2A6D magenta was drawn from). Two families only (Inter + JetBrains Mono, per the Font Bible) — these are color-only additions, no display typeface. */ --ink-deepest: #01012B; /* hero gradient floor / deepest bg stop */ --ice: #D1F7FF; /* display-headline tint, used instead of pure white */ --teal-glow: #05D9E8; /* neon box-shadow pair: bright core */ --teal-halo: #005678; /* neon box-shadow pair: dark halo */ --teal-muted: #3D898D; /* secondary UI: hover borders, dividers, captions */ --teal-muted-dark: #2F404D; } body.ul-body { /* Force the shared semantic tokens dark, overriding whatever the toggle/media-query resolved on . */ --color-bg: #0A0F12; --color-surface: #161B22; --color-surface-2: #1F2733; --color-border: #252B36; --color-text: #F3F4F6; --color-text-secondary: #9CA6B4; --color-text-tertiary: #8B94A3; --color-accent: #00B5AD; --color-accent-light: #65DC98; --color-accent-cyan: #85EBD9; --color-warn: #F59E0B; --color-cta-bg: #00B5AD; --color-cta-bg-hover: #0B6E6E; --color-cta-text: #0A0F12; --color-dot: #00B5AD; --color-nav-bg: rgba(10, 15, 18, 0.86); --color-shadow: rgba(255, 42, 109, 0.25); background: var(--color-bg); } /* ---------- UL Hero ---------- */ .ul-hero { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(255, 42, 109, 0.12); background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(172, 97, 185, 0.18), transparent 60%), radial-gradient(ellipse 50% 50% at 15% 80%, rgba(0, 181, 173, 0.12), transparent 60%), linear-gradient(180deg, var(--coal-900) 0%, var(--ink-deepest) 100%); } .ul-hero-bg-pattern { position: absolute; inset: 0; background-image: url('../assets/packing-slip-pattern.png'); background-size: 420px; opacity: 0.05; mix-blend-mode: screen; z-index: 0; } .ul-hero-content { position: relative; z-index: 2; max-width: 780px; } .ul-tag-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 24px 0 30px; } .ul-tag-row span { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #9CA6B4; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; } .ul-hero h1 { background: linear-gradient(90deg, var(--ice) 0%, var(--ice) 60%, var(--magenta-hot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .ul-hero .lede { color: #A9B0BC; } .ul-hero-cta { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; } .btn-magenta { background: transparent; color: var(--magenta-hot); border: 1px solid var(--magenta-core); border-radius: var(--radius-sm); } .btn-magenta:hover { background: rgba(255, 42, 109, 0.1); border-color: var(--magenta-hot); box-shadow: 0 0 0 3px rgba(255, 42, 109, 0.15); } /* ---------- Two-tier explainer ---------- */ .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .tier-card { position: relative; border-radius: var(--radius); padding: 34px 30px; border: 1px solid var(--coal-500); background: var(--coal-700); overflow: hidden; } .tier-card.tier-lab { border-color: rgba(255, 42, 109, 0.28); background: linear-gradient(160deg, rgba(172,97,185,0.08), var(--coal-700) 55%); } .tier-card .tier-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-bright); margin-bottom: 10px; } .tier-card.tier-lab .tier-kicker { color: var(--magenta-hot); } .tier-card h3 { font-size: 22px; margin-bottom: 14px; color: #F3F4F6; } .tier-card p { color: #9CA6B4; font-size: 14.5px; margin-bottom: 18px; } .tier-meta { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #6B7280; } @media (max-width: 860px) { .tier-grid { grid-template-columns: 1fr; } } /* ---------- Product grid ---------- */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .product-card { position: relative; background: var(--coal-700); border: 1px solid var(--coal-500); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); } .product-card:hover { /* secondary interactive chrome: muted teal border + a two-tone glow (bright core / dark halo) rather than full-neon magenta, which stays reserved for CTAs and the tier-lab/SKU identity. */ border-color: var(--teal-muted); box-shadow: 0 0 0 1px var(--teal-glow), 0 0 22px 2px var(--teal-halo); transform: translateY(-4px); } .product-media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, rgba(0,181,173,0.10), rgba(172,97,185,0.10)), var(--coal-900); display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-media .sku-mark { font-family: var(--font-mono); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; color: rgba(255,255,255,0.08); } .product-status { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 100px; background: rgba(11,15,20,0.7); border: 1px solid rgba(255,255,255,0.14); color: #F3F4F6; } .product-status.in-rotation { color: #65DC98; border-color: rgba(101,220,152,0.35); } .product-status.limited { color: #F59E0B; border-color: rgba(245,158,11,0.4); } .product-status.archive { color: #6B7280; border-color: rgba(107,114,128,0.3); } .product-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .product-sku { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--magenta-hot); margin-bottom: 8px; } .product-body h3 { font-size: 17px; margin-bottom: 8px; color: #F3F4F6; } .product-body p { font-size: 13.5px; color: #8B94A3; flex: 1; margin-bottom: 16px; } .product-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.1); } .product-price { font-family: var(--font-mono); font-size: 14px; color: #F3F4F6; } .product-link { font-size: 13px; font-weight: 600; color: var(--teal-bright); display: inline-flex; align-items: center; gap: 6px; } .product-link:hover { color: var(--magenta-hot); } .product-card.is-archived { opacity: 0.55; } .product-card.is-archived .product-link { pointer-events: none; color: #6B7280; } /* Purely decorative dividers stay muted so the full-neon teal/magenta pair reads as "the accent" rather than being spent on chrome. */ .ul-body .barcode-divider span { background: var(--teal-muted); } @media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } } /* ---------- 80/15/5 rule callout ---------- */ .rule-callout { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; padding: 30px 32px; border: 1px solid var(--coal-500); border-radius: var(--radius); background: var(--coal-700); } .rule-bar { display: flex; height: 12px; width: 220px; border-radius: 100px; overflow: hidden; flex-shrink: 0; } .rule-bar span:nth-child(1) { width: 80%; background: var(--coal-500); } .rule-bar span:nth-child(2) { width: 15%; background: var(--teal-bright); } .rule-bar span:nth-child(3) { width: 5%; background: var(--magenta-hot); } .rule-callout .rule-text { font-size: 13.5px; color: #9CA6B4; } .rule-callout .rule-text strong { color: #F3F4F6; } /* ============================================================ COUTURE LIVE LAYER (2026-07-09) — holo AVANI, ticker, shimmer, glitch, Printify sync chips. Motion gated behind body.ul-motion-on (set by JS only when no reduced-motion). ============================================================ */ /* ---- Hero: layout room for the hologram ---- */ .ul-hero .wrap { display: flex; align-items: center; gap: 32px; } .ul-hero-content { flex: 1; min-width: 0; } /* ---- Holographic AVANI ---- */ .ul-holo { position: relative; flex: 0 0 auto; width: min(300px, 30vw); margin: 0; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 35%, transparent)); } .ul-holo img { display: block; width: 100%; height: auto; opacity: 0.92; /* hologram grade: teal push + slight transparency */ filter: sepia(1) hue-rotate(140deg) saturate(2.6) brightness(1.15) contrast(1.05); mask-image: linear-gradient(to bottom, black 82%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%); } .ul-holo-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0 2px, color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 14%, transparent) 2px 3px ); mix-blend-mode: screen; pointer-events: none; } .ul-holo-cone { position: absolute; left: 50%; bottom: -8px; width: 130%; height: 105%; transform: translateX(-50%); background: linear-gradient(to top, color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 18%, transparent), transparent 70%); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); pointer-events: none; } .ul-holo-base { position: absolute; left: 50%; bottom: -10px; width: 78%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 55%, transparent), transparent 70%); } .ul-holo-tag { position: absolute; top: 8%; right: -8px; font-family: var(--font-mono, ui-monospace); font-size: 9px; letter-spacing: 0.14em; color: var(--color-accent-cyan, #39D2E8); text-align: right; line-height: 1.6; border-right: 1px solid color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 45%, transparent); padding-right: 8px; } .ul-holo-tag span { opacity: 0.55; } .ul-motion-on .ul-holo img { animation: ul-holo-flicker 7s infinite; } .ul-motion-on .ul-holo { animation: ul-holo-float 6s ease-in-out infinite; } @keyframes ul-holo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes ul-holo-flicker { 0%, 91%, 94%, 98%, 100% { opacity: 0.92; } 92% { opacity: 0.55; } 93% { opacity: 0.85; } 99% { opacity: 0.7; } } @media (max-width: 860px) { .ul-holo { display: none; } /* hero stays clean on mobile */ } /* ---- Hero scanline sweep ---- */ .ul-hero { position: relative; overflow: hidden; } .ul-hero-scanline { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 7%, transparent) 50%, transparent 100%); background-size: 100% 220px; background-repeat: no-repeat; background-position: 0 -220px; opacity: 0; } .ul-motion-on .ul-hero-scanline { animation: ul-scan 9s linear infinite; opacity: 1; } @keyframes ul-scan { 0% { background-position: 0 -220px; } 55% { background-position: 0 110%; } 100% { background-position: 0 110%; } } /* ---- Headline shimmer ---- */ .ul-shimmer { background: linear-gradient(100deg, var(--color-text) 40%, var(--color-accent-cyan, #39D2E8) 50%, #FF2E88 55%, var(--color-text) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; } .ul-motion-on .ul-shimmer { color: transparent; -webkit-text-fill-color: transparent; animation: ul-shimmer-slide 7s ease-in-out infinite; } @keyframes ul-shimmer-slide { 0%, 60%, 100% { background-position: 110% 0; } 75% { background-position: -10% 0; } } /* ---- Ticker ---- */ .ul-ticker { overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: 9px 0; } .ul-ticker-track { display: inline-flex; gap: 0; white-space: nowrap; font-family: var(--font-mono, ui-monospace); font-size: 10.5px; letter-spacing: 0.14em; color: var(--color-text-secondary); } .ul-ticker-track span { padding: 0 18px; border-right: 1px solid var(--color-border); } .ul-ticker-track span:nth-child(4n+1) { color: var(--color-accent-cyan, #39D2E8); } .ul-motion-on .ul-ticker-track { animation: ul-ticker-scroll 36s linear infinite; } .ul-ticker:hover .ul-ticker-track { animation-play-state: paused; } @keyframes ul-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- Product card: live images + glitch + hover ---- */ .product-media.has-live-image { background-size: cover; background-position: center; } .product-media.has-live-image .sku-mark { background: color-mix(in srgb, var(--color-bg) 72%, transparent); padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(3px); } .product-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .ul-motion-on .product-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 55%, var(--color-border)); box-shadow: 0 14px 40px color-mix(in srgb, var(--color-accent-cyan, #39D2E8) 12%, transparent); } .sku-mark { position: relative; display: inline-block; } .ul-motion-on .sku-mark.glitching { animation: ul-glitch 0.45s steps(2, jump-none) 2; } @keyframes ul-glitch { 0% { transform: translate(0); text-shadow: none; } 25% { transform: translate(-2px, 1px); text-shadow: 2px 0 #FF2E88, -2px 0 var(--color-accent-cyan, #39D2E8); } 50% { transform: translate(2px, -1px); text-shadow: -2px 0 #FF2E88, 2px 0 var(--color-accent-cyan, #39D2E8); } 75% { transform: translate(-1px, -1px); text-shadow: 1px 0 #FF2E88; } 100% { transform: translate(0); text-shadow: none; } } /* ---- Printify sync chips ---- */ .sync-chip { position: absolute; bottom: 8px; left: 8px; font-family: var(--font-mono, ui-monospace); font-size: 8.5px; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-bg) 80%, transparent); } .sync-chip.sync-live { color: #2FD08A; border-color: color-mix(in srgb, #2FD08A 45%, transparent); } .product-media { position: relative; } /* ========================================================= CYBERPUNK GLITCH TITLE — "OPERATIONAL COUTURE" Chromatic-aberration glitch slices + terminal frame. Motion gated behind .ul-motion-on (reduced-motion safe). ========================================================= */ .ul-glitch-title { position: relative; display: inline-block; font-family: inherit; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; padding: 18px 26px 30px 26px; border: 1px solid rgba(5, 217, 232, 0.28); background: linear-gradient(180deg, rgba(5, 217, 232, 0.05), transparent 40%), rgba(4, 10, 16, 0.35); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); } /* corner reticles (SENTRY DNA) */ .ul-gt-bracket::before, .ul-gt-bracket::after { content: "+"; position: absolute; font-size: 16px; line-height: 1; color: var(--teal-glow); text-shadow: 0 0 6px currentColor; opacity: 0.9; } .ul-gt-bracket::before { top: -8px; left: -7px; } .ul-gt-bracket::after { bottom: -8px; right: -7px; } .ul-gt-line { display: block; color: var(--ice); text-shadow: 0 0 18px rgba(5, 217, 232, 0.35); } .ul-gt-line.ul-gt-accent { background: linear-gradient(90deg, var(--teal-glow) 0%, var(--ice) 45%, var(--magenta-hot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 42, 109, 0.35)); } .ul-gt-cursor { -webkit-text-fill-color: var(--magenta-hot); animation: ul-gt-blink 1.1s steps(2, start) infinite; } .ul-gt-meta { display: block; margin-top: 14px; font-family: "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; color: var(--teal-muted); text-shadow: none; } /* glitch slice layers (use the h1's data-text) */ .ul-motion-on .ul-glitch-title::before, .ul-motion-on .ul-glitch-title::after { content: attr(data-text); white-space: pre; position: absolute; top: 18px; left: 26px; right: 26px; line-height: 0.95; pointer-events: none; opacity: 0; } .ul-motion-on .ul-glitch-title::before { color: var(--teal-glow); animation: ul-gt-slice-a 6.5s infinite steps(1); } .ul-motion-on .ul-glitch-title::after { color: var(--magenta-hot); animation: ul-gt-slice-b 6.5s infinite steps(1); } @keyframes ul-gt-blink { 50% { opacity: 0; } } @keyframes ul-gt-slice-a { 0%, 91% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 92% { opacity: 0.75; transform: translate(-4px, 2px); clip-path: inset(12% 0 64% 0); } 93.5% { opacity: 0.75; transform: translate(3px, -1px); clip-path: inset(58% 0 18% 0); } 95%, 100%{ opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } } @keyframes ul-gt-slice-b { 0%, 91.5%{ opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 92.5% { opacity: 0.7; transform: translate(4px, -2px); clip-path: inset(36% 0 42% 0); } 94% { opacity: 0.7; transform: translate(-3px, 1px); clip-path: inset(74% 0 6% 0); } 95.5%,100%{ opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } } /* override the legacy .ul-hero h1 text-clip gradient for the glitch build */ .ul-hero h1.ul-glitch-title { -webkit-background-clip: border-box; background-clip: border-box; color: var(--ice); background: linear-gradient(180deg, rgba(5, 217, 232, 0.05), transparent 40%), rgba(4, 10, 16, 0.35); } /* ========================================================= CORP-BADGE LOCKUP v2 — CP2077 three-tier composition (mark + wordmark + registration line, per cp2077-ui-dna.md) ========================================================= */ .ul-corp-badge { display: inline-grid; grid-template-columns: auto 1fr; grid-template-areas: "mark word" "reg reg"; column-gap: 22px; align-items: center; } .ul-cb-mark { grid-area: mark; color: var(--teal-glow); filter: drop-shadow(0 0 8px rgba(5, 217, 232, 0.45)); line-height: 0; } .ul-cb-word { grid-area: word; } .ul-cb-reg { grid-area: reg; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(5, 217, 232, 0.25); } /* barcode strip — CP2077 registration-tier ornament */ .ul-cb-barcode { width: 64px; height: 14px; flex: none; background: repeating-linear-gradient(90deg, var(--teal-muted) 0 1px, transparent 1px 3px, var(--teal-muted) 3px 5px, transparent 5px 6px, var(--teal-muted) 6px 7px, transparent 7px 10px); opacity: 0.85; } .ul-cb-regline { font-family: "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; color: var(--teal-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* glitch pseudo-layers realign for grid build */ .ul-motion-on .ul-corp-badge::before, .ul-motion-on .ul-corp-badge::after { left: 100px; top: 18px; } @media (max-width: 720px) { .ul-corp-badge { grid-template-columns: 1fr; grid-template-areas: "mark" "word" "reg"; row-gap: 10px; } .ul-cb-regline { white-space: normal; } } /* ========================================================= LIGHT THEME ("Day Shift") — honors the site-wide toggle. Flips the forced-dark tokens scoped on body.ul-body. ========================================================= */ html[data-theme="light"] body.ul-body { --coal-900: #EEF2F6; --coal-700: #E4EAF1; --coal-500: #C9D3DE; --ink-deepest: #DCE7F0; --ice: #0B2530; --teal-halo: #BFE7EB; --teal-muted: #2F6B70; --teal-muted-dark: #AEBDC9; --color-bg: #F2F5F8; --color-surface: #FFFFFF; --color-surface-2: #E9EEF4; --color-border: #C9D3DE; --color-text: #17212B; --color-text-secondary: #45525F; --color-text-tertiary: #5C6975; --color-nav-bg: rgba(242, 245, 248, 0.88); --color-shadow: rgba(255, 42, 109, 0.18); background: var(--color-bg); } html[data-theme="light"] .ul-body .product-body h3 { color: #17212B; } html[data-theme="light"] .ul-body .product-body p { color: #45525F; } html[data-theme="light"] .ul-body .ul-hero .lede, html[data-theme="light"] .ul-body .lede { color: #45525F; } html[data-theme="light"] .ul-body .ul-tag-row span { color: #2F6B70; border-color: rgba(11, 37, 48, 0.25); } html[data-theme="light"] .ul-body .eyebrow { color: #2F6B70; } /* light mode: badge flips to a light plate — dark ink, deeper teal for contrast */ html[data-theme="light"] .ul-hero h1.ul-glitch-title { background: linear-gradient(180deg, rgba(5, 217, 232, 0.08), transparent 40%), rgba(255, 255, 255, 0.85); border-color: rgba(8, 145, 166, 0.45); } html[data-theme="light"] .ul-glitch-title .ul-gt-line { color: #0B2530; text-shadow: 0 0 14px rgba(5, 217, 232, 0.25); } html[data-theme="light"] .ul-glitch-title .ul-gt-line.ul-gt-accent { background: linear-gradient(90deg, #0891A6 0%, #0B2530 45%, #E1114F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .ul-cb-mark { color: #0891A6; } html[data-theme="light"] .ul-gt-bracket::before, html[data-theme="light"] .ul-gt-bracket::after { color: #0891A6; } html[data-theme="light"] .ul-cb-reg { border-top-color: rgba(8, 145, 166, 0.35); } /* ========================================================= SCI-FI TYPE SYSTEM v2 (commercial-safe stand-ins for the provided dafont refs: Orbitron ~ Ethnocentric/Nulshock, Michroma ~ Bitsumishi) ========================================================= */ body.ul-body { font-family: "Michroma", "Inter", sans-serif; } body.ul-body p, body.ul-body .lede { font-size: 0.95em; letter-spacing: 0.02em; } .ul-body h1, .ul-body h2, .ul-body h3, .ul-glitch-title .ul-gt-line, .ul-hero h1 { font-family: "Orbitron", "Michroma", sans-serif !important; font-weight: 800; letter-spacing: 0.04em; } .ul-body .btn, .ul-body .ul-tag-row span, .ul-body .product-status { font-family: "Michroma", sans-serif; } /* light mode: full black-text sweep */ html[data-theme="light"] .ul-body, html[data-theme="light"] .ul-body p { color: #17212B; } html[data-theme="light"] .ul-body .metadata-strip, html[data-theme="light"] .ul-body .product-sku, html[data-theme="light"] .ul-body .ul-holo-tag, html[data-theme="light"] .ul-body figcaption { color: #2F6B70; } html[data-theme="light"] .ul-body .product-price { color: #17212B; } html[data-theme="light"] .ul-body h2, html[data-theme="light"] .ul-body h3 { color: #0B2530; } html[data-theme="light"] .ul-body .section-head .lede { color: #45525F; } /* hover-triggered chromatic glitch (in addition to the periodic pulse) */ .ul-motion-on .ul-glitch-title:hover::before { animation: ul-gt-slice-a 0.9s infinite steps(1); } .ul-motion-on .ul-glitch-title:hover::after { animation: ul-gt-slice-b 0.9s infinite steps(1); } .ul-glitch-title { cursor: crosshair; } /* dense slice pattern for hover — constant visible glitching while cursor is over */ @keyframes ul-gt-hover-a { 0% { opacity: 0.8; transform: translate(-4px, 2px); clip-path: inset(10% 0 70% 0); } 20% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 35% { opacity: 0.8; transform: translate(3px, -2px); clip-path: inset(55% 0 25% 0); } 55% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 70% { opacity: 0.75;transform: translate(-3px, 1px); clip-path: inset(30% 0 48% 0); } 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } } @keyframes ul-gt-hover-b { 0% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 15% { opacity: 0.7; transform: translate(4px, -1px); clip-path: inset(64% 0 12% 0); } 35% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 50% { opacity: 0.7; transform: translate(-4px, 2px); clip-path: inset(20% 0 62% 0); } 70% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } 85% { opacity: 0.65;transform: translate(3px, 1px); clip-path: inset(76% 0 4% 0); } 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); } } .ul-motion-on .ul-glitch-title:hover::before { animation: ul-gt-hover-a 0.7s infinite steps(1); opacity: 1; } .ul-motion-on .ul-glitch-title:hover::after { animation: ul-gt-hover-b 0.7s infinite steps(1); opacity: 1; } /* ========================================================= LIGHT MODE v2 — true white (matches the preview DJ liked) ========================================================= */ html[data-theme="light"] body.ul-body { --coal-900: #FFFFFF; --coal-700: #F4F7FA; --coal-500: #DFE6ED; --ink-deepest: #FFFFFF; --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F4F7FA; --color-border: #DFE6ED; --color-nav-bg: rgba(255, 255, 255, 0.92); background: #FFFFFF; } html[data-theme="light"] .ul-hero { background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(172, 97, 185, 0.07), transparent 60%), radial-gradient(ellipse 50% 50% at 15% 80%, rgba(0, 181, 173, 0.06), transparent 60%), linear-gradient(180deg, #FFFFFF 0%, #F6FAFC 100%); } /* screen-blend pattern is invisible on white — flip to multiply */ html[data-theme="light"] .ul-hero-bg-pattern { mix-blend-mode: multiply; opacity: 0.04; } html[data-theme="light"] .ul-body .product-card { background: #FFFFFF; border-color: #DFE6ED; } /* ========================================================= MASCOT MOTION — background-free, theme-adaptive (transparent PNG + CSS only: blends into any theme) ========================================================= */ @keyframes ul-mascot-sway { 0%, 100% { transform: rotate(-1.1deg) translateX(-3px); } 50% { transform: rotate(1.1deg) translateX(3px); } } .ul-holo img { transform-origin: 50% 90%; } .ul-motion-on .ul-holo img { animation: ul-holo-flicker 7s infinite, ul-mascot-sway 5.5s ease-in-out infinite; } /* soften hologram overlays over the cartoon in light mode */ html[data-theme="light"] .ul-holo-scanlines { opacity: 0.25; } html[data-theme="light"] .ul-holo-cone { opacity: 0.5; }