From 4a09d9824977a71cea2a460df4d15f42fa8993ce Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 5 May 2026 09:16:29 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Unified=20branding=20?= =?UTF-8?q?and=20navigation=20layout=20shift=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Unifies RTECH logo across index.html and os2.html with an animated terminal cursor effect. - Converts index.html logo to a link for better navigation intuition. - Fixes navigation layout shifts on hover by initializing .nav-link with a transparent border. - Harmonizes navigation link styling (leading / prefix) across pages. - Updates .jules/palette.md with key UX learnings. Co-authored-by: rtech-technologies <254326487+rtech-technologies@users.noreply.github.com> --- .jules/palette.md | 7 +++++++ index.html | 9 ++++++--- os2.html | 15 +++++++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) create mode 100644 .jules/palette.md diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..a3f9d80 --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,7 @@ +## 2025-05-15 - Navigation Layout Shift Fix +**Learning:** Adding a border on hover to navigation links (e.g., `border-bottom`) causes a vertical layout shift if the border isn't already accounted for in the element's height. This creates a jittery "jump" effect that feels unpolished. +**Action:** Initialize navigation links with a transparent border of the same width (`border-bottom: 2px solid transparent;`). On hover, only change the `border-color` (`border-bottom-color: var(--lime);`) to ensure the layout remains stable. + +## 2025-05-15 - Unified Terminal Branding +**Learning:** Brand identity is reinforced by consistent interactive elements. A terminal-style blinking cursor (`_`) on the logo provides a subtle but high-impact "live" feel that aligns with the sovereign tech aesthetic. +**Action:** Use a CSS animation with `step-end` to simulate a blinking cursor (`@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`) and apply it to a dedicated cursor span in the logo. diff --git a/index.html b/index.html index 449cb15..d5c3e2a 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:hover { color: #fff; border-bottom: 2px solid var(--lime); } + .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-color: 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,7 +33,7 @@