Skip to content

Commit 7566391

Browse files
🎨 Palette: Micro-UX and Accessibility Enhancements
This PR implements several small but high-impact UX and accessibility improvements across the site: ♿ Accessibility: - Added 'Skip to Content' links to index.html and os2.html for keyboard navigation. - Configured <main> targets with id="main-content" and tabindex="-1". - Implemented high-contrast :focus-visible outlines using the RTECH lime accent color. - Increased contrast for navigation and secondary text to meet WCAG AA standards (Zinc/Slate-400). ✨ Interaction: - Enabled smooth scrolling for index.html. - Added logic to os2.html to disable the download button if the ISO mirror check fails, preventing confusing clicks. 🧹 Cleanup: - Removed accidental AI dialogue injection from index.html. Verified using Playwright (internal script) and visual inspection. Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com>
1 parent b992727 commit 7566391

2 files changed

Lines changed: 25 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
Understood. We're keeping the focus purely on the **RTECH** mission: hardware sovereignty, the right to mod, and the 2026 roadmap. I have removed the anti-corporate rhetoric to focus on the positive "Sovereign Industrial" identity and added the official contact point.
2-
3-
### RTECH | Sovereign Industrial Root (`index.html`)
4-
5-
```html
61
<!DOCTYPE html>
72
<html lang="en">
83
<head>
@@ -14,19 +9,23 @@
149
<style>
1510
:root { --lime: #a3e635; --zinc-950: #09090b; }
1611
* { border-radius: 0 !important; font-family: 'JetBrains Mono', monospace; }
17-
body { background: var(--zinc-950); color: #fff; line-height: 1.2; }
12+
*:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 2px; }
13+
body { background: var(--zinc-950); color: #fff; line-height: 1.2; scroll-behavior: smooth; }
1814

1915
.industrial-border { border: 2px solid #27272a; }
2016
.license-box { background: #000; border: 1px solid #3f3f46; position: relative; }
2117

22-
.nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #71717a; transition: all 0.2s; }
18+
.nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; }
2319
.nav-link:hover { color: #fff; border-bottom: 2px solid var(--lime); }
2420

2521
.roadmap-card { border-left: 2px solid #3f3f46; transition: all 0.3s ease; }
2622
.roadmap-card:hover { border-left-color: var(--lime); background: #111113; }
2723
</style>
2824
</head>
2925
<body class="selection:bg-lime-500 selection:text-black">
26+
<a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:bg-lime-500 focus:text-black focus:px-4 focus:py-2 focus:font-black focus:uppercase focus:text-xs">
27+
Skip to content
28+
</a>
3029

3130
<nav class="border-b-2 border-white bg-black sticky top-0 z-50">
3231
<div class="max-w-7xl mx-auto px-6 flex justify-between h-20 items-center">
@@ -46,7 +45,7 @@
4645
</div>
4746
</nav>
4847

49-
<main>
48+
<main id="main-content" tabindex="-1" class="focus:outline-none">
5049
<section class="relative pt-32 pb-32 px-6 border-b border-zinc-900 overflow-hidden">
5150
<div class="max-w-7xl mx-auto relative z-10">
5251
<div class="bg-white text-black inline-block px-3 py-1 text-[10px] font-black uppercase mb-6 italic">Property Standards Verified</div>
@@ -76,7 +75,7 @@ <h3 class="text-5xl font-black uppercase italic mb-8 text-white">Sovereignty is
7675
</div>
7776
<div class="industrial-border p-12 bg-zinc-900/50">
7877
<h4 class="text-white font-black mb-6 uppercase tracking-widest italic">Hardware Identity</h4>
79-
<p class="text-[10px] text-zinc-500 font-bold uppercase mb-8">RTECH is currently focused on core silicon and workstation nodes. Mobile form factors are currently in research.</p>
78+
<p class="text-[10px] text-zinc-400 font-bold uppercase mb-8">RTECH is currently focused on core silicon and workstation nodes. Mobile form factors are currently in research.</p>
8079
<div class="space-y-4 text-xs font-bold uppercase">
8180
<div class="flex justify-between border-b border-zinc-800 pb-2"><span>Logic Style:</span> <span>One-Line_Step</span></div>
8281
<div class="flex justify-between border-b border-zinc-800 pb-2"><span>User State:</span> <span class="text-lime-500 font-black">ROOT_SOVEREIGN</span></div>
@@ -91,11 +90,11 @@ <h2 class="text-xs font-black uppercase tracking-[0.5em] text-lime-500 mb-16 ita
9190
<div class="grid md:grid-cols-2 gap-8">
9291
<div class="roadmap-card p-10">
9392
<h4 class="text-xl font-black uppercase italic mb-4">The R1 Node</h4>
94-
<p class="text-xs font-bold uppercase text-zinc-500 leading-relaxed">The primary desktop architecture. Designed for direct OS*2 integration and high-performance modding environments.</p>
93+
<p class="text-xs font-bold uppercase text-zinc-400 leading-relaxed">The primary desktop architecture. Designed for direct OS*2 integration and high-performance modding environments.</p>
9594
</div>
9695
<div class="roadmap-card p-10">
9796
<h4 class="text-xl font-black uppercase italic mb-4">Sovereign Server Units</h4>
98-
<p class="text-xs font-bold uppercase text-zinc-500 leading-relaxed">Scaling property rights to the rack. High-density compute nodes with zero remote management backdoors.</p>
97+
<p class="text-xs font-bold uppercase text-zinc-400 leading-relaxed">Scaling property rights to the rack. High-density compute nodes with zero remote management backdoors.</p>
9998
</div>
10099
</div>
101100
</div>
@@ -133,7 +132,7 @@ <h4 class="text-lime-500 font-black text-sm mb-4 uppercase">03. Commercial Logic
133132
<section class="py-40 px-6 text-center">
134133
<h2 class="text-4xl font-black uppercase italic mb-8">Direct Technical Interface.</h2>
135134
<div class="mb-12">
136-
<p class="text-zinc-500 font-bold uppercase text-xs mb-4">Inquiries / Commercial Registration:</p>
135+
<p class="text-zinc-400 font-bold uppercase text-xs mb-4">Inquiries / Commercial Registration:</p>
137136
<a href="mailto:richardwojc@gmail.com" class="text-2xl font-black text-white hover:text-lime-500 transition-colors">richardwojc@gmail.com</a>
138137
</div>
139138
<a href="os2.html" class="inline-block border-2 border-white px-16 py-6 font-black text-xl uppercase hover:bg-lime-500 hover:text-black transition-all">
@@ -142,11 +141,10 @@ <h2 class="text-4xl font-black uppercase italic mb-8">Direct Technical Interface
142141
</section>
143142
</main>
144143

145-
<footer class="p-12 border-t-2 border-white bg-black flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-zinc-600">
144+
<footer class="p-12 border-t-2 border-white bg-black flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-zinc-400">
146145
<div>RTECH-TECHNOLOGIES // &copy; 2026</div>
147146
<div class="italic">Respect People's Property.</div>
148147
</footer>
149148

150149
</body>
151150
</html>
152-
```

