diff --git a/pages/demo.php b/pages/demo.php index a72fc8e..880d491 100644 --- a/pages/demo.php +++ b/pages/demo.php @@ -13,16 +13,16 @@ return <<<'ORIBI_SYNC_CONTENT' - - + + - + - + - + - + diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 46f5d33..ddd68a9 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -1256,6 +1256,389 @@ p:last-child { margin-bottom: 0; } color: #fff; } +/* ═══════════════════════════════════════════════════════════════ + 8a-i. Card Scene Mini Animations (.card-scene) + Replaces .feature-icon on feature-cards with scene="" set. + Dark #0d1117 screen aesthetic, pure CSS animations, + matching the design page platform-row visual language. + ═══════════════════════════════════════════════════════════════ */ + +/* ── Shared scaffold ─────────────────────────────────────────── */ +.card-scene { + width: 100%; + height: 140px; + margin-bottom: 1.25rem; + border-radius: var(--radius-md); + overflow: hidden; + flex-shrink: 0; + text-align: left; +} +.cs-screen { + width: 100%; + height: 100%; + background: #0d1117; + border: 1px solid rgba(255,255,255,0.08); + border-radius: var(--radius-md); + overflow: hidden; + display: flex; + flex-direction: column; + padding: 10px; + gap: 6px; + box-sizing: border-box; +} +.cs-topbar { + display: flex; + align-items: center; + gap: 6px; + padding-bottom: 6px; + border-bottom: 1px solid rgba(255,255,255,0.06); + flex-shrink: 0; +} +.cs-dots { display: flex; gap: 3px; } +.cs-dots span { width: 6px; height: 6px; border-radius: 50%; } +.cs-dots span:nth-child(1) { background: #ff5f56; } +.cs-dots span:nth-child(2) { background: #ffbd2e; } +.cs-dots span:nth-child(3) { background: #27c93f; } +.cs-title { + font-size: 9px; + font-weight: 600; + letter-spacing: 0.5px; + color: rgba(255,255,255,0.35); + text-transform: uppercase; + flex: 1; + text-align: center; +} +.cs-live-dot { + width: 6px; height: 6px; + border-radius: 50%; + background: #ef4444; + flex-shrink: 0; + animation: cs-live-pulse 1.4s ease-in-out infinite; +} +@keyframes cs-live-pulse { + 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } + 50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(239,68,68,0); } +} + +/* ── Scene 1: Content Management ─────────────────────────────── */ +.cs-cms .cs-files { + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; + justify-content: center; +} +.cs-file { + display: flex; + align-items: center; + gap: 6px; + opacity: 0; + transform: translateY(6px); + animation: cs-file-in 4.5s ease-in-out infinite; +} +.cs-file--1 { animation-delay: 0.1s; } +.cs-file--2 { animation-delay: 0.5s; } +.cs-file--3 { animation-delay: 0.9s; } +@keyframes cs-file-in { + 0%,8% { opacity: 0; transform: translateY(6px); } + 18%,72% { opacity: 1; transform: translateY(0); } + 82%,100% { opacity: 0; transform: translateY(-4px); } +} +.cs-ftype { + font-size: 7px; font-weight: 700; + padding: 2px 5px; + border-radius: 3px; + min-width: 28px; + text-align: center; + letter-spacing: 0.3px; + flex-shrink: 0; +} +.cs-ftype-img { background: rgba(59,130,246,0.2); color: #60a5fa; } +.cs-ftype-vid { background: rgba(168,85,247,0.2); color: #c084fc; } +.cs-ftype-html { background: rgba(var(--color-primary-rgb),0.2); color: var(--color-primary); } +.cs-fbar { + flex: 1; + height: 4px; + background: rgba(255,255,255,0.06); + border-radius: 2px; + overflow: hidden; + position: relative; +} +.cs-fbar::after { + content: ''; + position: absolute; top:0; left:0; bottom:0; + border-radius: 2px; + background: rgba(255,255,255,0.2); +} +.cs-file--1 .cs-fbar::after { width: 78%; } +.cs-file--2 .cs-fbar::after { width: 52%; } +.cs-file--3 .cs-fbar::after { width: 34%; } +.cs-fsize { + font-size: 7px; + color: rgba(255,255,255,0.2); + min-width: 26px; + text-align: right; + flex-shrink: 0; +} +.cs-upload { + font-size: 8px; font-weight: 600; + text-align: center; + color: var(--color-primary); + border: 1px solid rgba(var(--color-primary-rgb),0.35); + border-radius: 4px; + padding: 3px 0; + flex-shrink: 0; + animation: cs-upload-glow 2.5s ease-in-out infinite; +} +@keyframes cs-upload-glow { + 0%,100% { border-color: rgba(var(--color-primary-rgb),0.3); box-shadow: none; } + 50% { border-color: rgba(var(--color-primary-rgb),0.8); box-shadow: 0 0 8px rgba(var(--color-primary-rgb),0.25); } +} + +/* ── Scene 2: Smart Scheduling ────────────────────────────────── */ +.cs-week { + display: flex; + gap: 4px; + flex: 1; + align-items: flex-end; +} +.cs-cal-day { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; +} +.cs-cal-day > span { + font-size: 7px; font-weight: 600; + color: rgba(255,255,255,0.3); +} +.cs-cal-bar { + width: 100%; + border-radius: 3px; + background: rgba(var(--color-primary-rgb),0.65); + animation: cs-bar-glow 3.5s ease-in-out infinite; +} +.cs-cal-day:nth-child(1) .cs-cal-bar { height: 36px; animation-delay: 0.0s; } +.cs-cal-day:nth-child(2) .cs-cal-bar { height: 52px; animation-delay: 0.2s; } +.cs-cal-day:nth-child(3) .cs-cal-bar { height: 28px; animation-delay: 0.4s; } +.cs-cal-day:nth-child(4) .cs-cal-bar { height: 44px; animation-delay: 0.6s; } +.cs-cal-day:nth-child(5) .cs-cal-bar { height: 60px; animation-delay: 0.8s; } +.cs-cal-day:nth-child(6) .cs-cal-bar { height: 18px; animation-delay: 1.0s; opacity: 0.35; } +.cs-cal-day:nth-child(7) .cs-cal-bar { height: 12px; animation-delay: 1.2s; opacity: 0.35; } +@keyframes cs-bar-glow { + 0%,100% { opacity: 0.45; } + 50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--color-primary-rgb),0.55); } +} + +/* ── Scene 3: Live Data Feeds ──────────────────────────────────── */ +.cs-feed-rows { + display: flex; + flex-direction: column; + gap: 9px; + flex: 1; + justify-content: center; +} +.cs-feed-row { + display: flex; + align-items: center; + justify-content: space-between; +} +.cs-feed-label { + font-size: 8px; font-weight: 700; + color: rgba(255,255,255,0.3); + letter-spacing: 0.8px; + text-transform: uppercase; +} +.cs-feed-val { + position: relative; + height: 13px; + min-width: 52px; +} +.cs-feed-val span { + position: absolute; + right: 0; top: 0; + font-size: 9px; font-weight: 600; + font-variant-numeric: tabular-nums; + opacity: 0; + animation: cs-val-show 6s linear infinite; +} +.cs-fv1-a,.cs-fv1-b,.cs-fv1-c { color: #4ade80; } +.cs-fv2-a,.cs-fv2-b,.cs-fv2-c { color: rgba(255,255,255,0.8); } +.cs-fv3-a,.cs-fv3-b,.cs-fv3-c { color: var(--color-primary); } +.cs-fv1-a,.cs-fv2-a,.cs-fv3-a { animation-delay: 0s; } +.cs-fv1-b,.cs-fv2-b,.cs-fv3-b { animation-delay: 2s; } +.cs-fv1-c,.cs-fv2-c,.cs-fv3-c { animation-delay: 4s; } +@keyframes cs-val-show { + 0%,29% { opacity: 1; } + 33%,100%{ opacity: 0; } +} + +/* ── Scene 4: Template Library ─────────────────────────────────── */ +.cs-tmpl-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 5px; + flex: 1; +} +.cs-tmpl { + background: rgba(255,255,255,0.04); + border-radius: 4px; + border: 1px solid rgba(255,255,255,0.08); + padding: 5px; + display: flex; + flex-direction: column; + gap: 3px; + animation: cs-tmpl-sel 8s ease-in-out infinite; +} +.cs-tmpl--1 { animation-delay: 0s; } +.cs-tmpl--2 { animation-delay: 2s; } +.cs-tmpl--3 { animation-delay: 4s; } +.cs-tmpl--4 { animation-delay: 6s; } +@keyframes cs-tmpl-sel { + 0%,1% { border-color: rgba(var(--color-primary-rgb),0.8); box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb),0.25); } + 22%,23% { border-color: rgba(var(--color-primary-rgb),0.8); box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb),0.25); } + 25%,100% { border-color: rgba(255,255,255,0.08); box-shadow: none; } +} +.cs-tmpl-thumb { + flex: 1; + min-height: 12px; + border-radius: 3px; + background: rgba(255,255,255,0.07); +} +.cs-tmpl-thumb--full { min-height: 20px; } +.cs-tmpl-line { + height: 3px; + border-radius: 2px; + background: rgba(255,255,255,0.14); +} +.cs-tmpl-line--short { width: 60%; } +.cs-tmpl-line--med { width: 85%; } + +/* ── Scene 5: Team & Permissions ───────────────────────────────── */ +.cs-team-avatars { + display: flex; + justify-content: space-around; + align-items: center; + flex: 1; + padding: 2px 0; +} +.cs-avatar { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; +} +.cs-av-circle { + width: 28px; height: 28px; + border-radius: 50%; + display: flex; align-items: center; justify-content: center; + font-size: 11px; font-weight: 700; color: #fff; + animation: cs-av-pulse 4s ease-in-out infinite; +} +.cs-avatar--1 .cs-av-circle { background: rgba(var(--color-primary-rgb),0.8); animation-delay: 0s; } +.cs-avatar--2 .cs-av-circle { background: rgba(99,102,241,0.8); animation-delay: 0.8s; } +.cs-avatar--3 .cs-av-circle { background: rgba(107,114,128,0.7); animation-delay: 1.6s; } +@keyframes cs-av-pulse { + 0%,100% { transform: scale(1); opacity: 0.8; } + 50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 10px rgba(255,255,255,0.15); } +} +.cs-av-role { + font-size: 7px; font-weight: 700; + padding: 2px 5px; + border-radius: 3px; + letter-spacing: 0.3px; + text-transform: uppercase; +} +.cs-role-admin { background: rgba(var(--color-primary-rgb),0.2); color: var(--color-primary); } +.cs-role-editor { background: rgba(99,102,241,0.2); color: #818cf8; } +.cs-role-viewer { background: rgba(107,114,128,0.15); color: rgba(255,255,255,0.35); } +.cs-perm-strip { + display: flex; + gap: 4px; + justify-content: center; + flex-shrink: 0; +} +.cs-perm-dot { + height: 4px; + border-radius: 2px; + background: rgba(255,255,255,0.1); +} +.cs-perm-dot--1 { width: 32px; background: rgba(var(--color-primary-rgb),0.55); } +.cs-perm-dot--2 { width: 24px; background: rgba(99,102,241,0.55); } +.cs-perm-dot--3 { width: 16px; } + +/* ── Scene 6: Playback Analytics ───────────────────────────────── */ +.cs-analytics-body { + display: flex; + align-items: center; + gap: 14px; + flex: 1; + padding: 2px 4px; +} +.cs-ring-wrap { + position: relative; + width: 52px; height: 52px; + flex-shrink: 0; +} +.cs-ring { + width: 52px; height: 52px; + border-radius: 50%; + border: 5px solid var(--color-primary); + border-left-color: rgba(255,255,255,0.07); + animation: cs-ring-spin 3.5s ease-in-out infinite; +} +@keyframes cs-ring-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} +.cs-ring-val { + position: absolute; + inset: 0; + display: flex; align-items: center; justify-content: center; + font-size: 9px; font-weight: 700; + color: rgba(255,255,255,0.7); +} +.cs-bars { + display: flex; + align-items: flex-end; + gap: 4px; + flex: 1; + height: 100%; + padding-bottom: 2px; +} +.cs-sbar { + flex: 1; + border-radius: 2px 2px 0 0; + background: rgba(var(--color-primary-rgb),0.55); + animation: cs-sbar-pulse 2.4s ease-in-out infinite; +} +.cs-sbar--1 { height: 40%; animation-delay: 0.0s; } +.cs-sbar--2 { height: 65%; animation-delay: 0.2s; } +.cs-sbar--3 { height: 80%; animation-delay: 0.4s; } +.cs-sbar--4 { height: 55%; animation-delay: 0.6s; } +.cs-sbar--5 { height: 90%; animation-delay: 0.8s; } +.cs-sbar--6 { height: 70%; animation-delay: 1.0s; } +@keyframes cs-sbar-pulse { + 0%,100% { opacity: 0.5; } + 50% { opacity: 1; box-shadow: 0 0 6px rgba(var(--color-primary-rgb),0.5); } +} + +/* ── Reduced motion ─────────────────────────────────────────────── */ +@media (prefers-reduced-motion: reduce) { + .cs-file { animation: none; opacity: 1; transform: none; } + .cs-cal-bar { animation: none; opacity: 0.7; } + .cs-feed-val span { animation: none; } + .cs-fv1-a,.cs-fv2-a,.cs-fv3-a { opacity: 1; } + .cs-upload { animation: none; } + .cs-live-dot { animation: none; } + .cs-tmpl { animation: none; } + .cs-av-circle { animation: none; opacity: 1; transform: none; } + .cs-ring { animation: none; } + .cs-sbar { animation: none; opacity: 0.7; } +} + /* ── 8b. Value Card ────────────────────────────────────────── */ .value-card { text-align: center; diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 4606a16..3ac601b 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -383,6 +383,7 @@ add_action('init', function () { 'description' => ['type' => 'string', 'default' => ''], 'url' => ['type' => 'string', 'default' => ''], 'centered' => ['type' => 'boolean', 'default' => false], + 'scene' => ['type' => 'string', 'default' => ''], ], oribi_card_image_attributes() ), @@ -1084,6 +1085,7 @@ function oribi_render_feature_card($a) $href = !empty($a['url']) ? ' href="' . esc_url($a['url']) . '"' : ''; $link_cls = !empty($a['url']) ? ' feature-card-link' : ''; $center = !empty($a['centered']); + $scene = !empty($a['scene']) ? trim($a['scene']) : ''; $img = oribi_card_image_html($a); $img_cls = $img['card_class'] ? ' ' . $img['card_class'] : ''; @@ -1114,7 +1116,9 @@ function oribi_render_feature_card($a) - + + +
>
@@ -1126,6 +1130,94 @@ function oribi_render_feature_card($a) return ob_get_clean(); } +/* ── Card Scene Renderer ────────────────────────────────────────────────────── */ +function oribi_render_card_scene($scene) +{ + switch ($scene) { + + case 'cms': + return + ''; + + case 'scheduler': + return + ''; + + case 'data-feed': + return + ''; + + case 'templates': + return + ''; + + case 'team': + return + ''; + + case 'analytics': + return + ''; + + default: + return ''; + } +} + /* ── Value Section ─────────────────────────────────────────────────────────── */ function oribi_render_value_section($a, $content) {