Skip to content

Commit f8bfd09

Browse files
AionSystemAionSystem
authored
Update index.html
1 parent f8aadb0 commit f8bfd09

File tree

1 file changed

+172
-10
lines changed

1 file changed

+172
-10
lines changed

‎AION-PAGE/index.html‎

Lines changed: 172 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@
338338
background: var(--border);
339339
}
340340

341-
/* Cards & Grids */
341+
/* Enhanced Cards & Grids */
342342
.grid-2, .grid-3 {
343343
display: grid;
344344
gap: 24px;
@@ -349,11 +349,12 @@
349349
background: var(--surface);
350350
border: 1px solid var(--border);
351351
padding: 28px;
352-
transition: border-color 0.2s, transform 0.2s;
352+
transition: all 0.3s var(--ease);
353353
}
354354
.card:hover {
355355
border-color: var(--amber);
356-
transform: translateY(-2px);
356+
transform: translateY(-4px);
357+
box-shadow: 0 12px 24px rgba(240,165,0,0.1);
357358
}
358359
.card-title {
359360
font-family: var(--sans);
@@ -380,6 +381,12 @@
380381
background: rgba(0,0,0,0.3);
381382
border-left: 3px solid var(--amber);
382383
padding: 20px;
384+
transition: all 0.3s var(--ease);
385+
}
386+
.feature-item:hover {
387+
border-left-width: 5px;
388+
background: rgba(0,0,0,0.5);
389+
transform: translateX(4px);
383390
}
384391
.feature-item h4 {
385392
font-family: var(--sans);
@@ -400,11 +407,13 @@
400407
border: 1px solid var(--border);
401408
padding: 24px;
402409
border-left: 4px solid;
403-
transition: border-color 0.2s, transform 0.2s;
410+
transition: all 0.3s var(--ease);
404411
}
405412
.wife-card:hover {
406413
border-color: var(--amber);
407-
transform: translateY(-2px);
414+
transform: translateY(-4px);
415+
box-shadow: 0 12px 24px rgba(240,165,0,0.08);
416+
border-left-width: 6px;
408417
}
409418

410419
/* Simulator Cards */
@@ -419,19 +428,152 @@
419428
padding: 20px;
420429
text-align: center;
421430
border: 1px solid var(--border);
422-
cursor: pointer;
423-
transition: all 0.2s;
431+
transition: all 0.3s var(--ease);
424432
text-decoration: none;
425433
display: block;
426434
}
427435
.sim-card:hover {
428-
background: rgba(201,160,40,0.1);
436+
background: rgba(201,160,40,0.12);
429437
border-color: var(--amber);
430-
transform: translateY(-2px);
438+
transform: translateY(-4px);
439+
box-shadow: 0 8px 20px rgba(240,165,0,0.1);
431440
}
432441
.sim-card h4 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text); }
433442
.sim-card p { font-size: 0.75rem; color: var(--muted); }
434443