‎os2.html‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<style>
1010
:root { --lime: #a3e635; --slate-950: #020617; }
1111
* { border-radius: 0 !important; font-family: 'JetBrains Mono', monospace; }
12+
*:focus-visible { outline: 2px solid var(--lime) !important; outline-offset: 2px; }
1213
body { background: var(--slate-950); color: #f8fafc; line-height: 1.6; scroll-behavior: smooth; }
1314

1415
.enterprise-border { border: 1px solid #1e293b; }
@@ -35,12 +36,15 @@
3536
</style>
3637
</head>
3738
<body class="selection:bg-lime-500 selection:text-black">
39+
<a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:bg-lime-500 focus:text-black focus:px-4 focus:py-2 focus:font-black focus:uppercase focus:text-xs">
40+
Skip to content
41+
</a>
3842

3943
<nav class="border-b border-slate-800 bg-slate-950/90 backdrop-blur-xl sticky top-0 z-50">
4044
<div class="max-w-7xl mx-auto px-6 flex justify-between h-20 items-center">
4145
<div class="flex items-center gap-12">
4246
<a href="index.html" class="font-black text-2xl tracking-tighter hover:text-lime-500 transition-colors uppercase">RTECH</a>
43-
<div class="hidden lg:flex gap-10 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">
47+
<div class="hidden lg:flex gap-10 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
4448
<a href="#about" class="hover:text-white">Specs</a>
4549
<a href="#testing" class="hover:text-white">VM_Guidance</a>
4650
<a href="#deployment" class="text-lime-500 underline underline-offset-8">Deployment</a>
@@ -50,7 +54,7 @@
5054
</div>
5155
</nav>
5256

53-
<main class="max-w-7xl mx-auto px-6 py-24">
57+
<main id="main-content" tabindex="-1" class="max-w-7xl mx-auto px-6 py-24 focus:outline-none">
5458

5559
<header class="mb-32">
5660
<h1 class="text-7xl md:text-9xl font-black mb-10 tracking-tighter italic uppercase leading-none">
@@ -72,11 +76,11 @@ <h3 class="text-4xl font-black uppercase italic mb-8">One Line, One Step.</h3>
7276
<div class="space-y-6">
7377
<div class="enterprise-border p-6">
7478
<h4 class="text-lime-500 font-black text-xs uppercase mb-2">Respect Property Protocol</h4>
75-
<p class="text-[11px] text-slate-500 uppercase font-bold">The OS is your property. RTECH cannot remote-wipe, update without consent, or access your local file table.</p>
79+
<p class="text-[11px] text-slate-400 uppercase font-bold">The OS is your property. RTECH cannot remote-wipe, update without consent, or access your local file table.</p>
7680
</div>
7781
<div class="enterprise-border p-6">
7882
<h4 class="text-lime-500 font-black text-xs uppercase mb-2">The Zest UI</h4>
79-
<p class="text-[11px] text-slate-500 uppercase font-bold">High-contrast, zero-latency interface designed for aggressive decorators and heavy industry.</p>
83+
<p class="text-[11px] text-slate-400 uppercase font-bold">High-contrast, zero-latency interface designed for aggressive decorators and heavy industry.</p>
8084
</div>
8185
</div>
8286
</div>
@@ -109,23 +113,23 @@ <h3 class="text-2xl font-black uppercase italic mb-6 text-white">Virtualization
109113
</section>
110114

111115
<section id="deployment" class="pt-24 border-t-4 border-white">
112-
<h2 class="text-xs font-black uppercase tracking-[0.6em] text-slate-500 mb-12 italic">// 03_DEPLOYMENT_NODE</h2>
116+
<h2 class="text-xs font-black uppercase tracking-[0.6em] text-slate-400 mb-12 italic">// 03_DEPLOYMENT_NODE</h2>
113117
<div class="flex items-center gap-3 mb-10">
114118
<span class="status-pulse"></span>
115119
<span class="text-[11px] font-black uppercase tracking-[0.5em] text-lime-500" id="system-status">Checking Build Mirror...</span>
116120
</div>
117121

118122
<div class="grid lg:grid-cols-3 gap-12">
119123
<div class="lg:col-span-2">
120-
<p class="text-slate-500 font-bold uppercase text-xs mb-10">
124+
<p class="text-slate-400 font-bold uppercase text-xs mb-10">
121125
The "Download" button will activate once the RTECH-Mirror has verified the latest ISO build for your region.
122126
</p>
123127
<button id="download-btn" class="btn-pending">
124128
Initializing...
125129
</button>
126130
</div>
127131
<div class="bg-black p-8 border border-slate-800">
128-
<h4 class="text-[10px] font-black text-slate-500 uppercase mb-6 tracking-widest">Staging_Inventory</h4>
132+
<h4 class="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest">Staging_Inventory</h4>
129133
<ul class="text-[10px] font-bold uppercase space-y-4 text-slate-400">
130134
<li class="flex justify-between border-b border-slate-900 pb-2"><span>Architecture:</span> <span class="text-white">x86_64_R1</span></li>
131135
<li class="flex justify-between border-b border-slate-900 pb-2"><span>Environment:</span> <span class="text-white">VMware_Ready</span></li>
@@ -137,7 +141,7 @@ <h4 class="text-[10px] font-black text-slate-500 uppercase mb-6 tracking-widest"
137141
</main>
138142

139143
<footer class="border-t border-slate-900 py-16 px-6 mt-32 bg-black">
140-
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-[10px] font-black uppercase tracking-[0.5em] text-slate-700">
144+
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-[10px] font-black uppercase tracking-[0.5em] text-slate-400">
141145
<span>RTECH_CORPORATE // 2026 // ISO_DEPLOYMENT_STATION</span>
142146
<span class="mt-4 md:mt-0 italic">Respecting User Property Since 2024.</span>
143147
</div>
@@ -162,6 +166,7 @@ <h4 class="text-[10px] font-black text-slate-500 uppercase mb-6 tracking-widest"
162166
} catch (error) {
163167
btn.innerText = "Coming Soon 2026";
164168
btn.className = "btn-pending";
169+
btn.disabled = true;
165170
status.innerText = "Status: Mirror_Sync_In_Progress";
166171
}
167172
}

0 commit comments

Comments
 (0)