1+ /* AITE SYSTEM: TERMINAL UI v4.0
2+ Design Philosophy: Maximum Structure, High Information Density
3+ */
4+
5+ @import url ('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=JetBrains+Mono:wght@400;500&display=swap' );
6+
7+ : root {
8+ --bg-color : # 030405 ;
9+ --panel-bg : rgba (255 , 255 , 255 , 0.02 );
10+ --accent-indigo : # 818cf8 ;
11+ --accent-emerald : # 34d399 ;
12+ --text-primary : # e2e8f0 ;
13+ --text-muted : # 64748b ;
14+ --border-soft : rgba (255 , 255 , 255 , 0.08 );
15+ --border-bright : rgba (255 , 255 , 255 , 0.15 );
16+ --glass-blur : blur (25px );
17+ --transition : all 0.3s cubic-bezier (0.4 , 0 , 0.2 , 1 );
18+ }
19+
20+ /* 1. Reset & Global */
21+ * {
22+ box-sizing : border-box;
23+ margin : 0 ;
24+ padding : 0 ;
25+ }
26+
27+ body {
28+ background-color : var (--bg-color );
29+ background-image :
30+ radial-gradient (circle at 50% 0% , rgba (129 , 140 , 248 , 0.08 ), transparent 50% ),
31+ radial-gradient (circle at 100% 100% , rgba (129 , 140 , 248 , 0.03 ), transparent 30% );
32+ color : var (--text-primary );
33+ font-family : 'Plus Jakarta Sans' , sans-serif;
34+ line-height : 1.5 ;
35+ display : flex;
36+ justify-content : center;
37+ padding : 60px 20px ;
38+ min-height : 100vh ;
39+ }
40+
41+ /* 2. Main Container */
42+ .premium-card {
43+ width : 100% ;
44+ max-width : 1200px ;
45+ background : rgba (10 , 11 , 13 , 0.8 );
46+ backdrop-filter : var (--glass-blur );
47+ border : 1px solid var (--border-soft );
48+ border-radius : 24px ;
49+ padding : 40px ;
50+ box-shadow : 0 40px 100px rgba (0 , 0 , 0 , 0.8 );
51+ animation : terminalFadeIn 0.8s ease-out;
52+ }
53+
54+ @keyframes terminalFadeIn {
55+ from { opacity : 0 ; transform : translateY (10px ); }
56+ to { opacity : 1 ; transform : translateY (0 ); }
57+ }
58+
59+ /* 3. System Top Bar */
60+ .system-top-bar {
61+ display : flex;
62+ justify-content : space-between;
63+ align-items : center;
64+ padding : 12px 20px ;
65+ background : rgba (255 , 255 , 255 , 0.03 );
66+ border : 1px solid var (--border-soft );
67+ border-radius : 12px ;
68+ margin-bottom : 40px ;
69+ font-family : 'JetBrains Mono' , monospace;
70+ font-size : 12px ;
71+ letter-spacing : 0.1em ;
72+ color : var (--text-muted );
73+ }
74+
75+ .system-id { color : var (--text-primary ); }
76+
77+ /* 4. Headings */
78+ h1 {
79+ font-size : 48px ;
80+ font-weight : 800 ;
81+ letter-spacing : -0.04em ;
82+ text-align : center;
83+ margin-bottom : 40px ;
84+ text-transform : uppercase;
85+ background : linear-gradient (180deg , # fff 40% , # 94a3b8 100% );
86+ -webkit-background-clip : text;
87+ -webkit-text-fill-color : transparent;
88+ }
89+
90+ /* 5. AITE Pillars (The 4 Columns) */
91+ .pillars-container {
92+ display : grid;
93+ grid-template-columns : repeat (4 , 1fr );
94+ gap : 24px ;
95+ margin-bottom : 0 ; /* ОБНУЛЕНО ДЛЯ ПЛАШКИ */
96+ padding-bottom : 60px ;
97+ border-bottom : 1px solid var (--border-soft );
98+ }
99+
100+ .pillar-item {
101+ display : flex;
102+ gap : 16px ;
103+ align-items : flex-start;
104+ }
105+
106+ .pillar-icon {
107+ width : 48px ;
108+ height : 48px ;
109+ min-width : 48px ;
110+ display : flex;
111+ align-items : center;
112+ justify-content : center;
113+ border : 1px solid var (--border-soft );
114+ border-radius : 8px ;
115+ color : var (--accent-indigo );
116+ font-size : 20px ;
117+ }
118+
119+ .pillar-content {
120+ flex : 1 ;
121+ }
122+
123+ .pillar-title {
124+ font-size : 18px ;
125+ font-weight : 700 ;
126+ margin-bottom : 4px ;
127+ }
128+
129+ .pillar-desc {
130+ font-size : 12px ;
131+ color : var (--text-muted );
132+ line-height : 1.6 ;
133+ }
134+
135+ /* Bridge text decoration — ЦЕНТРОВКА НА ЛИНИИ */
136+ .bridge-text {
137+ font-size : 13px ;
138+ color : var (--text-muted );
139+ text-align : center;
140+ margin : -16px auto 40px ;
141+ padding : 6px 24px ;
142+ background : # 0a0b0d ;
143+ border : 1px solid var (--border-soft );
144+ border-radius : 100px ;
145+ width : fit-content;
146+ position : relative;
147+ z-index : 2 ;
148+ }
149+
150+ /* 6. Dashboard Split Layout */
151+ .dashboard-split {
152+ display : grid;
153+ grid-template-columns : 1fr 1fr ;
154+ gap : 24px ;
155+ }
156+
157+ .panel-card {
158+ background : var (--panel-bg );
159+ border : 1px solid var (--border-soft );
160+ border-radius : 20px ;
161+ padding : 32px ;
162+ text-align : left;
163+ }
164+
165+ .panel-header {
166+ font-family : 'JetBrains Mono' , monospace;
167+ font-size : 12px ;
168+ color : var (--text-muted );
169+ text-transform : uppercase;
170+ letter-spacing : 0.15em ;
171+ margin-bottom : 24px ;
172+ display : flex;
173+ align-items : center;
174+ gap : 10px ;
175+ }
176+
177+ .panel-header ::before {
178+ content : '' ;
179+ width : 8px ;
180+ height : 8px ;
181+ background : var (--accent-indigo );
182+ border-radius : 2px ;
183+ }
184+
185+ /* Profile Zone */
186+ .profile-zone {
187+ display : flex;
188+ gap : 24px ;
189+ }
190+
191+ .profile-img {
192+ width : 140px ;
193+ height : 180px ;
194+ border-radius : 12px ;
195+ object-fit : cover;
196+ filter : grayscale (0.5 );
197+ border : 1px solid var (--border-soft );
198+ flex-shrink : 0 ;
199+ }
200+
201+ .profile-info h2 { font-size : 24px ; font-weight : 800 ; margin-bottom : 4px ; }
202+ .profile-tag { font-size : 11px ; color : var (--accent-indigo ); text-transform : uppercase; font-weight : 600 ; margin-bottom : 16px ; }
203+
204+ .quote {
205+ font-size : 14px ;
206+ color : var (--text-primary );
207+ font-style : italic;
208+ margin : 16px 0 ;
209+ padding-left : 15px ;
210+ border-left : 2px solid var (--accent-indigo );
211+ }
212+
213+ .profile-bio { font-size : 13px ; color : var (--text-muted ); line-height : 1.6 ; }
214+
215+ /* 7. Products Grid */
216+ .products-grid {
217+ display : grid;
218+ grid-template-columns : 1fr 1fr ;
219+ gap : 12px ;
220+ }
221+
222+ .crypto-row {
223+ background : rgba (255 , 255 , 255 , 0.02 );
224+ border : 1px solid var (--border-soft );
225+ padding : 16px 20px ;
226+ border-radius : 12px ;
227+ display : flex;
228+ flex-direction : column;
229+ align-items : flex-start;
230+ text-decoration : none;
231+ color : inherit;
232+ transition : var (--transition );
233+ }
234+
235+ .crypto-header {
236+ display : flex;
237+ justify-content : space-between;
238+ align-items : center;
239+ width : 100% ;
240+ gap : 12px ;
241+ margin-bottom : 8px ;
242+ }
243+
244+ .crypto-name-block {
245+ display : flex;
246+ flex-direction : column;
247+ gap : 2px ;
248+ }
249+
250+ .version-badge {
251+ font-size : 11px ;
252+ font-weight : 700 ;
253+ padding : 4px 10px ;
254+ border-radius : 6px ;
255+ background : rgba (129 , 140 , 248 , 0.15 );
256+ color : # 818cf8 ;
257+ text-transform : uppercase;
258+ white-space : nowrap;
259+ flex-shrink : 0 ;
260+ }
261+
262+ .crypto-description {
263+ font-size : 12px ;
264+ color : var (--text-muted );
265+ margin-top : 4px ;
266+ }
267+
268+ .crypto-row : hover {
269+ background : rgba (255 , 255 , 255 , 0.05 );
270+ border-color : var (--border-bright );
271+ transform : translateY (-2px );
272+ }
273+
274+ .coin-name { font-size : 14px ; font-weight : 700 ; display : block; }
275+ .network-tag { font-size : 10px ; color : var (--text-muted ); }
276+
277+ /* 8. Utility Classes */
278+ .copy-trigger {
279+ font-family : 'JetBrains Mono' , monospace;
280+ cursor : pointer;
281+ transition : var (--transition );
282+ }
283+
284+ .copy-trigger : hover { color : var (--accent-indigo ); }
285+
286+ /* Fuel Slider Support Styles */
287+ .fuel-tab { cursor : pointer; opacity : 0.5 ; transition : 0.3s ; font-family : 'JetBrains Mono' ; font-size : 11px ; }
288+ .fuel-tab .active { opacity : 1 ; color : var (--accent-indigo ); border-bottom : 1px solid var (--accent-indigo ); }
289+
290+ /* 9. Footer (ВОССТАНОВЛЕН) */
291+ footer {
292+ margin-top : 20px ;
293+ padding-top : 20px ;
294+ border-top : 1px solid var (--border-soft );
295+ display : flex;
296+ justify-content : space-between;
297+ font-family : 'JetBrains Mono' , monospace;
298+ font-size : 10px ;
299+ opacity : 0.3 ;
300+ }
301+
302+ /* 10. Responsive */
303+ @media (max-width : 1024px ) {
304+ .dashboard-split { grid-template-columns : 1fr ; }
305+ .pillars-container { grid-template-columns : 1fr 1fr ; }
306+ }
307+
308+ @media (max-width : 600px ) {
309+ .pillars-container { grid-template-columns : 1fr ; }
310+ .products-grid { grid-template-columns : 1fr ; }
311+ .profile-zone { flex-direction : column; }
312+ h1 { font-size : 32px ; }
313+ .premium-card { padding : 20px ; }
314+ }
315+
316+ /* 11. Custom Scrollbar */
317+ ::-webkit-scrollbar { width : 6px ; }
318+ ::-webkit-scrollbar-track { background : var (--bg-color ); }
319+ ::-webkit-scrollbar-thumb { background : var (--border-soft ); border-radius : 10px ; }
320+ ::-webkit-scrollbar-thumb : hover { background : var (--accent-indigo ); }
0 commit comments