ft-scout 6.0.8 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/web/styles.css CHANGED
@@ -1,25 +1,40 @@
1
1
  /* ==========================================================================
2
- FrontTerrain Scout — Minimal Ambient Developer Dashboard Design System
3
- Google Material 3 Dark & DeepMind Aesthetic Guidelines
2
+ FrontTerrain Scout — Product Studio & Developer Portal Design System
3
+ Exact Visual System matching https://frontterrain.com (HappyRobot-inspired studio UX)
4
4
  ========================================================================== */
5
5
 
6
6
  :root {
7
- /* Core Ambient Dark Palette */
8
- --bg-canvas: #090d16;
9
- --bg-surface: rgba(16, 22, 34, 0.65);
10
- --bg-surface-elevated: rgba(22, 30, 46, 0.75);
11
- --bg-input: rgba(11, 16, 26, 0.8);
7
+ /* FrontTerrain Design System Palette */
8
+ --hr-surface: #0b0c10;
9
+ --hr-surface-card: #12141a;
10
+ --hr-surface-hover: #191c24;
11
+ --hr-ink-strong: #f8fafc;
12
+ --hr-ink-muted: #94a3b8;
13
+ --hr-ink-subtle: #64748b;
14
+ --hr-rust: #e15b37;
15
+ --hr-rust-glow: rgba(225, 91, 55, 0.2);
16
+ --hr-cyan: #38bdf8;
17
+ --hr-violet: #818cf8;
18
+ --hr-emerald: #34d399;
19
+ --hr-line: rgba(255, 255, 255, 0.08);
20
+ --hr-line-strong: rgba(255, 255, 255, 0.16);
21
+
22
+ /* Core Canvas & Card Aliases */
23
+ --bg-canvas: #0b0c10;
24
+ --bg-surface: #12141a;
25
+ --bg-surface-elevated: #191c24;
26
+ --bg-input: #08090c;
12
27
 
13
28
  /* Borders & Dividers */
14
- --border-subtle: rgba(255, 255, 255, 0.07);
15
- --border-hover: rgba(99, 102, 241, 0.3);
16
- --border-focus: rgba(56, 189, 248, 0.5);
29
+ --border-subtle: rgba(255, 255, 255, 0.08);
30
+ --border-hover: rgba(225, 91, 55, 0.3);
31
+ --border-focus: rgba(225, 91, 55, 0.5);
17
32
 
18
33
  /* Accent Tokens */
19
- --accent-primary: #6366f1; /* Indigo */
20
- --accent-primary-hover: #4f46e5;
34
+ --accent-primary: #e15b37; /* FrontTerrain Rust */
35
+ --accent-primary-hover: #f06843;
21
36
  --accent-cyan: #38bdf8; /* Electric Cyan */
22
- --accent-purple: #a855f7; /* Violet */
37
+ --accent-purple: #818cf8; /* Violet */
23
38
  --accent-emerald: #34d399; /* Mint Emerald */
24
39
  --accent-amber: #fbbf24; /* Amber */
25
40
  --accent-rose: #f87171; /* Rose Coral */
@@ -30,20 +45,22 @@
30
45
  --text-tertiary: #64748b;
31
46
  --text-dim: #475569;
32
47
 
33
- /* Fonts */
34
- --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
48
+ /* Fonts matching frontterrain.com */
49
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
50
+ --font-serif: 'Newsreader', Georgia, serif;
51
+ --font-mono: 'JetBrains Mono', monospace;
52
+ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
35
53
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
36
- --font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;
37
54
 
38
55
  /* Radii */
39
- --radius-sm: 8px;
40
- --radius-md: 14px;
41
- --radius-lg: 20px;
56
+ --radius-sm: 6px;
57
+ --radius-md: 12px;
58
+ --radius-lg: 16px;
42
59
  --radius-pill: 9999px;
43
60
 
44
61
  /* Shadows & Ambient Glows */
45
- --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
46
- --shadow-glow-primary: 0 0 30px rgba(99, 102, 241, 0.18);
62
+ --shadow-card: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
63
+ --shadow-glow-primary: 0 0 30px rgba(225, 91, 55, 0.2);
47
64
  --shadow-glow-cyan: 0 0 30px rgba(56, 189, 248, 0.18);
48
65
 
49
66
  /* Transitions */
@@ -64,7 +81,62 @@
64
81
  border-radius: 4px;
65
82
  }
