From d5f5b5585f7da78daec74f06e344ea3a4ede44c9 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 4 May 2026 11:06:01 +0000 Subject: [PATCH] feat(ux): implement Interactive Tutorial Mode and unify logo branding - Added '/Tutorial' toggle in os2.html with accessible aria-pressed state. - Implemented high-contrast technical term highlights and industrial-style tutorial notes. - Unified RTECH logo styling and animated cursor across index.html and os2.html. - Initialized Palette UX journal and recorded accessibility learnings. - Cleaned up test artifacts and non-production files. Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com> --- .jules/palette.md | 5 +++++ index.html | 22 +++++++++++++++---- os2.html | 55 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 67 insertions(+), 15 deletions(-) create mode 100644 .jules/palette.md diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..79ad00c --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,5 @@ +# Palette Journal - RTECH UX & Accessibility + +## 2025-05-15 - [Consistent Focus Indicators] +**Learning:** High-contrast focus indicators using the 'Lime' accent color (e.g., `outline: 2px solid var(--lime) !important`) are critical for the RTECH terminal aesthetic to ensure keyboard navigation is both functional and on-brand. +**Action:** Always verify that new interactive elements inherit or explicitly define this focus style to maintain WCAG accessibility. diff --git a/index.html b/index.html index 449cb15..8ee2ce7 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,12 @@ .industrial-border { border: 2px solid #27272a; } .license-box { background: #000; border: 1px solid #3f3f46; position: relative; } - .nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; } + .nav-link { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: #a1a1aa; transition: all 0.2s; border-bottom: 2px solid transparent; } .nav-link:hover { color: #fff; border-bottom: 2px solid var(--lime); } + @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } + .terminal-blink { animation: blink 1s step-end infinite; } + .roadmap-card { border-left: 2px solid #3f3f46; transition: all 0.3s ease; } .roadmap-card:hover { border-left-color: var(--lime); background: #111113; } @@ -30,14 +33,19 @@