@jxrstudios/jxr 1.0.9 → 1.0.11

package/zzz_react_template/index.css

@@ -1,16 +1,523 @@
+/**
+ * JXR.js — LavaFlow Brand System
+ * Matched to LavaFlow Streams (lavaflowstreams.pro)
+ *
+ * Core palette:
+ *   Background:  #0a0a0a — pure volcanic black
+ *   Lava Orange: #ea580c / #f97316 — primary CTA, accent headlines
+ *   Neon Green:  #22c55e / #4ade80 — live indicators, success states
+ *   White:       #ffffff — primary headings
+ *   Gray-400:    #9ca3af — body text
+ *   Gray-600:    #4b5563 — muted / borders
+ *
+ * Typography: Inter (display + body) + JetBrains Mono (code)
+ * Radial warm glow: rgba(120,40,10,0.35) behind hero
+ */
+
 @import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* JXR / LavaFlow brand tokens */
+  --color-lava: var(--lava);
+  --color-lava-hot: var(--lava-hot);
+  --color-green-live: var(--green-live);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+}
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+  --radius: 0.5rem;
+
+  /* ── LavaFlow Brand Palette ── */
+  --lava:       #ea580c;   /* orange-600 — primary CTA */
+  --lava-hot:   #f97316;   /* orange-500 — headline accent */
+  --green-live: #22c55e;   /* green-500 — live/active states */
+  --green-dim:  #16a34a;   /* green-600 — dimmer green */
+
+  /* ── Surface layers ── */
+  --surface:    #111111;   /* card background */
+  --surface-2:  #1a1a1a;   /* elevated surface */
+  --surface-3:  #222222;   /* hover surface */
+
+  /* ── Semantic tokens ── */
+  --background:            #0a0a0a;
+  --foreground:            #ffffff;
+  --card:                  #111111;
+  --card-foreground:       #ffffff;
+  --popover:               #111111;
+  --popover-foreground:    #ffffff;
+  --primary:               #ea580c;
+  --primary-foreground:    #ffffff;
+  --secondary:             #1a1a1a;
+  --secondary-foreground:  #9ca3af;
+  --muted:                 #1a1a1a;
+  --muted-foreground:      #6b7280;
+  --accent:                #22c55e;
+  --accent-foreground:     #0a0a0a;
+  --destructive:           #ef4444;
+  --border:                rgba(255,255,255,0.07);
+  --input:                 rgba(255,255,255,0.08);
+  --ring:                  #ea580c;
+  --chart-1:               #ea580c;
+  --chart-2:               #22c55e;
+  --chart-3:               #f97316;
+  --chart-4:               #16a34a;
+  --chart-5:               #fb923c;
+  --sidebar:               #0d0d0d;
+  --sidebar-foreground:    #ffffff;
+  --sidebar-primary:       #ea580c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent:        #1a1a1a;
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border:        rgba(255,255,255,0.06);
+  --sidebar-ring:          #ea580c;
 }
 
