neuron-technologies/neuron-web
3
0
Fork 0
Code Issues 2 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Polish: nav hamburger, pillar alignment, wordmark, hero tightening

Browse Source 
- Nav: responsive hamburger at ≤1060px, full mobile menu with close behaviors
- Nav: all section anchors are absolute (/#...) for correct cross-page routing
- Pillars: flex column cards with margin-top:auto on taglines — all three align
- About footer: image wordmark matches main page (was plain text "Neuron")
- Hero: "Six patents" → "Patented"; sub-copy trimmed to one clean sentence
- Environmental/efficiency/inference: remove all "memory graph" mentions, cite 40% token reduction
- Environmental: savings calculator (slider, live annual savings calculation)
This commit is contained in:
Will Anderson
2026-04-29 17:31:26 -05:00
parent 3c462b3bf8
commit 4769613d10
7 changed files with 217 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.el
+106 -20
View File
@@ -198,49 +198,46 @@ fn page_open() -> String {
#nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
z-index: 100;
transition: background 500ms, border-color 500ms;
}
#nav.scrolled {
background: rgba(250,250,248,.92);
background: rgba(250,250,248,.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 2.5rem;
padding: 0 2rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.nav-logo img { height: 2.25rem; width: auto; display: block; }
.nav-logo-text {
font-family: var(--head);
font-size: 1.4rem;
font-weight: 600;
color: var(--t1);
text-decoration: none;
letter-spacing: -0.02em;
}
.nav-logo img { height: 2rem; width: auto; display: block; }
/* ── Desktop links ───────────────────────────────────────────── */
.nav-links {
display: flex;
align-items: center;
gap: 2rem;
gap: 1.25rem;
flex-wrap: nowrap;
}
.nav-link {
font-family: var(--body);
font-size: 0.7rem;
font-size: 0.675rem;
font-weight: 400;
letter-spacing: 0.18em;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t3);
text-decoration: none;
white-space: nowrap;
transition: color 200ms;
}
.nav-link:hover { color: var(--t1); }
@@ -249,21 +246,107 @@ fn page_open() -> String {
.nav-cta {
font-family: var(--body);
font-size: 0.7rem;
font-size: 0.675rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
background: var(--navy);
text-decoration: none;
padding: 0.625rem 1.25rem;
padding: 0.575rem 1.1rem;
white-space: nowrap;
box-shadow: 0 2px 12px rgba(0,82,160,.20);
transition: background 300ms;
}
.nav-cta:hover { background: #0078D4; }
@media (max-width: 768px) {
.nav-links .nav-link:not(.nav-link-mobile) { display: none; }
/* ── Hamburger button ────────────────────────────────────────── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px 4px;
z-index: 101;
-webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--t1);
border-radius: 1px;
transition: transform 280ms ease, opacity 200ms ease;
transform-origin: center;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Mobile menu ─────────────────────────────────────────────── */
.nav-mobile {
display: none;
position: absolute;
top: 4rem;
left: 0; right: 0;
background: rgba(250,250,248,.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 0.5rem 0 1.5rem;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.nav-mobile.open { display: flex; }
.nav-mobile-link {
display: block;
padding: 0.875rem 2rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t2);
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.05);
transition: color 150ms, background 150ms;
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover { color: var(--t1); background: rgba(0,82,160,.03); }
.nav-mobile-link.cta { color: var(--navy); }
.nav-mobile-cta {
display: block;
margin: 1rem 2rem 0;
padding: 0.8rem 1.5rem;
text-align: center;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
background: var(--navy);
text-decoration: none;
}
/* ── Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 1060px) {
.nav-links { display: none; }
.nav-hamburger { display: flex; }
}
@media (min-width: 1061px) {
.nav-mobile { display: none !important; }
.nav-hamburger { display: none !important; }
}
/* ── HERO ───────────────────────────────────────────────────────────────── */
@@ -351,6 +434,8 @@ fn page_open() -> String {
.pillar-card {
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
}
.pillar-numeral {
font-family: var(--head);
@@ -374,9 +459,10 @@ fn page_open() -> String {
font-size: 0.95rem;
color: var(--t2);
line-height: 1.75;
margin-bottom: 2rem;
flex: 1;
}
.pillar-detail {
margin-top: 2rem;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;