/** * vibe.css — OGACE 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 OGA dark-navy + gold, never replaces it. * * Opt-out (HTML attribute) : * Opt-out (URL parameter) : ?vibe=off * * Respects prefers-reduced-motion (final §). * * social@ogace:G1/vibe [LIVE|AURORA|NEON|HUD|BENTO|KINETIC] $ */ /* ═════════════════════════════════════════════════════════════════ * § 0 · TOKENS * ═════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --ogv-navy-deep: #050a14; --ogv-navy: #0d1f3a; --ogv-navy-2: #142849; --ogv-gold: #c9a227; --ogv-gold-bright: #ffd84d; --ogv-paper: #d5e1f3; --ogv-ink: #050a14; /* Vibe accents */ --ogv-cyan: #00e5ff; --ogv-magenta: #ff4ad6; --ogv-mint: #6effc1; --ogv-warn: #ff7849; --ogv-grid: rgba(0, 229, 255, 0.08); /* Glow */ --ogv-glow-gold: 0 0 12px #ffd84d66, 0 0 32px #c9a22744; --ogv-glow-cyan: 0 0 10px #00e5ff88, 0 0 28px #00e5ff44; /* Motion */ --ogv-t-fast: 180ms; --ogv-t-base: 280ms; --ogv-t-slow: 600ms; --ogv-t-aurora: 14s; --ogv-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Layout */ --ogv-radius: 16px; --ogv-radius-pill: 999px; --ogv-gap: 18px; /* Type */ --ogv-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; --ogv-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ═════════════════════════════════════════════════════════════════ * § 1 · AURORA BACKDROP + SCANLINES * ═════════════════════════════════════════════════════════════════ */ body.ogv-vibe { background: radial-gradient(at 18% 12%, #142849 0px, transparent 42%), radial-gradient(at 85% 10%, #2a1247 0px, transparent 48%), radial-gradient(at 12% 90%, #062b2f 0px, transparent 50%), radial-gradient(at 78% 88%, #3a1e08 0px, transparent 45%), radial-gradient(at 50% 50%, #0d1f3a 0px, transparent 60%), var(--ogv-navy-deep); background-size: 200% 200%; animation: ogv-aurora-drift var(--ogv-t-aurora) ease-in-out infinite alternate; min-height: 100vh; color: var(--ogv-paper); font-family: var(--ogv-font-sans); } @keyframes ogv-aurora-drift { 0% { background-position: 0% 0%; filter: saturate(1.0) hue-rotate(0deg); } 50% { background-position: 100% 60%; filter: saturate(1.15) hue-rotate(-6deg); } 100% { background-position: 40% 100%; filter: saturate(1.05) hue-rotate(4deg); } } body.ogv-vibe::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(0, 229, 255, 0.03) 3px, transparent 4px ); mix-blend-mode: screen; } body.ogv-vibe::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); } /* ═════════════════════════════════════════════════════════════════ * § 2 · TERMINAL PROMPT * ═════════════════════════════════════════════════════════════════ */ .ogv-prompt { font-family: var(--ogv-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(--ogv-mint); position: relative; } .ogv-prompt::after { content: ''; display: inline-block; width: 8px; height: 1em; background: var(--ogv-gold-bright); box-shadow: 0 0 10px var(--ogv-gold-bright); animation: ogv-cursor-blink 1s steps(1) infinite; vertical-align: middle; } .ogv-prompt b { color: var(--ogv-mint); font-weight: 500; } .ogv-prompt .at { color: var(--ogv-paper); opacity: 0.55; } .ogv-prompt .h { color: var(--ogv-magenta); } .ogv-prompt .p { color: var(--ogv-cyan); } .ogv-prompt .s { color: var(--ogv-gold-bright); } @keyframes ogv-cursor-blink { 50% { opacity: 0; } } /* ═════════════════════════════════════════════════════════════════ * § 3 · BENTO CARDS + HUD CORNERS * ═════════════════════════════════════════════════════════════════ */ .ogv-bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ogv-gap); margin: 24px 0; } .ogv-card { --c: var(--ogv-card-accent, var(--ogv-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(--ogv-radius); overflow: hidden; isolation: isolate; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform var(--ogv-t-base) var(--ogv-ease), border-color var(--ogv-t-base) var(--ogv-ease), box-shadow var(--ogv-t-base) var(--ogv-ease); } .ogv-card::before, .ogv-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(--ogv-t-base) var(--ogv-ease); pointer-events: none; } .ogv-card::before { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; } .ogv-card::after { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; } .ogv-card > .ogv-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(--ogv-t-slow) var(--ogv-ease); } .ogv-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); } .ogv-card:hover > .ogv-sweep { transform: translateX(100%); } .ogv-card:hover::before, .ogv-card:hover::after { opacity: 1; } .ogv-card__num { display: block; font-family: var(--ogv-font-mono); font-size: clamp(38px, 5vw, 60px); font-weight: 700; line-height: 1; color: var(--ogv-gold-bright); text-shadow: var(--ogv-glow-gold); letter-spacing: -0.02em; } .ogv-card__label { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ogv-paper); opacity: 0.78; font-weight: 500; } .ogv-bento > .ogv-card:nth-child(8n+1) { --ogv-card-accent: var(--ogv-gold); } .ogv-bento > .ogv-card:nth-child(8n+2) { --ogv-card-accent: var(--ogv-cyan); } .ogv-bento > .ogv-card:nth-child(8n+3) { --ogv-card-accent: var(--ogv-magenta); } .ogv-bento > .ogv-card:nth-child(8n+4) { --ogv-card-accent: var(--ogv-mint); } .ogv-bento > .ogv-card:nth-child(8n+5) { --ogv-card-accent: var(--ogv-gold); } .ogv-bento > .ogv-card:nth-child(8n+6) { --ogv-card-accent: var(--ogv-warn); } .ogv-bento > .ogv-card:nth-child(8n+7) { --ogv-card-accent: var(--ogv-cyan); } .ogv-bento > .ogv-card:nth-child(8n+8) { --ogv-card-accent: var(--ogv-magenta); } /* ═════════════════════════════════════════════════════════════════ * § 4 · HERO + KINETIC TYPOGRAPHY * ═════════════════════════════════════════════════════════════════ */ .ogv-hero { position: relative; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px); max-width: 1200px; margin: 0 auto; overflow: hidden; } .ogv-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--ogv-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ogv-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(--ogv-radius-pill); margin-bottom: 18px; } .ogv-hero__eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--ogv-mint); box-shadow: 0 0 8px var(--ogv-mint); border-radius: 50%; animation: ogv-pulse 2s ease-in-out infinite; } @keyframes ogv-pulse { 50% { transform: scale(1.6); opacity: 0.4; } } .ogv-hero__title { font-family: var(--ogv-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(--ogv-gold-bright) 32%, #fff 55%, var(--ogv-cyan) 85%, var(--ogv-magenta) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ogv-text-shimmer 9s ease-in-out infinite; } @keyframes ogv-text-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ogv-hero__title small { display: block; font-size: 0.32em; font-weight: 600; letter-spacing: 0.06em; color: var(--ogv-cyan); opacity: 0.85; margin-top: 8px; -webkit-text-fill-color: var(--ogv-cyan); } .ogv-hero__sub { font-family: var(--ogv-font-sans); font-size: clamp(15px, 1.4vw, 19px); color: var(--ogv-paper); opacity: 0.82; max-width: 60ch; margin: 0 0 18px 0; } .ogv-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(--ogv-magenta) 0, transparent 35%), radial-gradient(circle at 70% 60%, var(--ogv-cyan) 0, transparent 38%), radial-gradient(circle at 50% 80%, var(--ogv-gold) 0, transparent 30%); filter: blur(70px) saturate(1.3); opacity: 0.5; animation: ogv-orb-rotate 22s linear infinite; } @keyframes ogv-orb-rotate { to { transform: rotate(360deg); } } /* ═════════════════════════════════════════════════════════════════ * § 5 · PILLS · CTA BUTTONS * ═════════════════════════════════════════════════════════════════ */ .ogv-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .ogv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--ogv-paper); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ogv-radius-pill); transition: color var(--ogv-t-fast), border-color var(--ogv-t-fast), background var(--ogv-t-fast), transform var(--ogv-t-fast); } .ogv-pill:hover { color: var(--ogv-gold-bright); border-color: var(--ogv-gold); background: rgba(201, 162, 39, .08); transform: translateY(-1px); } .ogv-pill--mint { color: var(--ogv-mint); border-color: rgba(110, 255, 193, .3); } .ogv-pill--cyan { color: var(--ogv-cyan); border-color: rgba(0, 229, 255, .3); } .ogv-pill--magenta { color: var(--ogv-magenta); border-color: rgba(255, 74, 214, .3); } .ogv-btn { --c: var(--ogv-gold-bright); display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-family: var(--ogv-font-sans); font-weight: 600; font-size: 14px; color: var(--ogv-ink); background: var(--c); border: 1px solid var(--c); border-radius: var(--ogv-radius-pill); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--ogv-t-fast), box-shadow var(--ogv-t-fast); } .ogv-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c), 0 6px 28px color-mix(in oklab, var(--c) 40%, transparent); } .ogv-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(--ogv-ease); pointer-events: none; } .ogv-btn:hover::before { transform: translateX(100%); } .ogv-btn--ghost { --c: var(--ogv-cyan); background: transparent; color: var(--c); } .ogv-btn--ghost:hover { background: color-mix(in oklab, var(--c) 12%, transparent); } /* ═════════════════════════════════════════════════════════════════ * § 6 · SECTION HEADERS · TICKER · GLITCH HOVER * ═════════════════════════════════════════════════════════════════ */ .ogv-section-title { font-family: var(--ogv-font-sans); font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; margin: 32px 0 14px 0; color: var(--ogv-paper); display: flex; align-items: baseline; gap: 12px; } .ogv-section-title::before { content: ''; flex: 0 0 26px; height: 2px; background: linear-gradient(90deg, var(--ogv-gold) 0%, transparent 100%); transform: translateY(-6px); } .ogv-section-title small { font-family: var(--ogv-font-mono); font-size: 11px; font-weight: 400; color: var(--ogv-cyan); opacity: 0.6; letter-spacing: 0.1em; text-transform: uppercase; } .ogv-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(--ogv-font-mono); font-size: 12px; padding: 7px 0; color: var(--ogv-paper); white-space: nowrap; } .ogv-ticker__track { display: inline-flex; gap: 36px; padding-left: 100%; animation: ogv-ticker-roll 40s linear infinite; } .ogv-ticker__track > span { display: inline-flex; align-items: center; gap: 6px; } .ogv-ticker__track > span::before { content: '◆'; color: var(--ogv-cyan); font-size: 8px; } @keyframes ogv-ticker-roll { to { transform: translateX(-100%); } } .ogv-glitch { position: relative; display: inline-block; } .ogv-glitch::before, .ogv-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; transition: opacity var(--ogv-t-fast); } .ogv-glitch::before { color: var(--ogv-cyan); transform: translate(-1px, -1px); } .ogv-glitch::after { color: var(--ogv-magenta); transform: translate( 1px, 1px); } .ogv-glitch:hover::before, .ogv-glitch:hover::after { opacity: 0.7; animation: ogv-glitch-shake .35s steps(4) 1; } @keyframes ogv-glitch-shake { 25% { transform: translate( 1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate( 1px, 1px); } } /* ═════════════════════════════════════════════════════════════════ * § 7 · SCROLL REVEAL * ═════════════════════════════════════════════════════════════════ */ [data-ogv-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--ogv-t-slow) var(--ogv-ease), transform var(--ogv-t-slow) var(--ogv-ease); will-change: opacity, transform; } [data-ogv-reveal].is-revealed { opacity: 1; transform: none; } [data-ogv-reveal][data-ogv-delay="1"] { transition-delay: 60ms; } [data-ogv-reveal][data-ogv-delay="2"] { transition-delay: 120ms; } [data-ogv-reveal][data-ogv-delay="3"] { transition-delay: 180ms; } [data-ogv-reveal][data-ogv-delay="4"] { transition-delay: 240ms; } [data-ogv-reveal][data-ogv-delay="5"] { transition-delay: 300ms; } [data-ogv-reveal][data-ogv-delay="6"] { transition-delay: 360ms; } [data-ogv-reveal][data-ogv-delay="7"] { transition-delay: 420ms; } [data-ogv-reveal][data-ogv-delay="8"] { transition-delay: 480ms; } /* ═════════════════════════════════════════════════════════════════ * § 8 · TOAST (cart add-to-cart feedback) * ═════════════════════════════════════════════════════════════════ */ .ogv-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(--ogv-mint); color: var(--ogv-paper); font-family: var(--ogv-font-sans); font-size: 14px; padding: 12px 18px; border-radius: var(--ogv-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(--ogv-t-base), transform var(--ogv-t-base); z-index: 9990; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: calc(100vw - 32px); } .ogv-toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .ogv-toast__icon { color: var(--ogv-mint); margin-right: 6px; } .ogv-toast__msg { font-weight: 500; } .ogv-toast a { color: var(--ogv-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) { .ogv-toast { bottom: 86px; } } /* ═════════════════════════════════════════════════════════════════ * § 9 · MOBILE WEB-APP DOCK (bottom nav) * ═════════════════════════════════════════════════════════════════ */ .ogv-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; } .ogv-dock__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; text-decoration: none; color: var(--ogv-paper); font-family: var(--ogv-font-sans); font-size: 10px; letter-spacing: 0.04em; opacity: 0.7; position: relative; transition: opacity var(--ogv-t-fast), color var(--ogv-t-fast), transform var(--ogv-t-fast); } .ogv-dock__item:hover, .ogv-dock__item:focus-visible { opacity: 1; color: var(--ogv-gold-bright); transform: translateY(-2px); } .ogv-dock__icon { font-size: 22px; line-height: 1; } .ogv-dock__lbl { font-weight: 500; } .ogv-dock__item--center .ogv-dock__icon { background: linear-gradient(135deg, var(--ogv-cyan), var(--ogv-magenta)); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ogv-navy-deep); box-shadow: 0 6px 18px rgba(0,229,255,.4); font-weight: 700; } .ogv-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(--ogv-font-mono); color: var(--ogv-ink); background: var(--ogv-gold-bright); border-radius: 9px; display: grid; place-items: center; } .ogv-wc-cart-count[data-count="0"] { display: none; } @media (max-width: 900px) { .ogv-dock { display: flex; } body.ogv-vibe { padding-bottom: 76px; } } /* ═════════════════════════════════════════════════════════════════ * § 10 · MOBILE TUNING * ═════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .ogv-bento { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ogv-card { padding: 16px 14px; } .ogv-card__num { font-size: 36px; } .ogv-card__label { font-size: 11px; } .ogv-hero { padding: 20px 16px; } .ogv-hero__title { font-size: clamp(34px, 11vw, 56px); } .ogv-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; } .ogv-hero__title { animation: none; } .ogv-hero__orbs { animation: none; opacity: 0.25; } body.ogv-vibe { animation: none; } body.ogv-vibe::before { display: none; } .ogv-ticker__track { animation: none; padding-left: 0; } [data-ogv-reveal] { opacity: 1; transform: none; } } html[data-vibe="off"] body.ogv-vibe { animation: none; background: var(--ogv-navy); } html[data-vibe="off"] body.ogv-vibe::before, html[data-vibe="off"] body.ogv-vibe::after { display: none; } html[data-vibe="off"] .ogv-card, html[data-vibe="off"] .ogv-hero__title, html[data-vibe="off"] .ogv-hero__orbs { animation: none; } /* ═════════════════════════════════════════════════════════════════ * § 12 · UTILITIES * ═════════════════════════════════════════════════════════════════ */ .ogv-tone-cyan { color: var(--ogv-cyan); } .ogv-tone-mint { color: var(--ogv-mint); } .ogv-tone-gold { color: var(--ogv-gold-bright); } .ogv-tone-magenta { color: var(--ogv-magenta); } .ogv-mono { font-family: var(--ogv-font-mono); } /* End of vibe.css · social@ogace:G1/vibe [LIVE] $ */