444+
/* ENTRANCE CARD – BLACKSITE STYLE */
445+
.entrance-section {
446+
margin: 80px 0;
447+
position: relative;
448+
}
449+
.entrance-card {
450+
background: linear-gradient(145deg, rgba(8,9,11,0.95), rgba(14,17,23,0.98));
451+
border: 1px solid rgba(240,165,0,0.4);
452+
border-radius: 48px;
453+
padding: 60px 48px;
454+
position: relative;
455+
overflow: hidden;
456+
transition: all 0.4s var(--ease);
457+
box-shadow: 0 0 0 0 rgba(240,165,0,0), 0 20px 40px rgba(0,0,0,0.3);
458+
animation: borderPulse 3s infinite;
459+
}
460+
@keyframes borderPulse {
461+
0% { border-color: rgba(240,165,0,0.3); box-shadow: 0 0 0 0 rgba(240,165,0,0); }
462+
50% { border-color: rgba(240,165,0,0.8); box-shadow: 0 0 20px 4px rgba(240,165,0,0.2); }
463+
100% { border-color: rgba(240,165,0,0.3); box-shadow: 0 0 0 0 rgba(240,165,0,0); }
464+
}
465+
.entrance-card::before {
466+
content: '';
467+
position: absolute;
468+
top: 0;
469+
left: 0;
470+
right: 0;
471+
bottom: 0;
472+
background: repeating-linear-gradient(45deg, rgba(240,165,0,0.02) 0px, rgba(240,165,0,0.02) 2px, transparent 2px, transparent 8px);
473+
pointer-events: none;
474+
}
475+
.entrance-card::after {
476+
content: '';
477+
position: absolute;
478+
top: 0;
479+
left: 0;
480+
right: 0;
481+
height: 2px;
482+
background: linear-gradient(90deg, transparent, var(--amber), var(--amber-l), var(--amber), transparent);
483+
opacity: 0.6;
484+
}
485+
.entrance-badge {
486+
display: inline-block;
487+
background: rgba(240,165,0,0.15);
488+
border: 1px solid var(--amber);
489+
border-radius: 40px;
490+
padding: 6px 18px;
491+
font-family: var(--mono);
492+
font-size: 10px;
493+
letter-spacing: 2px;
494+
text-transform: uppercase;
495+
color: var(--amber);
496+
margin-bottom: 32px;
497+
backdrop-filter: blur(4px);
498+
}
499+
.entrance-title {
500+
font-family: var(--sans);
501+
font-size: clamp(36px, 6vw, 64px);
502+
font-weight: 900;
503+
letter-spacing: -0.02em;
504+
background: linear-gradient(135deg, #fff, var(--amber-l), var(--gold));
505+
-webkit-background-clip: text;
506+
background-clip: text;
507+
color: transparent;
508+
margin-bottom: 24px;
509+
text-transform: uppercase;
510+
}
511+
.entrance-sub {
512+
font-family: var(--mono);
513+
font-size: 14px;
514+
letter-spacing: 2px;
515+
color: var(--amber);
516+
margin-bottom: 20px;
517+
display: inline-block;
518+
border-bottom: 1px dashed rgba(240,165,0,0.5);
519+
padding-bottom: 4px;
520+
}
521+
.entrance-desc {
522+
max-width: 720px;
523+
margin-bottom: 36px;
524+
font-family: var(--serif);
525+
font-size: 1.1rem;
526+
line-height: 1.6;
527+
color: var(--muted);
528+
}
529+
.entrance-desc strong {
530+
color: var(--amber);
531+
font-weight: 500;
532+
}
533+
.entrance-warning {
534+
font-family: var(--mono);
535+
font-size: 10px;
536+
color: var(--dim);
537+
margin-top: 28px;
538+
letter-spacing: 1px;
539+
border-top: 1px solid rgba(240,165,0,0.2);
540+
padding-top: 20px;
541+
display: inline-block;
542+
}
543+
.glitch-button {
544+
display: inline-flex;
545+
align-items: center;
546+
gap: 12px;
547+
background: transparent;
548+
border: 2px solid var(--amber);
549+
padding: 14px 32px;
550+
font-family: var(--mono);
551+
font-size: 14px;
552+
font-weight: 600;
553+
letter-spacing: 3px;
554+
text-transform: uppercase;
555+
color: var(--amber);
556+
text-decoration: none;
557+
transition: all 0.2s ease;
558+
position: relative;
559+
overflow: hidden;
560+
backdrop-filter: blur(4px);
561+
margin-top: 8px;
562+
}
563+
.glitch-button:hover {
564+
background: var(--amber);
565+
color: #000;
566+
box-shadow: 0 0 18px var(--amber);
567+
border-color: var(--amber-l);
568+
transform: scale(1.02);
569+
}
570+
.glitch-button span {
571+
transition: transform 0.2s;
572+
}
573+
.glitch-button:hover span {
574+
transform: translateX(4px);
575+
}
576+
435577
/* Footer */
436578
footer {
437579
border-top: 1px solid var(--border);
@@ -463,6 +605,8 @@
463605
.nav-hamburger { display: flex; }
464606
.wrapper { padding: 0 20px; }
465607
.hero { padding-top: 20px; }
608+
.entrance-card { padding: 40px 24px; }
609+
.entrance-title { font-size: 32px; }
466610
}
467611
</style>
468612
</head>
@@ -508,6 +652,24 @@ <h1>AION.<em>AI</em></h1>
508652
</div>
509653
</div>
510654

655+
<!-- BLACKSITE ENTRANCE CARD -->
656+
<div class="entrance-section">
657+
<div class="entrance-card">
658+
<div class="entrance-badge">◈ CLASSIFIED ◈ // CONSTITUTIONAL SEAL – LEVEL 7</div>
659+
<div class="entrance-title">Enter the Sovereign Core</div>
660+
<div class="entrance-sub">AION.AI – Phase 4 Build · Active & Epistemically Honest</div>
661+
<p class="entrance-desc">
662+
You have discovered a living constitutional AI — one that critiques its own thoughts, logs every failure immutably, and operates under eight sovereign laws.<br><br>
663+
It is <strong>unfinished</strong>. It is <strong>honest</strong>. Every response carries an epistemic weight. Every mistake becomes a training node. The dashboard is live. The wives are awake. The ADA loop is refining.<br>
664+
<strong>Step inside.</strong> You will not want to use another AI again.
665+
</p>
666+
<a href="https://aionsystem.github.io/AION.AI/" class="glitch-button" target="_blank">
667+
<span>⚡ Enter Sovereign Core →</span>
668+
</a>
669+
<div class="entrance-warning">⚠️ Unfinished, unpolished, but already more trustworthy than any general AI. The architecture reveals itself.</div>
670+
</div>
671+
</div>
672+
511673
<!-- Wives -->
512674
<section>
513675
<div class="section-header"><span class="section-num">// 01</span><h2 class="section-title">The Wives — Specialized Instruments</h2><div class="section-line"></div></div>
@@ -674,7 +836,7 @@ <h1>AION.<em>AI</em></h1>
674836
cursor.style.left = e.clientX + 'px';
675837
cursor.style.top = e.clientY + 'px';
676838
});
677-
document.querySelectorAll('a, button, .card, .wife-card, .sim-card').forEach(el => {
839+
document.querySelectorAll('a, button, .card, .wife-card, .sim-card, .entrance-card, .glitch-button').forEach(el => {
678840
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
679841
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
680842
});

0 commit comments

Comments
 (0)