66
83
  ::-webkit-scrollbar-thumb:hover {
67
- background: rgba(99, 102, 241, 0.4);
84
+ background: rgba(225, 91, 55, 0.4);
85
+ }
86
+
87
+ /* Announcement Top Bar (Matching frontterrain.com) */
88
+ .announcement-bar {
89
+ background: var(--hr-rust);
90
+ color: #ffffff;
91
+ padding: 0.5rem 1rem;
92
+ font-size: 0.75rem;
93
+ font-weight: 600;
94
+ text-transform: uppercase;
95
+ letter-spacing: 0.1em;
96
+ text-align: center;
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ gap: 0.75rem;
101
+ text-decoration: none;
102
+ transition: opacity 0.2s ease;
103
+ position: relative;
104
+ z-index: 101;
105
+ }
106
+
107
+ .announcement-bar:hover {
108
+ opacity: 0.92;
109
+ }
110
+
111
+ .blink-dot {
112
+ width: 6px;
113
+ height: 6px;
114
+ background-color: #ffffff;
115
+ border-radius: 50%;
116
+ animation: blink 1.4s ease-in-out infinite;
117
+ }
118
+
119
+ @keyframes blink {
120
+ 0%, 100% { opacity: 1; }
121
+ 50% { opacity: 0.2; }
122
+ }
123
+
124
+ /* FrontTerrain Eyebrow Badge */
125
+ .hr-eyebrow {
126
+ display: inline-flex;
127
+ align-items: center;
128
+ gap: 0.5rem;
129
+ font-family: var(--font-mono);
130
+ font-size: 0.72rem;
131
+ font-weight: 600;
132
+ text-transform: uppercase;
133
+ letter-spacing: 0.14em;
134
+ color: var(--hr-rust);
135
+ background: rgba(225, 91, 55, 0.08);
136
+ border: 1px solid rgba(225, 91, 55, 0.2);
137
+ padding: 0.35rem 0.85rem;
138
+ border-radius: 9999px;
139
+ margin-bottom: 0.75rem;
68
140
  }
69
141
 
70
142
  /* Reset & Base Setup */
@@ -93,14 +165,14 @@ body {
93
165
  filter: blur(140px);
94
166
  pointer-events: none;
95
167
  z-index: 0;
96
- opacity: 0.35;
168
+ opacity: 0.25;
97
169
  animation: floatGlow 16s infinite alternate ease-in-out;
98
170
  }
99
171
 
100
172
  .bg-glow-1 {
101
173
  width: 500px;
102
174
  height: 500px;
103
- background: var(--accent-primary);
175
+ background: var(--hr-rust);
104
176
  top: -120px;
105
177
  left: -100px;
106
178
  }
