Skip to content

Commit 9679c0b

Browse files
nbschultz97nbschultz97
authored
Merge pull request #9 from nbschultz97/codex/fix-sidebar-empty-icons-and-image-contrast
Improve image contrast and mobile nav controls
2 parents b7011b8 + d9c9063 commit 9679c0b

File tree

10 files changed

+89
-44
lines changed

10 files changed

+89
-44
lines changed

‎careers.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -114,7 +114,7 @@ <h2 class="text-2xl font-semibold text-[color:var(--white)]">No perfect fit yet?
114114
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
115115
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
116116
<div class="flex items-center gap-4">
117-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
117+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
118118
<div>
119119
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
120120
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎company.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -143,7 +143,7 @@ <h3 class="text-xl font-semibold text-[color:var(--white)]">Edge compute without
143143
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
144144
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
145145
<div class="flex items-center gap-4">
146-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
146+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
147147
<div>
148148
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
149149
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎contact.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -63,7 +63,7 @@
6363
<div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr]">
6464
<div class="card-glass p-8 space-y-6">
6565
<div class="flex items-center gap-4">
66-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-16 w-16" />
66+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-16 w-16 image-surface" />
6767
<div>
6868
<h1 class="text-3xl font-bold text-[color:var(--white)]">Contact Ceradon Systems</h1>
6969
<p class="text-sm text-subtle">Trusted RF sensing for the edge.</p>
@@ -114,7 +114,7 @@ <h2 class="text-2xl font-semibold text-[color:var(--white)]">Operations Hub</h2>
114114
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
115115
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
116116
<div class="flex items-center gap-4">
117-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
117+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
118118
<div>
119119
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
120120
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -82,7 +82,7 @@
8282
<span class="w-2 h-2 rounded-full bg-[color:var(--ceradon-blue)]"></span>
8383
Passive RF Situational Awareness
8484
</div>
85-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-24 w-24 sm:h-32 sm:w-32" />
85+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-24 w-24 sm:h-32 sm:w-32 image-surface" />
8686
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-[color:var(--white)] leading-tight">
8787
Vantage Scanner: Through-wall pose intelligence.
8888
</h1>
@@ -214,7 +214,7 @@ <h2 class="section-heading text-3xl">Adapt Vantage to any mission profile</h2>
214214
</div>
215215
<div class="grid gap-6 md:grid-cols-3">
216216
<div class="card-glass p-6 space-y-3">
217-
<div class="h-12 w-12 rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
217+
<div class="h-12 w-12 image-surface rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
218218
<svg class="h-6 w-6 text-[color:var(--ceradon-blue)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
219219
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18m6-6-6 6-6-6" />
220220
</svg>
@@ -223,7 +223,7 @@ <h3 class="text-xl font-semibold text-[color:var(--white)]">Tripod ISR Node</h3>
223223
<p class="text-sm text-subtle">Extended overwatch with replaceable power packs and multi-sector monitoring.</p>
224224
</div>
225225
<div class="card-glass p-6 space-y-3">
226-
<div class="h-12 w-12 rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
226+
<div class="h-12 w-12 image-surface rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
227227
<svg class="h-6 w-6 text-[color:var(--ceradon-blue)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
228228
<path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h10m-6 5h6" />
229229
</svg>
@@ -232,7 +232,7 @@ <h3 class="text-xl font-semibold text-[color:var(--white)]">Handheld Breach Kit<
232232
<p class="text-sm text-subtle">Rapid entry support with haptic alerts for presence, pose, and motion vectors.</p>
233233
</div>
234234
<div class="card-glass p-6 space-y-3">
235-
<div class="h-12 w-12 rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
235+
<div class="h-12 w-12 image-surface rounded-full bg-[color:var(--steel-700)]/70 flex items-center justify-center">
236236
<svg class="h-6 w-6 text-[color:var(--ceradon-blue)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
237237
<path stroke-linecap="round" stroke-linejoin="round" d="m5 11 7-7 7 7m-7-7v18" />
238238
</svg>
@@ -304,7 +304,7 @@ <h3 class="text-xl font-semibold text-[color:var(--white)]">Disseminate securely
304304
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
305305
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
306306
<div class="flex items-center gap-4">
307-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
307+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
308308
<div>
309309
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
310310
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎ip.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -106,7 +106,7 @@ <h2 class="text-2xl font-semibold text-[color:var(--white)]">Need deeper technic
106106
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
107107
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
108108
<div class="flex items-center gap-4">
109-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
109+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
110110
<div>
111111
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
112112
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎privacy.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
<body class="bg-[color:var(--ink)] text-[color:var(--silver)]">
4444
<header class="backdrop-blur bg-[color:var(--steel-900)/70] sticky top-0 z-50 border-b border-[color:var(--steel-700)]">
4545
<div class="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
46-
<a href="index.html"><img class="hidden sm:block h-10" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47-
<img class="sm:hidden h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
46+
<a href="index.html"><img class="hidden sm:block h-10 logo-glow" src="./assets/Horizontal_Logo.PNG" alt="Ceradon Systems logo"/>
47+
<img class="sm:hidden h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark"/></a>
4848
<nav class="hidden md:flex gap-6">
4949
<!-- add active link state using aria-current="page" -->
5050
<a href="index.html" class="navlink">Home</a>
@@ -54,7 +54,7 @@
5454
<a href="careers.html" class="navlink">Careers</a>
5555
<a href="contact.html" class="btn btn-primary">Contact</a>
5656
</nav>
57-
<button class="md:hidden" aria-label="Open menu" data-open-menu>☰</button>
57+
<button class="md:hidden icon-button" aria-label="Open menu" data-open-menu>☰</button>
5858
</div>
5959
<!-- mobile panel injected by /src/ui.js -->
6060
</header>
@@ -77,7 +77,7 @@ <h1 class="text-4xl font-bold text-[color:var(--white)]">Privacy Policy</h1>
7777
<div class="mx-auto max-w-7xl px-4 py-12 space-y-10">
7878
<div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
7979
<div class="flex items-center gap-4">
80-
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12" />
80+
<img src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" class="h-12 w-12 image-surface" />
8181
<div>
8282
<p class="font-semibold text-[color:var(--white)]">Ceradon Systems</p>
8383
<p class="text-sm text-subtle">Passive RF sensing for decisive teams.</p>

