/* ================================================================ RONNIEVERSE THEME ENGINE assets/ronnieverse.css Version: V80C RonnieVerse Theme Engine HOW TO USE ON ANY PAGE: 1. 2. Add data-rv-bg="/assets/rv-images/RV-00X_Page.png" to 3. Add class="rv-page" to 4. Use rv-* component classes in your HTML Every RonnieVerse page automatically gets: - Hero artwork underlay (set via data-rv-bg) - Dark gradient overlay (readability layer) - Glass UI cards - Neon glow effects - Shared typography - Shared buttons - Shared spacing - Shared animations - Particle canvas (injected by ronnieverse.js) DO NOT EDIT app.css. This file is additive only. ================================================================ */ /* ── Google Fonts import (Inter + JetBrains Mono) ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap'); /* ================================================================ DESIGN TOKENS ================================================================ */ :root { /* Palette */ --rv-bg: #020617; --rv-cyan: #22d3ee; --rv-cyan-dim: rgba(34,211,238,0.14); --rv-cyan-glow: rgba(34,211,238,0.22); --rv-purple: #a855f7; --rv-purple-dim: rgba(168,85,247,0.14); --rv-purple-glow: rgba(168,85,247,0.22); --rv-blue: #3b82f6; --rv-green: #4ade80; --rv-green-dim: rgba(74,222,128,0.12); --rv-amber: #fbbf24; --rv-amber-dim: rgba(251,191,36,0.12); --rv-red: #f87171; --rv-gold: #f59e0b; --rv-gold-dim: rgba(245,158,11,0.12); /* Glass surfaces */ --rv-glass: rgba(4,8,28,0.68); --rv-glass-light: rgba(8,16,48,0.55); --rv-glass-heavy: rgba(2,4,18,0.85); /* Borders */ --rv-border: rgba(34,211,238,0.18); --rv-border-mid: rgba(34,211,238,0.32); --rv-border-bright: rgba(34,211,238,0.55); /* Typography */ --rv-text: #f1f5f9; --rv-muted: #94a3b8; --rv-label: #67e8f9; --rv-font: 'Inter', 'Segoe UI', Arial, sans-serif; --rv-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace; /* Radius */ --rv-radius-sm: 10px; --rv-radius: 16px; --rv-radius-lg: 22px; --rv-radius-xl: 28px; /* Spacing */ --rv-gap: 16px; --rv-gap-lg: 24px; /* Shadows */ --rv-shadow: 0 8px 40px rgba(0,0,0,0.4); --rv-glow-cyan: 0 0 30px rgba(34,211,238,0.20); --rv-glow-purple: 0 0 30px rgba(168,85,247,0.20); /* Transitions */ --rv-transition: all 0.22s ease; --rv-transition-fast: all 0.14s ease; /* Overlay gradient (over hero artwork) — gentle, not blackout */ --rv-overlay: linear-gradient(180deg, rgba(2,6,23,0.45) 0%, rgba(2,6,23,0.38) 30%, rgba(4,10,35,0.45) 65%, rgba(2,6,23,0.60) 100% ), radial-gradient(ellipse 80% 50% at 12% 0%, rgba(168,85,247,0.10) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 88% 5%, rgba(34,211,238,0.08) 0%, transparent 50%); } /* ================================================================ PAGE FOUNDATION (.rv-page on ) ================================================================ */ .rv-page { margin: 0; padding: 0; font-family: var(--rv-font); background-color: var(--rv-bg); color: var(--rv-text); min-height: 100vh; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Hero artwork underlay — set via JS from data-rv-bg attribute */ .rv-page .rv-hero-bg { position: fixed; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; z-index: 0; filter: brightness(0.62) saturate(1.15); opacity: 0.65; } /* Dark gradient overlay over the artwork */ .rv-page .rv-overlay { position: fixed; inset: 0; background: var(--rv-overlay); pointer-events: none; z-index: 1; } /* Particle canvas layer */ #rv-particles { position: fixed; inset: 0; pointer-events: none; z-index: 2; } /* All content sits above bg, overlay, particles */ .rv-wrap { position: relative; z-index: 3; max-width: 1340px; margin: 0 auto; padding: 0 24px 80px; } /* ================================================================ COMPONENT: rv-header ================================================================ */ .rv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 28px 0 22px; border-bottom: 1px solid var(--rv-border); margin-bottom: 26px; flex-wrap: wrap; } .rv-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rv-label); margin-bottom: 6px; display: block; } .rv-page-title { font-size: 30px; font-weight: 900; color: #fff; margin: 0 0 4px; letter-spacing: -0.025em; line-height: 1.1; } .rv-page-title .rv-gradient-text { background: linear-gradient(135deg, var(--rv-cyan), var(--rv-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .rv-page-subtitle { color: var(--rv-muted); font-size: 14px; margin: 0; line-height: 1.5; } .rv-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; } /* ================================================================ COMPONENT: rv-nav-link (top nav buttons) ================================================================ */ .rv-nav-link { color: var(--rv-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--rv-radius-sm); border: 1px solid var(--rv-border); background: var(--rv-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: var(--rv-transition); white-space: nowrap; } .rv-nav-link:hover { color: var(--rv-cyan); border-color: var(--rv-border-mid); background: var(--rv-cyan-dim); box-shadow: var(--rv-glow-cyan); } .rv-nav-link.active { color: #fff; border-color: var(--rv-border-mid); background: var(--rv-cyan-dim); } /* ================================================================ COMPONENT: rv-status-badge (e.g. "Inbound Active") ================================================================ */ .rv-status-badge { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--rv-green); background: var(--rv-green-dim); border: 1px solid rgba(74,222,128,0.25); border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .rv-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--rv-green); flex-shrink: 0; animation: rv-pulse-ring 2.2s ease-out infinite; } @keyframes rv-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.55); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } /* ================================================================ COMPONENT: rv-glass-card The core card primitive used everywhere. ================================================================ */ .rv-glass-card { background: var(--rv-glass); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--rv-shadow), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; overflow: hidden; transition: var(--rv-transition); padding: 22px; } /* Top neon edge line */ .rv-glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rv-cyan-dim), rgba(168,85,247,0.3), transparent); opacity: 0.8; } .rv-glass-card:hover { border-color: var(--rv-border-mid); box-shadow: var(--rv-shadow), var(--rv-glow-cyan), inset 0 1px 0 rgba(255,255,255,0.08); transform: translateY(-2px); } /* Card size variants */ .rv-glass-card.rv-card-sm { padding: 14px 16px; border-radius: var(--rv-radius-sm); } .rv-glass-card.rv-card-lg { padding: 28px 30px; border-radius: var(--rv-radius-lg); } .rv-glass-card.rv-card-xl { padding: 34px 36px; border-radius: var(--rv-radius-xl); } /* Card accent top bars */ .rv-glass-card.rv-accent-cyan::before { background: var(--rv-cyan); opacity: 0.8; height: 2px; } .rv-glass-card.rv-accent-purple::before { background: var(--rv-purple); opacity: 0.8; height: 2px; } .rv-glass-card.rv-accent-green::before { background: var(--rv-green); opacity: 0.8; height: 2px; } .rv-glass-card.rv-accent-amber::before { background: var(--rv-amber); opacity: 0.8; height: 2px; } .rv-glass-card.rv-accent-gold::before { background: var(--rv-gold); opacity: 0.8; height: 2px; } .rv-glass-card.rv-accent-gradient::before { background: linear-gradient(90deg, var(--rv-cyan), var(--rv-purple)); opacity: 1; height: 2px; } /* No-hover variant */ .rv-glass-card.rv-no-hover:hover { transform: none; border-color: var(--rv-border); box-shadow: var(--rv-shadow), inset 0 1px 0 rgba(255,255,255,0.05); } /* ================================================================ COMPONENT: rv-stat-card (metric display cards) ================================================================ */ .rv-stat-card { /* extends rv-glass-card */ } .rv-stat-icon { font-size: 20px; margin-bottom: 10px; display: block; opacity: 0.85; } .rv-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-muted); margin-bottom: 6px; display: block; } .rv-stat-value { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1; display: block; font-family: var(--rv-mono); } .rv-stat-value.rv-stat-lg { font-size: 48px; } .rv-stat-value.rv-stat-sm { font-size: 26px; } .rv-stat-sub { font-size: 11px; color: var(--rv-muted); margin-top: 7px; display: block; line-height: 1.4; } .rv-stat-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; } .rv-stat-delta.up { color: var(--rv-green); } .rv-stat-delta.down { color: var(--rv-red); } .rv-stat-delta.flat { color: var(--rv-muted); } /* ================================================================ COMPONENT: rv-panel (content panels — larger sections) ================================================================ */ .rv-panel { background: var(--rv-glass); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--rv-shadow), inset 0 1px 0 rgba(255,255,255,0.04); padding: 24px; position: relative; overflow: hidden; margin-bottom: 18px; transition: border-color 0.22s, box-shadow 0.22s; } .rv-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), rgba(168,85,247,0.25), transparent); } .rv-panel:hover { border-color: var(--rv-border-mid); box-shadow: var(--rv-shadow), 0 0 50px rgba(34,211,238,0.08); } .rv-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; } .rv-panel-title { font-size: 15px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; } .rv-panel-subtitle { font-size: 13px; color: var(--rv-muted); margin: 0; } .rv-panel-action { font-size: 12px; font-weight: 700; color: var(--rv-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--rv-border); border-radius: 8px; padding: 5px 12px; white-space: nowrap; } /* ================================================================ COMPONENT: rv-section-label (section dividers) ================================================================ */ .rv-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rv-muted); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .rv-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rv-border); } /* ================================================================ LAYOUT GRIDS ================================================================ */ .rv-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--rv-gap); } .rv-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--rv-gap); } .rv-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--rv-gap); } .rv-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--rv-gap); } .rv-grid-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--rv-gap); } .rv-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--rv-gap); } .rv-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--rv-gap); } .rv-grid-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: var(--rv-gap); } .rv-grid-1-3 { display: grid; grid-template-columns: 1fr 3fr; gap: var(--rv-gap); } .rv-grid-2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--rv-gap); } .rv-mb-sm { margin-bottom: 14px; } .rv-mb { margin-bottom: 20px; } .rv-mb-lg { margin-bottom: 28px; } /* Sidebar layout (left nav + content) */ .rv-layout-sidebar { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; } /* ================================================================ COMPONENT: rv-btn (buttons) ================================================================ */ .rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--rv-radius-sm); border: none; font-family: var(--rv-font); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: var(--rv-transition); white-space: nowrap; position: relative; overflow: hidden; } .rv-btn-primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; box-shadow: 0 0 22px rgba(37,99,235,0.28); } .rv-btn-primary:hover { box-shadow: 0 0 40px rgba(37,99,235,0.50), 0 0 20px rgba(124,58,237,0.30); transform: translateY(-2px); filter: brightness(1.08); } .rv-btn-secondary { background: rgba(14,22,55,0.80); color: var(--rv-muted); border: 1px solid var(--rv-border); backdrop-filter: blur(10px); } .rv-btn-secondary:hover { border-color: var(--rv-border-mid); color: #fff; box-shadow: var(--rv-glow-cyan); } .rv-btn-ghost { background: transparent; color: var(--rv-cyan); border: 1px solid var(--rv-border-mid); } .rv-btn-ghost:hover { background: var(--rv-cyan-dim); box-shadow: var(--rv-glow-cyan); transform: translateY(-1px); } .rv-btn-danger { background: linear-gradient(135deg, #991b1b, #7f1d1d); color: #fff; } .rv-btn-danger:hover { filter: brightness(1.15); transform: translateY(-1px); } .rv-btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 8px; } .rv-btn-lg { padding: 14px 28px; font-size: 15px; border-radius: 14px; } .rv-btn-full { width: 100%; } /* ================================================================ COMPONENT: rv-badge ================================================================ */ .rv-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; padding: 3px 9px; } .rv-badge-cyan { color: var(--rv-cyan); background: var(--rv-cyan-dim); border: 1px solid rgba(34,211,238,0.25); } .rv-badge-purple { color: var(--rv-purple); background: var(--rv-purple-dim); border: 1px solid rgba(168,85,247,0.25); } .rv-badge-green { color: var(--rv-green); background: var(--rv-green-dim); border: 1px solid rgba(74,222,128,0.25); } .rv-badge-amber { color: var(--rv-amber); background: var(--rv-amber-dim); border: 1px solid rgba(251,191,36,0.25); } .rv-badge-gold { color: var(--rv-gold); background: var(--rv-gold-dim); border: 1px solid rgba(245,158,11,0.25); } .rv-badge-red { color: var(--rv-red); background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); } .rv-badge-muted { color: var(--rv-muted); background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.20); } .rv-badge-pill { border-radius: 999px; } /* ================================================================ COMPONENT: rv-coming-soon (placeholder sections) ================================================================ */ .rv-coming-soon-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 12px; border: 1px dashed rgba(34,211,238,0.18); border-radius: var(--rv-radius); background: rgba(4,8,28,0.40); } .rv-coming-soon-icon { font-size: 40px; opacity: 0.5; } .rv-coming-soon-title { font-size: 16px; font-weight: 800; color: var(--rv-text); margin: 0; } .rv-coming-soon-desc { font-size: 13px; color: var(--rv-muted); max-width: 360px; line-height: 1.6; margin: 0; } /* ================================================================ COMPONENT: rv-activity-item (feed rows) ================================================================ */ .rv-activity-list { display: flex; flex-direction: column; } .rv-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(34,211,238,0.07); animation: rv-fade-up 0.28s ease both; } .rv-activity-item:last-child { border-bottom: none; } .rv-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rv-cyan); margin-top: 5px; flex-shrink: 0; } .rv-activity-dot.purple { background: var(--rv-purple); } .rv-activity-dot.green { background: var(--rv-green); } .rv-activity-dot.amber { background: var(--rv-amber); } .rv-activity-dot.red { background: var(--rv-red); } .rv-activity-text { flex: 1; font-size: 13px; color: var(--rv-text); line-height: 1.45; } .rv-activity-time { font-size: 11px; color: var(--rv-muted); font-family: var(--rv-mono); flex-shrink: 0; padding-top: 1px; } /* ================================================================ COMPONENT: rv-worker-card (AI worker rows) ================================================================ */ .rv-worker-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(8,16,48,0.60); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); transition: var(--rv-transition); } .rv-worker-card:hover { border-color: var(--rv-border-mid); box-shadow: var(--rv-glow-cyan); } .rv-worker-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--rv-cyan), var(--rv-purple)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; } .rv-worker-avatar img { width: 100%; height: 100%; object-fit: cover; } .rv-worker-info { flex: 1; min-width: 0; } .rv-worker-name { font-size: 13px; font-weight: 700; color: #fff; display: block; } .rv-worker-role { font-size: 11px; color: var(--rv-muted); display: block; } /* ================================================================ TYPOGRAPHY UTILITIES ================================================================ */ .rv-text-white { color: #fff !important; } .rv-text-cyan { color: var(--rv-cyan) !important; } .rv-text-purple { color: var(--rv-purple) !important; } .rv-text-green { color: var(--rv-green) !important; } .rv-text-amber { color: var(--rv-amber) !important; } .rv-text-muted { color: var(--rv-muted) !important; } .rv-text-gold { color: var(--rv-gold) !important; } .rv-text-red { color: var(--rv-red) !important; } .rv-mono { font-family: var(--rv-mono); } .rv-weight-900 { font-weight: 900; } .rv-weight-700 { font-weight: 700; } /* ================================================================ INPUTS & FORMS ================================================================ */ .rv-input, .rv-textarea, .rv-select { width: 100%; background: rgba(8,15,40,0.80); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); color: var(--rv-text); padding: 11px 14px; font-size: 14px; font-family: var(--rv-font); transition: var(--rv-transition); margin-bottom: 12px; } .rv-input:focus, .rv-textarea:focus, .rv-select:focus { outline: none; border-color: var(--rv-border-bright); box-shadow: 0 0 0 3px var(--rv-cyan-dim); } .rv-input::placeholder, .rv-textarea::placeholder { color: #334155; } .rv-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--rv-muted); margin: 10px 0 6px; } /* ================================================================ TABLES ================================================================ */ .rv-table-wrap { overflow-x: auto; border-radius: var(--rv-radius-sm); } .rv-table { width: 100%; border-collapse: collapse; } .rv-table th { background: rgba(8,15,40,0.90); color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--rv-border); text-align: left; } .rv-table td { border-bottom: 1px solid rgba(34,211,238,0.07); color: #cbd5e1; padding: 11px 14px; font-size: 13px; vertical-align: top; } .rv-table tr:last-child td { border-bottom: none; } /* ================================================================ NOTICE / ALERT BOXES ================================================================ */ .rv-notice { background: rgba(10,20,60,0.70); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); padding: 12px 18px; color: #bfdbfe; backdrop-filter: blur(10px); font-size: 14px; } .rv-notice-success { border-color: rgba(74,222,128,0.30); color: #86efac; background: rgba(5,30,20,0.70); } .rv-notice-warning { border-color: rgba(251,191,36,0.30); color: #fde68a; background: rgba(40,30,5,0.70); } .rv-notice-error { border-color: rgba(248,113,113,0.30); color: #fca5a5; background: rgba(40,5,5,0.70); } /* ================================================================ SIDEBAR NAV (used in themed environments) ================================================================ */ .rv-sidebar { background: var(--rv-glass-heavy); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-lg); backdrop-filter: blur(20px); padding: 20px 14px; position: sticky; top: 20px; } .rv-sidebar-brand { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 20px; padding: 0 6px; letter-spacing: -0.02em; } .rv-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--rv-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: var(--rv-transition-fast); cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .rv-sidebar-item:hover { background: var(--rv-cyan-dim); color: var(--rv-cyan); } .rv-sidebar-item.active { background: var(--rv-cyan-dim); color: var(--rv-cyan); border: 1px solid rgba(34,211,238,0.22); } .rv-sidebar-item .rv-sidebar-icon { font-size: 16px; flex-shrink: 0; } .rv-sidebar-section { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(148,163,184,0.45); padding: 14px 12px 5px; } /* ================================================================ ANIMATIONS ================================================================ */ @keyframes rv-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes rv-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rv-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .rv-animate-in { animation: rv-fade-up 0.28s ease both; } .rv-animate-in-delay-1 { animation: rv-fade-up 0.28s 0.05s ease both; } .rv-animate-in-delay-2 { animation: rv-fade-up 0.28s 0.10s ease both; } .rv-animate-in-delay-3 { animation: rv-fade-up 0.28s 0.15s ease both; } /* ================================================================ CLOCK / UTILITY BAR ================================================================ */ .rv-util-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .rv-clock { font-family: var(--rv-mono); font-size: 13px; color: var(--rv-muted); } /* ================================================================ FOOTER ================================================================ */ .rv-footer { border-top: 1px solid var(--rv-border); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .rv-footer-text { font-size: 12px; color: var(--rv-muted); } .rv-footer-version { font-size: 11px; font-family: var(--rv-mono); color: rgba(148,163,184,0.40); } /* ================================================================ RESPONSIVE BREAKPOINTS ================================================================ */ @media (max-width: 1100px) { .rv-grid-6 { grid-template-columns: repeat(3,1fr); } .rv-grid-5 { grid-template-columns: repeat(3,1fr); } .rv-grid-4 { grid-template-columns: repeat(2,1fr); } .rv-grid-2-1-1 { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .rv-layout-sidebar { grid-template-columns: 1fr; } .rv-sidebar { position: static; } .rv-grid-3 { grid-template-columns: repeat(2,1fr); } .rv-grid-2-1 { grid-template-columns: 1fr; } .rv-grid-1-2 { grid-template-columns: 1fr; } .rv-grid-3-1 { grid-template-columns: 1fr; } .rv-grid-1-3 { grid-template-columns: 1fr; } .rv-page-title { font-size: 24px; } } @media (max-width: 600px) { .rv-grid-2 { grid-template-columns: 1fr; } .rv-grid-3 { grid-template-columns: 1fr; } .rv-grid-4 { grid-template-columns: 1fr; } .rv-grid-6 { grid-template-columns: repeat(2,1fr); } .rv-wrap { padding: 0 14px 60px; } .rv-header { padding: 18px 0 16px; } .rv-stat-value { font-size: 28px; } } /* ================================================================ V80D ADDITIONS — RonnieVerse Rebirth Appended to ronnieverse.css — does not break V80C styles. ================================================================ */ /* ── Viewport lock (no scroll pages) ── */ .rv-viewport { overflow: hidden; height: 100vh; max-height: 100vh; } .rv-viewport .rv-wrap { height: 100vh; max-height: 100vh; overflow: hidden; padding-bottom: 0; display: flex; flex-direction: column; } /* ================================================================ ATMOSPHERIC BACKGROUND SYSTEM The character image is placed as atmosphere on one side. It is NEVER placed behind the full interface. The UI side is kept clean and dark. ================================================================ */ /* Base hero bg — visible artwork underlay */ .rv-hero-bg { position: fixed; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 0; /* Approved values: visible but text stays readable */ filter: brightness(0.62) saturate(1.15); opacity: 0.65; transition: opacity 0.4s ease; } /* Position variants — no masking, no cropping */ .rv-hero-bg--right { background-position: center center; } .rv-hero-bg--left { background-position: center center; } .rv-hero-bg--center { background-position: center center; } /* Gentle overlay — artwork shows through, text stays readable */ .rv-overlay { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,0.45) 0%, rgba(2,6,23,0.38) 40%, rgba(2,6,23,0.55) 100% ); pointer-events: none; z-index: 1; } /* Directional variants — same gentle treatment regardless of character position */ .rv-hero-bg--right ~ .rv-overlay { background: linear-gradient(180deg, rgba(2,6,23,0.50) 0%, rgba(2,6,23,0.40) 40%, rgba(2,6,23,0.58) 100% ); } .rv-hero-bg--left ~ .rv-overlay { background: linear-gradient(180deg, rgba(2,6,23,0.50) 0%, rgba(2,6,23,0.40) 40%, rgba(2,6,23,0.58) 100% ); } /* ================================================================ FULL-VIEWPORT COMMAND BRIDGE LAYOUT (Mission Control) ================================================================ */ .rv-bridge { display: grid; grid-template-columns: 240px 1fr 260px; grid-template-rows: 64px 1fr 80px; gap: 0; height: calc(100vh - 0px); width: 100%; overflow: hidden; } .rv-bridge-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--rv-border); background: rgba(2,4,18,0.80); backdrop-filter: blur(16px); gap: 16px; flex-shrink: 0; } .rv-bridge-left { grid-column: 1; grid-row: 2; padding: 20px 18px; border-right: 1px solid var(--rv-border); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: rgba(2,4,18,0.55); backdrop-filter: blur(12px); } .rv-bridge-center { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; position: relative; } .rv-bridge-right { grid-column: 3; grid-row: 2; padding: 20px 18px; border-left: 1px solid var(--rv-border); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: rgba(2,4,18,0.55); backdrop-filter: blur(12px); } .rv-bridge-footer { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-top: 1px solid var(--rv-border); background: rgba(2,4,18,0.80); backdrop-filter: blur(12px); } .rv-bridge-footer-cell { display: flex; flex-direction: column; justify-content: center; padding: 12px 20px; border-right: 1px solid var(--rv-border); gap: 3px; } .rv-bridge-footer-cell:last-child { border-right: none; } .rv-bridge-footer-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-muted); } .rv-bridge-footer-value { font-size: 22px; font-weight: 900; font-family: var(--rv-mono); color: #fff; letter-spacing: -0.03em; } /* ── Bridge nav items ── */ .rv-bridge-nav-section { font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(148,163,184,0.40); padding: 10px 8px 4px; margin-top: 4px; } .rv-bridge-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--rv-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: var(--rv-transition-fast); cursor: pointer; border: 1px solid transparent; background: none; width: 100%; text-align: left; position: relative; } .rv-bridge-nav-item:hover { background: var(--rv-cyan-dim); color: var(--rv-cyan); border-color: rgba(34,211,238,0.18); } .rv-bridge-nav-item.active { background: var(--rv-cyan-dim); color: var(--rv-cyan); border-color: rgba(34,211,238,0.25); } .rv-bridge-nav-item .rv-bridge-nav-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; } .rv-bridge-nav-badge { margin-left: auto; font-size: 9px; font-weight: 700; color: var(--rv-amber); background: var(--rv-amber-dim); border: 1px solid rgba(251,191,36,0.22); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.06em; } /* ── Bridge center: Ronnie presence ── */ .rv-bridge-ronnie { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; } .rv-ronnie-presence { font-size: 80px; filter: drop-shadow(0 0 40px rgba(34,211,238,0.45)) drop-shadow(0 0 80px rgba(168,85,247,0.25)); animation: rv-float 6s ease-in-out infinite; line-height: 1; } @keyframes rv-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* Animated globe under Ronnie */ .rv-globe { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(ellipse 60% 70% at 35% 40%, rgba(34,211,238,0.22) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 70% 70%, rgba(168,85,247,0.18) 0%, transparent 55%), radial-gradient(circle, rgba(4,15,50,0.90) 0%, rgba(2,6,23,0.95) 100%); border: 1px solid rgba(34,211,238,0.25); box-shadow: 0 0 60px rgba(34,211,238,0.18), 0 0 120px rgba(168,85,247,0.10), inset 0 0 40px rgba(34,211,238,0.08); position: relative; overflow: hidden; animation: rv-globe-spin 20s linear infinite; } @keyframes rv-globe-spin { 0% { box-shadow: 0 0 60px rgba(34,211,238,0.18), 0 0 120px rgba(168,85,247,0.10); } 50% { box-shadow: 0 0 80px rgba(168,85,247,0.22), 0 0 140px rgba(34,211,238,0.12); } 100% { box-shadow: 0 0 60px rgba(34,211,238,0.18), 0 0 120px rgba(168,85,247,0.10); } } /* Grid lines on globe */ .rv-globe::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(34,211,238,0.06) 29px), repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(34,211,238,0.06) 29px); border-radius: 50%; } .rv-globe::after { content: ''; position: absolute; inset: -30px; border-radius: 50%; border: 1px solid rgba(34,211,238,0.10); animation: rv-ring-spin 8s linear infinite; } @keyframes rv-ring-spin { from { transform: rotate(0deg) scaleY(0.3); } to { transform: rotate(360deg) scaleY(0.3); } } /* ── System status indicator ── */ .rv-system-status { display: flex; flex-direction: column; gap: 6px; width: 100%; } .rv-status-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rv-muted); } .rv-status-line .rv-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: var(--rv-green); box-shadow: 0 0 6px rgba(74,222,128,0.8); flex-shrink: 0; } .rv-status-line .rv-dot-sm.amber { background: var(--rv-amber); box-shadow: 0 0 6px rgba(251,191,36,0.7); } .rv-status-line .rv-dot-sm.red { background: var(--rv-red); box-shadow: 0 0 6px rgba(248,113,113,0.7); } /* ================================================================ PANEL OVERLAY SYSTEM Panels slide in from the side without page scroll. ================================================================ */ .rv-panel-overlay { position: fixed; top: 0; right: -100%; width: min(520px, 100vw); height: 100vh; z-index: 200; background: rgba(2,4,18,0.95); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-left: 1px solid var(--rv-border); box-shadow: -20px 0 80px rgba(0,0,0,0.6), -4px 0 30px rgba(34,211,238,0.08); transition: right 0.32s cubic-bezier(0.32, 0, 0.68, 1); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } .rv-panel-overlay--open { right: 0; } /* Backdrop dim when panel is open */ body.rv-panel-active::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.40); z-index: 199; animation: rv-fade-in 0.22s ease; } .rv-panel-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rv-border); flex-shrink: 0; position: sticky; top: 0; background: rgba(2,4,18,0.95); backdrop-filter: blur(20px); z-index: 10; } .rv-panel-overlay-title { font-size: 16px; font-weight: 800; color: #fff; } .rv-panel-overlay-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rv-border); background: rgba(255,255,255,0.04); color: var(--rv-muted); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--rv-transition-fast); flex-shrink: 0; } .rv-panel-overlay-close:hover { border-color: var(--rv-border-mid); color: #fff; background: rgba(248,113,113,0.12); } .rv-panel-overlay-body { padding: 22px 24px; flex: 1; } /* ── Wide panel (left-opening, for secondary content) ── */ .rv-panel-overlay--left { right: auto; left: -100%; border-right: 1px solid var(--rv-border); border-left: none; box-shadow: 20px 0 80px rgba(0,0,0,0.6); } .rv-panel-overlay--left.rv-panel-overlay--open { left: 0; right: auto; } /* ── Bottom sheet variant (mobile) ── */ @media (max-width: 600px) { .rv-panel-overlay { width: 100vw; height: 85vh; top: auto; bottom: -100%; right: 0; border-left: none; border-top: 1px solid var(--rv-border); border-radius: 20px 20px 0 0; transition: bottom 0.32s cubic-bezier(0.32, 0, 0.68, 1); } .rv-panel-overlay--open { bottom: 0; right: 0; } } /* ================================================================ OFFICE LAYOUT (Customer Portal — Ronnie's Office) ================================================================ */ .rv-office { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 64px 1fr 68px; height: 100vh; overflow: hidden; gap: 0; } .rv-office-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--rv-border); background: rgba(2,4,18,0.80); backdrop-filter: blur(16px); flex-shrink: 0; gap: 16px; } .rv-office-main { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; padding: 18px 20px 18px 24px; overflow: hidden; } .rv-office-sidebar { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; padding: 18px 20px; border-left: 1px solid var(--rv-border); background: rgba(2,4,18,0.50); backdrop-filter: blur(12px); gap: 10px; overflow-y: auto; } .rv-office-footer { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 20px; padding: 0 24px; border-top: 1px solid var(--rv-border); background: rgba(2,4,18,0.80); backdrop-filter: blur(12px); flex-shrink: 0; } /* Office desk card — each module in the grid */ .rv-desk-card { background: rgba(4,8,28,0.72); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 18px 20px; cursor: pointer; transition: var(--rv-transition); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .rv-desk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--rv-cyan-dim), transparent); transition: var(--rv-transition); } .rv-desk-card:hover { border-color: var(--rv-border-mid); box-shadow: 0 0 40px rgba(34,211,238,0.12), inset 0 1px 0 rgba(255,255,255,0.07); transform: translateY(-2px); } .rv-desk-card:hover::before { background: linear-gradient(90deg, transparent, rgba(34,211,238,0.6), rgba(168,85,247,0.4), transparent); } .rv-desk-card-icon { font-size: 24px; margin-bottom: 10px; } .rv-desk-card-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 4px; } .rv-desk-card-sub { font-size: 12px; color: var(--rv-muted); line-height: 1.4; flex: 1; } .rv-desk-card-value { font-size: 26px; font-weight: 900; font-family: var(--rv-mono); color: var(--rv-cyan); margin-top: 8px; letter-spacing: -0.03em; } /* Accent variants */ .rv-desk-card.accent-purple::before { background: linear-gradient(90deg, transparent, rgba(168,85,247,0.6), transparent); } .rv-desk-card.accent-purple:hover { box-shadow: 0 0 40px rgba(168,85,247,0.14); } .rv-desk-card.accent-green::before { background: linear-gradient(90deg, transparent, rgba(74,222,128,0.5), transparent); } .rv-desk-card.accent-green:hover { box-shadow: 0 0 40px rgba(74,222,128,0.12); } .rv-desk-card.accent-amber::before { background: linear-gradient(90deg, transparent, rgba(251,191,36,0.5), transparent); } .rv-desk-card.accent-amber:hover { box-shadow: 0 0 40px rgba(251,191,36,0.12); } /* ================================================================ SHOWROOM LAYOUT (Marketplace) ================================================================ */ .rv-showroom { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 64px 1fr; height: 100vh; overflow: hidden; } .rv-showroom-header { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--rv-border); background: rgba(2,4,18,0.80); backdrop-filter: blur(16px); gap: 16px; } .rv-showroom-sidebar { grid-column: 1; grid-row: 2; background: rgba(2,4,18,0.55); border-right: 1px solid var(--rv-border); backdrop-filter: blur(12px); padding: 16px 12px; overflow-y: auto; } .rv-showroom-stage { grid-column: 2; grid-row: 2; overflow-y: auto; padding: 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; align-content: start; } /* Character card on illuminated platform */ .rv-character-card { background: rgba(4,8,28,0.70); border: 1px solid rgba(34,211,238,0.15); border-radius: 20px; padding: 24px 16px 18px; text-align: center; cursor: pointer; transition: var(--rv-transition); position: relative; overflow: hidden; } /* Platform glow beneath character */ .rv-character-card::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--rv-cyan), transparent); opacity: 0.5; transition: opacity 0.22s; } .rv-character-card:hover { border-color: var(--rv-border-mid); box-shadow: 0 -10px 40px rgba(34,211,238,0.12), 0 0 60px rgba(168,85,247,0.08); transform: translateY(-4px); } .rv-character-card:hover::after { opacity: 1; box-shadow: 0 0 16px rgba(34,211,238,0.5); } .rv-character-avatar { font-size: 52px; display: block; margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(34,211,238,0.35)); transition: filter 0.22s; line-height: 1; } .rv-character-card:hover .rv-character-avatar { filter: drop-shadow(0 0 22px rgba(34,211,238,0.60)) drop-shadow(0 0 40px rgba(168,85,247,0.30)); } .rv-character-name { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 4px; } .rv-character-role { font-size: 11px; color: var(--rv-muted); margin-bottom: 10px; line-height: 1.4; } .rv-character-price { font-size: 18px; font-weight: 900; font-family: var(--rv-mono); color: var(--rv-cyan); margin-bottom: 12px; } /* ================================================================ RESPONSIVE ADJUSTMENTS FOR V80D ================================================================ */ @media (max-width: 1024px) { .rv-bridge { grid-template-columns: 200px 1fr 220px; } .rv-office-main { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } } @media (max-width: 768px) { .rv-bridge { grid-template-columns: 1fr; grid-template-rows: 56px 1fr auto 64px; } .rv-bridge-left, .rv-bridge-right { display: none; } .rv-bridge-center { grid-column: 1; } .rv-office { grid-template-columns: 1fr; grid-template-rows: 56px 1fr auto 56px; } .rv-office-sidebar { display: none; } .rv-office-main { grid-template-columns: repeat(2, 1fr); padding: 12px; } .rv-showroom { grid-template-columns: 1fr; } .rv-showroom-sidebar { display: none; } .rv-showroom-stage { grid-column: 1; } } /* ================================================================ V80G VISUAL STABILIZER Fixes the magnification problem caused by background-size: cover. Artwork must not be zoomed/cropped to death. ================================================================ */ .rv-page .rv-hero-bg, .rv-hero-bg, .rv-hero-bg--right, .rv-hero-bg--left, .rv-hero-bg--center { background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #020617 !important; filter: brightness(0.82) saturate(1.10) !important; opacity: 0.86 !important; pointer-events: none !important; } .rv-page .rv-overlay, .rv-overlay, .rv-hero-bg--right ~ .rv-overlay, .rv-hero-bg--left ~ .rv-overlay { background: linear-gradient(180deg, rgba(2,6,23,0.22) 0%, rgba(2,6,23,0.18) 42%, rgba(2,6,23,0.36) 100%) !important; pointer-events: none !important; } .rv-page.rv-overview-page .rv-hero-bg, .rv-page.rv-overview-page .rv-overlay, .rv-page.rv-overview-page #rv-particles { display: none !important; }