@@ -108,7 +180,7 @@ body {
108
180
  .bg-glow-2 {
109
181
  width: 550px;
110
182
  height: 550px;
111
- background: var(--accent-purple);
183
+ background: var(--hr-violet);
112
184
  bottom: -150px;
113
185
  right: -120px;
114
186
  animation-delay: -6s;
@@ -117,31 +189,32 @@ body {
117
189
  .bg-glow-3 {
118
190
  width: 400px;
119
191
  height: 400px;
120
- background: var(--accent-cyan);
192
+ background: var(--hr-cyan);
121
193
  top: 45%;
122
194
  left: 50%;
123
195
  transform: translate(-50%, -50%);
124
- opacity: 0.12;
196
+ opacity: 0.1;
125
197
  }
126
198
 
127
199
  @keyframes floatGlow {
128
- 0% { transform: scale(1) translate(0, 0); opacity: 0.25; }
129
- 100% { transform: scale(1.1) translate(25px, 25px); opacity: 0.4; }
200
+ 0% { transform: scale(1) translate(0, 0); opacity: 0.2; }
201
+ 100% { transform: scale(1.1) translate(25px, 25px); opacity: 0.35; }
130
202
  }
131
203
 
132
204
  /* Frosted Glass Panel */
133
205
  .glass-panel {
134
206
  background: var(--bg-surface);
135
- backdrop-filter: blur(20px);
136
- -webkit-backdrop-filter: blur(20px);
207
+ backdrop-filter: blur(16px);
208
+ -webkit-backdrop-filter: blur(16px);
137
209
  border: 1px solid var(--border-subtle);
138
- border-radius: var(--radius-lg);
210
+ border-radius: var(--radius-md);
139
211
  box-shadow: var(--shadow-card);
140
- transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
212
+ transition: border-color var(--transition-normal), background-color var(--transition-normal);
141
213
  }
142
214
 
143
215
  .glass-panel:hover {
144
- border-color: rgba(255, 255, 255, 0.12);
216
+ border-color: var(--hr-line-strong);
217
+ background-color: var(--hr-surface-hover);
145
218
  }
146
219
 
147
220
  /* App Wrapper Layout */
@@ -462,14 +535,16 @@ h1, h2, h3, h4, h5, h6 {
462
535
  }
463
536
 
464
537
  .btn-primary {
465
- background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
538
+ background: var(--hr-rust);
466
539
  color: white;
467
- box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
540
+ box-shadow: 0 4px 16px var(--hr-rust-glow);
541
+ border: 1px solid transparent;
468
542
  }
469
543
 
470
544
  .btn-primary:hover {
545
+ background: var(--accent-primary-hover);
471
546
  transform: translateY(-1px);
472
- box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
547
+ box-shadow: 0 6px 22px rgba(225, 91, 55, 0.35);
473
548
  }
474
549
 
475
550
  .btn-success {
@@ -490,25 +565,88 @@ h1, h2, h3, h4, h5, h6 {
490
565
  }
491
566
 
492
567
  .btn-outline:hover {
493
- background: rgba(255, 255, 255, 0.05);
494
- border-color: rgba(255, 255, 255, 0.15);
568
+ background: var(--hr-surface-hover);
569
+ border-color: var(--hr-line-strong);
495
570
  color: var(--text-primary);
496
571
  }
497
572
 
498
573
  /* ================= AUTH SECTION ================= */
499
574
  .auth-section {
500
575
  display: flex;
501
- align-items: center;
576
+ align-items: flex-start;
502
577
  justify-content: center;
578
+ gap: 32px;
503
579
  padding: 36px 0;
504
580
  min-height: 65vh;
581
+ flex-wrap: wrap;
505
582
  }
506
583
 
507
584
  .auth-card {
508
585
  width: 100%;
509
586
  max-width: 440px;
510
587
  padding: 36px;
511
- border: 1px solid rgba(99, 102, 241, 0.18);
588
+ border: 1px solid var(--hr-line);
589
+ background: var(--hr-surface-card);
590
+ }
591
+
592
+ /* FrontTerrain Hero Diagram Card */
593
+ .hero-diagram-container {
594
+ width: 100%;
595
+ max-width: 440px;
596
+ padding: 28px;
597
+ background: var(--hr-surface-card);
598
+ border: 1px solid var(--hr-line);
599
+ border-radius: var(--radius-md);
600
+ box-shadow: var(--shadow-card);
601
+ }
602
+
603
+ .diagram-header {
604
+ display: flex;
605
+ justify-content: space-between;
606
+ align-items: center;
607
+ font-family: var(--font-mono);
608
+ font-size: 0.7rem;
609
+ font-weight: 600;
610
+ letter-spacing: 0.1em;
611
+ color: var(--hr-ink-subtle);
612
+ margin-bottom: 1rem;
613
+ border-bottom: 1px solid var(--hr-line);
614
+ padding-bottom: 0.75rem;
615
+ }
616
+
617
+ .diagram-nodes {
618
+ display: flex;
619
+ flex-direction: column;
620
+ gap: 0.75rem;
621
+ }
622
+
623
+ .diagram-node {
624
+ background: rgba(255, 255, 255, 0.02);
625
+ border: 1px solid var(--hr-line);
626
+ border-radius: 8px;
627
+ padding: 0.85rem 1.1rem;
628
+ display: flex;
629
+ justify-content: space-between;
630
+ align-items: center;
631
+ transition: border-color 0.2s, background 0.2s;
632
+ }
633
+
634
+ .diagram-node:hover {
635
+ border-color: var(--hr-line-strong);
636
+ background: var(--hr-surface-hover);
637
+ }
638
+
639
+ .diagram-node-title {
640
+ font-weight: 600;
641
+ font-size: 0.95rem;
642
+ color: var(--hr-ink-strong);
643
+ }
644
+
645
+ .diagram-node-status {
646
+ font-family: var(--font-mono);
647
+ font-size: 0.75rem;
648
+ font-weight: 600;
649
+ color: var(--hr-emerald);
512
650
  }
513
651
 
514
652
  .auth-header {
@@ -520,7 +658,7 @@ h1, h2, h3, h4, h5, h6 {
520
658
  width: 56px;
521
659
  height: 56px;
522
660
  background: rgba(15, 23, 42, 0.6);
523
- border: 1px solid rgba(168, 85, 247, 0.3);
661
+ border: 1px solid rgba(225, 91, 55, 0.3);
524
662
  border-radius: var(--radius-md);
525
663
  margin: 0 auto 14px;
526
664
  display: flex;
@@ -550,7 +688,7 @@ h1, h2, h3, h4, h5, h6 {
550
688
 
551
689
  .auth-tabs {
552
690
  display: flex;
553
- background: rgba(11, 16, 26, 0.8);
691
+ background: var(--bg-input);
554
692
  padding: 3px;
555
693
  border-radius: var(--radius-md);
556
694
  border: 1px solid var(--border-subtle);
@@ -578,7 +716,7 @@ h1, h2, h3, h4, h5, h6 {
578
716
  .auth-tab.active {
579
717
  background: var(--accent-primary);
580
718
  color: white;
581
- box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
719
+ box-shadow: 0 2px 8px var(--hr-rust-glow);
582
720
  }
583
721
 
584
722
  .auth-form {
@@ -623,8 +761,8 @@ h1, h2, h3, h4, h5, h6 {
623
761
  }
624
762
 
625
763
  .input-wrapper input:focus, .input-control:focus {
626
- border-color: var(--accent-cyan);
627
- box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
764
+ border-color: var(--accent-primary);
765
+ box-shadow: 0 0 0 3px var(--hr-rust-glow);
628
766
  }
629
767
 
630
768
  .btn-toggle-pwd {
@@ -697,12 +835,12 @@ h1, h2, h3, h4, h5, h6 {
697
835
 
698
836
  /* Ambient Workspace Hero Banner */
699
837
  .welcome-banner {
700
- padding: 24px 32px;
838
+ padding: 28px 36px;
701
839
  display: flex;
702
840
  align-items: center;
703
841
  justify-content: space-between;
704
- background: linear-gradient(135deg, rgba(16, 22, 34, 0.8), rgba(11, 16, 26, 0.9));
705
- border: 1px solid rgba(99, 102, 241, 0.18);
842
+ background: var(--hr-surface-card);
843
+ border: 1px solid var(--hr-line);
706
844
  position: relative;
707
845
  overflow: hidden;
708
846
  }
@@ -1713,22 +1851,22 @@ input:checked + .slider:before {
1713
1851
  }
1714
1852
 
1715
1853
  .popular-tier {
1716
- border: 1px solid rgba(99, 102, 241, 0.4);
1717
- box-shadow: var(--shadow-glow-primary);
1854
+ border: 1px solid var(--hr-rust);
1855
+ box-shadow: 0 0 24px var(--hr-rust-glow);
1718
1856
  }
1719
1857
 
1720
1858
  .popular-badge {
1721
1859
  position: absolute;
1722
1860
  top: -12px;
1723
1861
  right: 24px;
1724
- background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-purple) 100%);
1862
+ background: var(--hr-rust);
1725
1863
  color: #ffffff;
1726
1864
  font-size: 11px;
1727
1865
  font-weight: 700;
1728
1866
  padding: 3px 12px;
1729
1867
  border-radius: var(--radius-pill);
1730
1868
  letter-spacing: 0.5px;
1731
- box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
1869
+ box-shadow: 0 4px 12px var(--hr-rust-glow);
1732
1870
  }
1733
1871
 
1734
1872
  .active-tier-card {
@@ -1880,7 +2018,7 @@ input:checked + .slider:before {
1880
2018
 
1881
2019
  .credit-progress-fill {
1882
2020
  height: 100%;
1883
- background: linear-gradient(90deg, #6366f1 0%, #38bdf8 60%, #34d399 100%);
2021
+ background: linear-gradient(90deg, var(--hr-rust) 0%, var(--hr-cyan) 60%, var(--hr-emerald) 100%);
1884
2022
  border-radius: var(--radius-pill);
1885
2023
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
1886
2024
  }
@@ -1959,4 +2097,57 @@ input:checked + .slider:before {
1959
2097
  to { transform: translateY(0); opacity: 1; }
1960
2098
  }
1961
2099
 
2100
+ /* Scout Logo Hero & Footer Enhancements */
2101
+ .banner-logo-wrapper {
2102
+ width: 64px;
2103
+ height: 64px;
2104
+ min-width: 64px;
2105
+ background: rgba(15, 23, 42, 0.8);
2106
+ border: 1px solid rgba(56, 189, 248, 0.4);
2107
+ border-radius: var(--radius-md);
2108
+ display: flex;
2109
+ align-items: center;
2110
+ justify-content: center;
2111
+ box-shadow: 0 0 30px rgba(56, 189, 248, 0.35);
2112
+ padding: 6px;
2113
+ margin-right: 18px;
2114
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
2115
+ }
2116
+
2117
+ .banner-logo-wrapper:hover {
2118
+ transform: scale(1.06) rotate(2deg);
2119
+ box-shadow: 0 0 40px rgba(56, 189, 248, 0.6);
2120
+ border-color: rgba(56, 189, 248, 0.8);
2121
+ }
2122
+
2123
+ .banner-hero-logo {
2124
+ width: 100%;
2125
+ height: 100%;
2126
+ object-fit: contain;
2127
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
2128
+ }
2129
+
2130
+ .footer-brand {
2131
+ display: flex;
2132
+ align-items: center;
2133
+ justify-content: center;
2134
+ gap: 10px;
2135
+ margin-bottom: 10px;
2136
+ }
2137
+
2138
+ .footer-logo-img {
2139
+ width: 28px;
2140
+ height: 28px;
2141
+ object-fit: contain;
2142
+ filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
2143
+ }
2144
+
2145
+ .footer-brand-title {
2146
+ font-family: var(--font-heading);
2147
+ font-weight: 800;
2148
+ font-size: 16px;
2149
+ letter-spacing: 0.08em;
2150
+ color: var(--text-primary);
2151
+ }
2152
+
1962
2153