gator/autotq-modern-ejs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Overhaul nav styling and storytelling typography/background classes

Browse source
This commit is contained in:
gator 2026-03-11 01:03:18 +00:00
parent e4014b3c5d
commit 6957801f36
1 changed files with 38 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
public/css/style.css
View file

@ -23,7 +23,7 @@ body {
var(--bg); var(--bg);
line-height: 1.75; line-height: 1.75;
letter-spacing: 0.01em; letter-spacing: 0.01em;
font-size: 17px; font-size: 18px;
overflow-x: hidden; overflow-x: hidden;
} }
@ -33,13 +33,18 @@ img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 2.25rem)); margin-inline: auto; } .container { width: min(1180px, calc(100% - 2.25rem)); margin-inline: auto; }
.section { padding: 5.75rem 0; } .section { padding: 5.75rem 0; }
.section-alt { .section-alt {
background: linear-gradient(180deg, #fff1f1 0%, #ffe8e8 100%); background: linear-gradient(180deg, #ffe9e9 0%, #ffdede 100%);
border-top: 1px solid #f6d1d1; border-top: 1px solid #f6d1d1;
border-bottom: 1px solid #f6d1d1; border-bottom: 1px solid #f6d1d1;
} }
.story-band { padding: 4.5rem 0; background: linear-gradient(180deg, rgba(200,25,25,.08), rgba(200,25,25,.02)); border-top: 1px solid #f3c3c3; border-bottom: 1px solid #f3c3c3; }
.story-steps { display: grid; gap: 1rem; }
.story-step { padding: 1.1rem 1.15rem; border-left: 4px solid var(--accent); background: rgba(255,255,255,.55); border-radius: 10px; }
.story-kicker { color: #a61c1c; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: .35rem; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; } h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; }
p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); } p { margin: 0 0 1.1rem; font-size: 1.09rem; color: var(--text); }
.site-header { .site-header {
position: sticky; position: sticky;
@ -70,19 +75,16 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
.brand span { font-size: 1.05rem; } .brand span { font-size: 1.05rem; }
.site-nav { .site-nav {
display: flex; display: block;
align-items: center;
gap: 1.2rem;
justify-content: flex-end;
flex-wrap: nowrap;
min-width: 0; min-width: 0;
} }
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; justify-content: flex-end;
flex-wrap: nowrap; gap: .6rem;
flex-wrap: wrap;
min-width: 0; min-width: 0;
} }
@ -91,29 +93,33 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
font-weight: 700; font-weight: 700;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
padding: .4rem .1rem; padding: .58rem .86rem;
border-radius: 0; border-radius: 999px;
border-bottom: 2px solid transparent; border: 1px solid transparent;
background: transparent;
white-space: nowrap; white-space: nowrap;
transition: color .2s ease, border-color .2s ease, transform .2s ease; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
} }
.nav-links a:hover { .nav-links a:hover {
color: var(--accent); color: var(--accent);
border-bottom-color: rgba(200, 25, 25, 0.5); border-color: rgba(200, 25, 25, 0.28);
background: #fff0f0;
transform: translateY(-1px); transform: translateY(-1px);
} }
.nav-links a.active { .nav-links a.active {
color: var(--accent); color: #8d1414;
border-bottom-color: var(--accent); background: #ffe4e4;
border-color: rgba(200, 25, 25, 0.35);
} }
.nav-cta { .nav-cta,
.nav-links a.nav-cta-link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: .7rem 1.1rem; padding: .66rem 1.05rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #b71414; border: 1px solid #b71414;
background: linear-gradient(180deg, #df2a2a 0%, #bf1616 100%); background: linear-gradient(180deg, #df2a2a 0%, #bf1616 100%);
@ -121,13 +127,22 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
font-weight: 800; font-weight: 800;
white-space: nowrap; white-space: nowrap;
box-shadow: 0 8px 16px rgba(161, 14, 14, 0.22); box-shadow: 0 8px 16px rgba(161, 14, 14, 0.22);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
} }
.nav-cta:hover { .nav-cta:hover,
.nav-links a.nav-cta-link:hover {
color: #fff;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(161, 14, 14, 0.3); box-shadow: 0 10px 20px rgba(161, 14, 14, 0.3);
filter: saturate(1.05); filter: saturate(1.05);
border-color: #a91212;
background: linear-gradient(180deg, #e23535 0%, #bb1212 100%);
}
.nav-links a.nav-cta-link.active {
color: #fff;
border-color: #a91212;
background: linear-gradient(180deg, #e23535 0%, #bb1212 100%);
} }
.mobile-toggle { display: none; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: .3rem .35rem; } .mobile-toggle { display: none; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: .3rem .35rem; }
@ -145,7 +160,7 @@ p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); }
h1 { font-size: clamp(2.45rem, 5.3vw, 4.2rem); margin: .25rem 0 .95rem; } h1 { font-size: clamp(2.45rem, 5.3vw, 4.2rem); margin: .25rem 0 .95rem; }
h2 { font-size: clamp(2rem, 3.6vw, 2.85rem); margin: 0 0 1rem; } h2 { font-size: clamp(2rem, 3.6vw, 2.85rem); margin: 0 0 1rem; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .65rem; } h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .65rem; }
.lead { color: var(--muted); font-size: 1.18rem; max-width: 68ch; } .lead { color: var(--muted); font-size: 1.22rem; max-width: 68ch; }
.hero-actions { display: flex; gap: .85rem; margin-top: 1.5rem; flex-wrap: wrap; } .hero-actions { display: flex; gap: .85rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn { .btn {
@ -369,5 +384,5 @@ select:focus-visible {
} }
.section { padding: 4.25rem 0; } .section { padding: 4.25rem 0; }
body { font-size: 16.5px; } body { font-size: 17px; }
} }