‎src/ui.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ function buildMobileNav(header) {
8383
panel.style.zIndex = '70';
8484
panel.innerHTML = `
8585
<div class="px-6 py-5 flex items-center justify-between border-b border-[color:var(--steel-700)]">
86-
<img class="h-10" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" />
87-
<button class="text-2xl" aria-label="Close menu" data-close-menu>&times;</button>
86+
<img class="h-10 logo-glow" src="./assets/Square_Logo.PNG" alt="Ceradon Systems mark" />
87+
<button class="text-2xl icon-button" aria-label="Close menu" data-close-menu>&times;</button>
8888
</div>
8989
<div class="flex-1 overflow-y-auto px-6 py-6">
9090
<div class="flex flex-col gap-4" data-mobile-nav></div>

‎styles/styles.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,51 @@ img {
6969
display: block;
7070
}
7171

72+
.logo-glow {
73+
filter: drop-shadow(0 6px 18px rgba(86, 183, 255, 0.55));
74+
}
75+
76+
.icon-button {
77+
display: inline-flex;
78+
align-items: center;
79+
justify-content: center;
80+
gap: 0.35rem;
81+
padding: 0.45rem 0.7rem;
82+
border-radius: 0.85rem;
83+
border: 1px solid rgba(86, 183, 255, 0.35);
84+
background: rgba(17, 26, 44, 0.82);
85+
color: var(--white);
86+
box-shadow: 0 10px 24px rgba(3, 5, 10, 0.35), inset 0 0 0 1px rgba(244, 246, 251, 0.04);
87+
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
88+
}
89+
90+
.icon-button:hover,
91+
.icon-button:focus-visible {
92+
border-color: rgba(86, 183, 255, 0.65);
93+
box-shadow: 0 16px 30px rgba(43, 120, 255, 0.35), inset 0 0 0 1px rgba(244, 246, 251, 0.08);
94+
transform: translateY(-1px);
95+
outline: 2px solid rgba(86, 183, 255, 0.6);
96+
outline-offset: 2px;
97+
}
98+
99+
.image-surface {
100+
display: inline-block;
101+
padding: 0.75rem;
102+
border-radius: 1rem;
103+
background: radial-gradient(circle at 20% 20%, rgba(86, 183, 255, 0.08), rgba(11, 18, 30, 0.95)),
104+
linear-gradient(140deg, rgba(244, 246, 251, 0.04), rgba(11, 18, 30, 0.92));
105+
border: 1px solid rgba(86, 183, 255, 0.28);
106+
box-shadow: inset 0 0 0 1px rgba(244, 246, 251, 0.05), 0 18px 42px rgba(3, 5, 10, 0.45);
107+
}
108+
109+
.image-surface img,
110+
img.image-surface {
111+
border-radius: 0.75rem;
112+
background: radial-gradient(circle at 50% 35%, rgba(86, 183, 255, 0.06), rgba(11, 18, 30, 0.9));
113+
border: 1px solid rgba(86, 183, 255, 0.2);
114+
box-shadow: 0 10px 24px rgba(3, 5, 10, 0.35);
115+
}
116+
72117
.navlink {
73118
position: relative;
74119
font-weight: 500;

0 commit comments

Comments
 (0)