/** * vibe.css — OGAICE WebApp Vibe v1.0.0 · master stylesheet * * Five design idioms (sourced from the UI/UX Pro Max recipe database): * 1. Cyberpunk UI — neon glow · scanlines · glitch hover * 2. HUD / Sci-Fi FUI — corner brackets · ticker · technical wireframes * 3. Aurora UI — animated mesh gradient backdrop · atmospheric blend * 4. Bento Grids — modular cards · hover lift · soft shadow * 5. Kinetic Typography — gradient shimmer · scroll reveal · animated counters * * Brand-faithful: builds ON TOP of OGAICE dark-navy + gold, never replaces it. * * Opt-out (HTML attribute) : * Opt-out (URL parameter) : ?vibe=off * * Respects prefers-reduced-motion (final §). * * social@ogaice:G1/vibe [LIVE|AURORA|NEON|HUD|BENTO|KINETIC] $ */ /* ═════════════════════════════════════════════════════════════════ * § 0 · TOKENS * ═════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --ogaice-vibe-navy-deep: #050a14; --ogaice-vibe-navy: #0d1f3a; --ogaice-vibe-navy-2: #142849; --ogaice-vibe-gold: #c9a227; --ogaice-vibe-gold-bright: #ffd84d; --ogaice-vibe-paper: #d5e1f3; --ogaice-vibe-ink: #050a14; /* Vibe accents */ --ogaice-vibe-cyan: #00e5ff; --ogaice-vibe-magenta: #ff4ad6; --ogaice-vibe-mint: #6effc1; --ogaice-vibe-warn: #ff7849; --ogaice-vibe-grid: rgba(0, 229, 255, 0.08); /* Glow */ --ogaice-vibe-glow-gold: 0 0 12px #ffd84d66, 0 0 32px #c9a22744; --ogaice-vibe-glow-cyan: 0 0 10px #00e5ff88, 0 0 28px #00e5ff44; /* Motion */ --ogaice-vibe-t-fast: 180ms; --ogaice-vibe-t-base: 280ms; --ogaice-vibe-t-slow: 600ms; --ogaice-vibe-t-aurora: 14s; --ogaice-vibe-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Layout */ --ogaice-vibe-radius: 16px; --ogaice-vibe-radius-pill: 999px; --ogaice-vibe-gap: 18px; /* Type */ --ogaice-vibe-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; --ogaice-vibe-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ═════════════════════════════════════════════════════════════════ * § 1 · AURORA BACKDROP + SCANLINES * ═════════════════════════════════════════════════════════════════ */ body.ogaice-vibe { background: radial-gradient(at 22% 15%, var(--ogaice-vibe-navy-2) 0px, transparent 55%), radial-gradient(at 80% 85%, var(--ogaice-vibe-navy-2) 0px, transparent 55%), var(--ogaice-vibe-navy-deep); background-size: 200% 200%; animation: ogaice-vibe-aurora-drift var(--ogaice-vibe-t-aurora) ease-in-out infinite alternate; min-height: 100vh; color: var(--ogaice-vibe-paper); font-family: var(--ogaice-vibe-font-sans); } @keyframes ogaice-vibe-aurora-drift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } body.ogaice-vibe::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35) 100%); } /* ═════════════════════════════════════════════════════════════════ * § 2 · TERMINAL PROMPT * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-prompt { font-family: var(--ogaice-vibe-font-mono); font-size: 13px; letter-spacing: 0.02em; padding: 8px 14px; background: linear-gradient(90deg, rgba(0,229,255,.05), rgba(255,74,214,.03)); border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--ogaice-vibe-mint); position: relative; } .ogaice-vibe-prompt::after { content: ''; display: inline-block; width: 8px; height: 1em; background: var(--ogaice-vibe-gold-bright); box-shadow: 0 0 10px var(--ogaice-vibe-gold-bright); animation: ogaice-vibe-cursor-blink 1s steps(1) infinite; vertical-align: middle; } .ogaice-vibe-prompt b { color: var(--ogaice-vibe-mint); font-weight: 500; } .ogaice-vibe-prompt .at { color: var(--ogaice-vibe-paper); opacity: 0.55; } .ogaice-vibe-prompt .h { color: var(--ogaice-vibe-magenta); } .ogaice-vibe-prompt .p { color: var(--ogaice-vibe-cyan); } .ogaice-vibe-prompt .s { color: var(--ogaice-vibe-gold-bright); } @keyframes ogaice-vibe-cursor-blink { 50% { opacity: 0; } } /* ═════════════════════════════════════════════════════════════════ * § 3 · BENTO CARDS + HUD CORNERS * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ogaice-vibe-gap); margin: 24px 0; } .ogaice-vibe-card { --c: var(--ogaice-vibe-card-accent, var(--ogaice-vibe-gold)); position: relative; padding: 22px 18px; background: linear-gradient(160deg, rgba(20,40,73,.7), rgba(13,31,58,.85)); border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); border-radius: var(--ogaice-vibe-radius); overflow: hidden; isolation: isolate; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--ogaice-vibe-t-base) var(--ogaice-vibe-ease), border-color var(--ogaice-vibe-t-base) var(--ogaice-vibe-ease), box-shadow var(--ogaice-vibe-t-base) var(--ogaice-vibe-ease); } .ogaice-vibe-card::before, .ogaice-vibe-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--c); border-style: solid; border-width: 0; opacity: 0.75; transition: opacity var(--ogaice-vibe-t-base) var(--ogaice-vibe-ease); pointer-events: none; } .ogaice-vibe-card::before { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; } .ogaice-vibe-card::after { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; } .ogaice-vibe-card > .ogaice-vibe-sweep { position: absolute; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(120deg, transparent 30%, color-mix(in oklab, var(--c) 18%, transparent) 50%, transparent 70%); transform: translateX(-100%); transition: transform var(--ogaice-vibe-t-slow) var(--ogaice-vibe-ease); } .ogaice-vibe-card:hover { transform: translateY(-3px) scale(1.015); border-color: var(--c); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent), 0 8px 32px color-mix(in oklab, var(--c) 22%, transparent); } .ogaice-vibe-card:hover > .ogaice-vibe-sweep { transform: translateX(100%); } .ogaice-vibe-card:hover::before, .ogaice-vibe-card:hover::after { opacity: 1; } .ogaice-vibe-card__num { display: block; font-family: var(--ogaice-vibe-font-mono); font-size: clamp(38px, 5vw, 60px); font-weight: 700; line-height: 1; color: var(--ogaice-vibe-gold-bright); text-shadow: var(--ogaice-vibe-glow-gold); letter-spacing: -0.02em; } .ogaice-vibe-card__label { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ogaice-vibe-paper); opacity: 0.78; font-weight: 500; } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+1) { --ogaice-vibe-card-accent: var(--ogaice-vibe-gold); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+2) { --ogaice-vibe-card-accent: var(--ogaice-vibe-cyan); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+3) { --ogaice-vibe-card-accent: var(--ogaice-vibe-magenta); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+4) { --ogaice-vibe-card-accent: var(--ogaice-vibe-mint); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+5) { --ogaice-vibe-card-accent: var(--ogaice-vibe-gold); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+6) { --ogaice-vibe-card-accent: var(--ogaice-vibe-warn); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+7) { --ogaice-vibe-card-accent: var(--ogaice-vibe-cyan); } .ogaice-vibe-bento > .ogaice-vibe-card:nth-child(8n+8) { --ogaice-vibe-card-accent: var(--ogaice-vibe-magenta); } /* ═════════════════════════════════════════════════════════════════ * § 4 · HERO + KINETIC TYPOGRAPHY * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-hero { position: relative; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px); max-width: 1200px; margin: 0 auto; overflow: hidden; } .ogaice-vibe-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--ogaice-vibe-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ogaice-vibe-cyan); background: linear-gradient(90deg, rgba(0,229,255,.08), rgba(0,229,255,0)); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: var(--ogaice-vibe-radius-pill); margin-bottom: 18px; } .ogaice-vibe-hero__eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--ogaice-vibe-mint); box-shadow: 0 0 8px var(--ogaice-vibe-mint); border-radius: 50%; animation: ogaice-vibe-pulse 2s ease-in-out infinite; } @keyframes ogaice-vibe-pulse { 50% { transform: scale(1.6); opacity: 0.4; } } .ogaice-vibe-hero__title { font-family: var(--ogaice-vibe-font-sans); font-size: clamp(40px, 7vw, 92px); font-weight: 800; line-height: 0.95; margin: 0 0 14px 0; letter-spacing: -0.03em; background: linear-gradient(95deg, #fff 0%, var(--ogaice-vibe-gold-bright) 32%, #fff 55%, var(--ogaice-vibe-cyan) 85%, var(--ogaice-vibe-magenta) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ogaice-vibe-text-shimmer 9s ease-in-out infinite; } @keyframes ogaice-vibe-text-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ogaice-vibe-hero__title small { display: block; font-size: 0.32em; font-weight: 600; letter-spacing: 0.06em; color: var(--ogaice-vibe-cyan); opacity: 0.85; margin-top: 8px; -webkit-text-fill-color: var(--ogaice-vibe-cyan); } .ogaice-vibe-hero__sub { font-family: var(--ogaice-vibe-font-sans); font-size: clamp(15px, 1.4vw, 19px); color: var(--ogaice-vibe-paper); opacity: 0.82; max-width: 60ch; margin: 0 0 18px 0; } .ogaice-vibe-hero__orbs { position: absolute; inset: -30% -10% auto auto; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; pointer-events: none; z-index: -1; background: radial-gradient(circle at 30% 30%, var(--ogaice-vibe-magenta) 0, transparent 35%), radial-gradient(circle at 70% 60%, var(--ogaice-vibe-cyan) 0, transparent 38%), radial-gradient(circle at 50% 80%, var(--ogaice-vibe-gold) 0, transparent 30%); filter: blur(70px) saturate(1.3); opacity: 0.5; animation: ogaice-vibe-orb-rotate 22s linear infinite; } @keyframes ogaice-vibe-orb-rotate { to { transform: rotate(360deg); } } /* ═════════════════════════════════════════════════════════════════ * § 5 · PILLS · CTA BUTTONS * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .ogaice-vibe-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--ogaice-vibe-paper); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ogaice-vibe-radius-pill); transition: color var(--ogaice-vibe-t-fast), border-color var(--ogaice-vibe-t-fast), background var(--ogaice-vibe-t-fast), transform var(--ogaice-vibe-t-fast); } .ogaice-vibe-pill:hover { color: var(--ogaice-vibe-gold-bright); border-color: var(--ogaice-vibe-gold); background: rgba(201, 162, 39, .08); transform: translateY(-1px); } .ogaice-vibe-pill--mint { color: var(--ogaice-vibe-mint); border-color: rgba(110, 255, 193, .3); } .ogaice-vibe-pill--cyan { color: var(--ogaice-vibe-cyan); border-color: rgba(0, 229, 255, .3); } .ogaice-vibe-pill--magenta { color: var(--ogaice-vibe-magenta); border-color: rgba(255, 74, 214, .3); } .ogaice-vibe-btn { --c: var(--ogaice-vibe-gold-bright); display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-family: var(--ogaice-vibe-font-sans); font-weight: 600; font-size: 14px; color: var(--ogaice-vibe-ink); background: var(--c); border: 1px solid var(--c); border-radius: var(--ogaice-vibe-radius-pill); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--ogaice-vibe-t-fast), box-shadow var(--ogaice-vibe-t-fast); } .ogaice-vibe-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c), 0 6px 28px color-mix(in oklab, var(--c) 40%, transparent); } .ogaice-vibe-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); transition: transform 800ms var(--ogaice-vibe-ease); pointer-events: none; } .ogaice-vibe-btn:hover::before { transform: translateX(100%); } .ogaice-vibe-btn--ghost { --c: var(--ogaice-vibe-cyan); background: transparent; color: var(--c); } .ogaice-vibe-btn--ghost:hover { background: color-mix(in oklab, var(--c) 12%, transparent); } /* ═════════════════════════════════════════════════════════════════ * § 6 · SECTION HEADERS · TICKER · GLITCH HOVER * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-section-title { font-family: var(--ogaice-vibe-font-sans); font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; margin: 32px 0 14px 0; color: var(--ogaice-vibe-paper); display: flex; align-items: baseline; gap: 12px; } .ogaice-vibe-section-title::before { content: ''; flex: 0 0 26px; height: 2px; background: linear-gradient(90deg, var(--ogaice-vibe-gold) 0%, transparent 100%); transform: translateY(-6px); } .ogaice-vibe-section-title small { font-family: var(--ogaice-vibe-font-mono); font-size: 11px; font-weight: 400; color: var(--ogaice-vibe-cyan); opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; } .ogaice-vibe-ticker { display: flex; overflow: hidden; border-top: 1px solid rgba(0, 229, 255, .15); border-bottom: 1px solid rgba(0, 229, 255, .15); background: rgba(5, 10, 20, .5); font-family: var(--ogaice-vibe-font-mono); font-size: 12px; padding: 7px 0; color: var(--ogaice-vibe-paper); white-space: nowrap; } .ogaice-vibe-ticker__track { display: inline-flex; gap: 36px; padding-left: 100%; animation: ogaice-vibe-ticker-roll 40s linear infinite; } .ogaice-vibe-ticker__track > span { display: inline-flex; align-items: center; gap: 6px; } .ogaice-vibe-ticker__track > span::before { content: '◆'; color: var(--ogaice-vibe-cyan); font-size: 8px; } @keyframes ogaice-vibe-ticker-roll { to { transform: translateX(-100%); } } .ogaice-vibe-glitch { position: relative; display: inline-block; } .ogaice-vibe-glitch::before, .ogaice-vibe-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; transition: opacity var(--ogaice-vibe-t-fast); } .ogaice-vibe-glitch::before { color: var(--ogaice-vibe-cyan); transform: translate(-1px, -1px); } .ogaice-vibe-glitch::after { color: var(--ogaice-vibe-magenta); transform: translate( 1px, 1px); } .ogaice-vibe-glitch:hover::before, .ogaice-vibe-glitch:hover::after { opacity: 0.7; animation: ogaice-vibe-glitch-shake .35s steps(4) 1; } @keyframes ogaice-vibe-glitch-shake { 25% { transform: translate( 1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate( 1px, 1px); } } /* ═════════════════════════════════════════════════════════════════ * § 7 · SCROLL REVEAL * ═════════════════════════════════════════════════════════════════ */ [data-ogaice-vibe-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--ogaice-vibe-t-slow) var(--ogaice-vibe-ease), transform var(--ogaice-vibe-t-slow) var(--ogaice-vibe-ease); will-change: opacity, transform; } [data-ogaice-vibe-reveal].is-revealed { opacity: 1; transform: none; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="1"] { transition-delay: 60ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="2"] { transition-delay: 120ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="3"] { transition-delay: 180ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="4"] { transition-delay: 240ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="5"] { transition-delay: 300ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="6"] { transition-delay: 360ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="7"] { transition-delay: 420ms; } [data-ogaice-vibe-reveal][data-ogaice-vibe-delay="8"] { transition-delay: 480ms; } /* ═════════════════════════════════════════════════════════════════ * § 8 · TOAST (cart add-to-cart feedback) * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-toast { position: fixed; bottom: 92px; left: 50%; transform: translate(-50%, 30px); background: linear-gradient(135deg, rgba(13,31,58,.95), rgba(20,40,73,.95)); border: 1px solid var(--ogaice-vibe-mint); color: var(--ogaice-vibe-paper); font-family: var(--ogaice-vibe-font-sans); font-size: 14px; padding: 12px 18px; border-radius: var(--ogaice-vibe-radius); box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(110,255,193,.3); opacity: 0; transition: opacity var(--ogaice-vibe-t-base), transform var(--ogaice-vibe-t-base); z-index: 9990; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: calc(100vw - 32px); } .ogaice-vibe-toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .ogaice-vibe-toast__icon { color: var(--ogaice-vibe-mint); margin-right: 6px; } .ogaice-vibe-toast__msg { font-weight: 500; } .ogaice-vibe-toast a { color: var(--ogaice-vibe-gold-bright); text-decoration: underline; margin-left: 10px; font-weight: 600; } /* keep toast above the dock when both visible on mobile */ @media (max-width: 900px) { .ogaice-vibe-toast { bottom: 86px; } } /* ═════════════════════════════════════════════════════════════════ * § 9 · MOBILE WEB-APP DOCK (bottom nav) * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-dock { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9985; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) 6px; background: linear-gradient(180deg, rgba(5,10,20,.85), rgba(5,10,20,.98)); border-top: 1px solid rgba(0, 229, 255, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); justify-content: space-around; } .ogaice-vibe-dock__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; text-decoration: none; color: var(--ogaice-vibe-paper); font-family: var(--ogaice-vibe-font-sans); font-size: 10px; letter-spacing: 0.04em; opacity: 0.7; position: relative; transition: opacity var(--ogaice-vibe-t-fast), color var(--ogaice-vibe-t-fast), transform var(--ogaice-vibe-t-fast); } .ogaice-vibe-dock__item:hover, .ogaice-vibe-dock__item:focus-visible { opacity: 1; color: var(--ogaice-vibe-gold-bright); transform: translateY(-2px); } .ogaice-vibe-dock__icon { font-size: 22px; line-height: 1; } .ogaice-vibe-dock__lbl { font-weight: 500; } .ogaice-vibe-dock__item--center .ogaice-vibe-dock__icon { background: linear-gradient(135deg, var(--ogaice-vibe-cyan), var(--ogaice-vibe-magenta)); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ogaice-vibe-navy-deep); box-shadow: 0 6px 18px rgba(0,229,255,.4); font-weight: 700; } .ogaice-vibe-wc-cart-count { position: absolute; top: 2px; right: 25%; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; font-family: var(--ogaice-vibe-font-mono); color: var(--ogaice-vibe-ink); background: var(--ogaice-vibe-gold-bright); border-radius: 9px; display: grid; place-items: center; } .ogaice-vibe-wc-cart-count[data-count="0"] { display: none; } @media (max-width: 900px) { .ogaice-vibe-dock { display: flex; } body.ogaice-vibe { padding-bottom: 76px; } } /* ═════════════════════════════════════════════════════════════════ * § 10 · MOBILE TUNING * ═════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .ogaice-vibe-bento { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ogaice-vibe-card { padding: 16px 14px; } .ogaice-vibe-card__num { font-size: 36px; } .ogaice-vibe-card__label { font-size: 11px; } .ogaice-vibe-hero { padding: 20px 16px; } .ogaice-vibe-hero__title { font-size: clamp(34px, 11vw, 56px); } .ogaice-vibe-hero__orbs { width: 80vw; height: 80vw; opacity: 0.35; } } /* ═════════════════════════════════════════════════════════════════ * § 11 · REDUCED MOTION + OPT-OUT * ═════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ogaice-vibe-hero__title { animation: none; } .ogaice-vibe-hero__orbs { animation: none; opacity: 0.25; } body.ogaice-vibe { animation: none; } body.ogaice-vibe::before { display: none; } .ogaice-vibe-ticker__track { animation: none; padding-left: 0; } [data-ogaice-vibe-reveal] { opacity: 1; transform: none; } } html[data-vibe="off"] body.ogaice-vibe { animation: none; background: var(--ogaice-vibe-navy); } html[data-vibe="off"] body.ogaice-vibe::before, html[data-vibe="off"] body.ogaice-vibe::after { display: none; } html[data-vibe="off"] .ogaice-vibe-card, html[data-vibe="off"] .ogaice-vibe-hero__title, html[data-vibe="off"] .ogaice-vibe-hero__orbs { animation: none; } /* ═════════════════════════════════════════════════════════════════ * § 12 · UTILITIES * ═════════════════════════════════════════════════════════════════ */ .ogaice-vibe-tone-cyan { color: var(--ogaice-vibe-cyan); } .ogaice-vibe-tone-mint { color: var(--ogaice-vibe-mint); } .ogaice-vibe-tone-gold { color: var(--ogaice-vibe-gold-bright); } .ogaice-vibe-tone-magenta { color: var(--ogaice-vibe-magenta); } .ogaice-vibe-mono { font-family: var(--ogaice-vibe-font-mono); } /* End of vibe.css · social@ogaice:G1/vibe [LIVE] $ */