-body {
-  margin: 0;
-  font-family: system-ui, -apple-system, sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background: #0a0a0a;
+    color: #ffffff;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.6;
+  }
+
+  code, pre, kbd, samp {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not([aria-disabled="true"]),
+  a[href] {
+    cursor: pointer;
+  }
+
+  ::selection {
+    background: rgba(234, 88, 12, 0.3);
+    color: #ffffff;
+  }
+
+  ::-webkit-scrollbar { width: 5px; height: 5px; }
+  ::-webkit-scrollbar-track { background: #0a0a0a; }
+  ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: rgba(234,88,12,0.5); }
+}
+
+@layer components {
+  /* ── Container ── */
+  .container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    max-width: 1200px;
+  }
+  @media (min-width: 768px) {
+    .container { padding-left: 2rem; padding-right: 2rem; }
+  }
+
+  .flex { min-height: 0; min-width: 0; }
+
+  /* ── Primary CTA Button — matches LavaFlow "Start building" ── */
+  .btn-lava {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.7rem 1.6rem;
+    background: #ea580c;
+    color: #ffffff;
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    font-size: 0.9rem;
+    letter-spacing: 0.01em;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .btn-lava:hover {
+    background: #f97316;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 28px rgba(234,88,12,0.45);
+  }
+  .btn-lava:active { transform: translateY(0); }
+
+  /* ── Ghost Button ── */
+  .btn-ghost {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.7rem 1.6rem;
+    background: transparent;
+    color: #d1d5db;
+    font-family: 'Inter', sans-serif;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .btn-ghost:hover {
+    border-color: rgba(234,88,12,0.45);
+    color: #ea580c;
+    background: rgba(234,88,12,0.06);
+  }
+
+  /* ── Code / Terminal Block ── */
+  .code-block {
+    background: #0d0d0d;
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 10px;
+    padding: 1.25rem 1.5rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
+    line-height: 1.75;
+    color: #e5e7eb;
+    overflow-x: auto;
+    position: relative;
+  }
+  .code-block .token-cmd   { color: #22c55e; font-weight: 600; }
+  .code-block .token-comment { color: #4b5563; }
+  .code-block .token-string  { color: #f97316; }
+  .code-block .token-keyword { color: #fb923c; }
+  .code-block .token-output  { color: #22c55e; }
+
+  /* ── Terminal Window Chrome ── */
+  .terminal-chrome {
+    background: #111111;
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+  .terminal-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 14px;
+    background: #161616;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .terminal-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .terminal-label {
+    margin-left: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.72rem;
+    color: #4b5563;
+    letter-spacing: 0.05em;
+  }
+  .terminal-body {
+    padding: 1.25rem 1.5rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.82rem;
+    line-height: 1.85;
+    color: #d1d5db;
+  }
+  .terminal-prompt { color: #22c55e; font-weight: 600; }
+  .terminal-cmd    { color: #ffffff; }
+  .terminal-out    { color: #22c55e; }
+  .terminal-dim    { color: #4b5563; }
+  .terminal-orange { color: #f97316; }
+
+  /* ── Card ── */
+  .jxr-card {
+    background: #111111;
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 12px;
+    padding: 1.5rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .jxr-card:hover {
+    border-color: rgba(234,88,12,0.25);
+    box-shadow: 0 0 32px rgba(234,88,12,0.05);
+  }
+
+  /* ── Stat Pill — matches LavaFlow hero stats ── */
+  .stat-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.9rem;
+    background: #111111;
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 100px;
+    font-size: 0.8rem;
+    color: #9ca3af;
+    white-space: nowrap;
+  }
+  .stat-pill strong { color: #ffffff; font-weight: 700; }
+  .stat-pill .pill-icon { color: #ea580c; }
+
+  /* ── Section label — "> PROVISION IN SECONDS" style ── */
+  .section-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: #6b7280;
+    margin-bottom: 1.25rem;
+  }
+  .section-label::before {
+    content: '›';
+    color: #ea580c;
+    font-size: 0.9rem;
+    line-height: 1;
+  }
+
+  /* ── Orange text accent ── */
+  .text-lava {
+    color: #f97316;
+  }
+
+  /* ── Live indicator ── */
+  .live-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #22c55e;
+    flex-shrink: 0;
+    animation: pulse-green 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
+    50%       { opacity: 0.8; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
+  }
+
+  /* ── Orange pulse dot ── */
+  .pulse-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #ea580c;
+    flex-shrink: 0;
+    animation: pulse-lava 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-lava {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(234,88,12,0.5); }
+    50%       { opacity: 0.8; box-shadow: 0 0 0 5px rgba(234,88,12,0); }
+  }
+
+  /* ── Badge ── */
+  .badge-lava {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.2rem 0.7rem;
+    background: rgba(234,88,12,0.12);
+    border: 1px solid rgba(234,88,12,0.25);
+    border-radius: 100px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #f97316;
+    letter-spacing: 0.05em;
+  }
+  .badge-green {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.2rem 0.7rem;
+    background: rgba(34,197,94,0.1);
+    border: 1px solid rgba(34,197,94,0.2);
+    border-radius: 100px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #4ade80;
+    letter-spacing: 0.05em;
+  }
+
+  /* ── Divider ── */
+  .lava-divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(234,88,12,0.25), transparent);
+  }
+
+  /* ── Cursor blink ── */
+  @keyframes blink {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0; }
+  }
+  .cursor-blink {
+    display: inline-block;
+    width: 2px;
+    height: 1em;
+    background: #22c55e;
+    vertical-align: text-bottom;
+    animation: blink 1s step-end infinite;
+    margin-left: 2px;
+  }
+
+  /* ── Architecture diagram card ── */
+  .arch-card {
+    background: #111111;
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 14px;
+    overflow: hidden;
+  }
+  .arch-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .arch-live-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: #6b7280;
+  }
+  .arch-node {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 10px;
+    border-radius: 8px;
+    background: #1a1a1a;
+    border: 1px solid rgba(255,255,255,0.06);
+    min-width: 80px;
+    transition: border-color 0.2s;
+  }
+  .arch-node.active {
+    border-color: #22c55e;
+    box-shadow: 0 0 20px rgba(34,197,94,0.12);
+  }
+  .arch-node-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #222222;
+    color: #9ca3af;
+    font-size: 0.9rem;
+  }
+  .arch-node.active .arch-node-icon {
+    background: rgba(34,197,94,0.12);
+    color: #22c55e;
+  }
+  .arch-node-name {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #d1d5db;
+    text-align: center;
+    white-space: nowrap;
+  }
+  .arch-node-sub {
+    font-size: 0.6rem;
+    color: #4b5563;
+    text-align: center;
+    white-space: nowrap;
+  }
+  .arch-connector {
+    height: 2px;
+    flex: 1;
+    background: rgba(255,255,255,0.06);
+    position: relative;
+    overflow: hidden;
+  }
+  .arch-connector::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 60%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, #ea580c, transparent);
+    animation: flow 2s linear infinite;
+  }
+  @keyframes flow {
+    0%   { left: -60%; }
+    100% { left: 110%; }
+  }
+  .arch-progress {
+    height: 3px;
+    background: rgba(255,255,255,0.04);
+    position: relative;
+    overflow: hidden;
+  }
+  .arch-progress-bar {
+    height: 100%;
+    width: 65%;
+    background: linear-gradient(90deg, #ea580c, #f97316, #fb923c);
+    border-radius: 2px;
+    animation: progress-pulse 2s ease-in-out infinite;
+  }
+  @keyframes progress-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.7; }
+  }
+}