Skip to content

Economy subnav redesign: one sticky bar with country capsule and underline topic tabs #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vahid-ahmadi merged 1 commit into from
Jul 29, 2026
+129 −118
Merged

Economy subnav redesign: one sticky bar with country capsule and underline topic tabs #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions economy/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,24 @@ <h1 class="reveal page-title" style="--d:1">The UK economy, with every number ti
</div>
</section>

<nav class="economy-country-switch" aria-label="Choose an economy">
<span class="mono">Economy</span>
<a href="/economy" aria-current="page"><small>UK</small>United Kingdom</a>
<a href="/economy/us"><small>US</small>United States</a>
</nav>

<nav class="economy-topics" aria-label="UK economy topics">
<a href="#now">At a glance</a>
<a href="#outlook">Forecast</a>
<a href="#trends">Trends</a>
<a href="#indicators">Activity &amp; prices</a>
<a href="#markets">Rates &amp; markets</a>
<a href="#releases">Releases</a>
<nav class="economy-subnav" aria-label="UK economy navigation">
<div class="economy-subnav-row">
<div class="economy-subnav-scope">
<span class="economy-subnav-label mono">Economy</span>
<span class="economy-subnav-countries" aria-label="Choose an economy">
<a href="/economy" aria-current="page"><small>UK</small><span>United Kingdom</span></a>
<a href="/economy/us"><small>US</small><span>United States</span></a>
</span>
</div>
<div class="economy-topics">
<a href="#now">At a glance</a>
<a href="#outlook">Forecast</a>
<a href="#trends">Trends</a>
<a href="#indicators">Activity &amp; prices</a>
<a href="#markets">Rates &amp; markets</a>
<a href="#releases">Releases</a>
</div>
</div>
</nav>

<section id="now" class="band">
Expand Down
14 changes: 10 additions & 4 deletions economy/trends/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,16 @@ <h1 class="reveal page-title" style="--d:1">UK economic trends.</h1>
</div>
</section>

<nav class="economy-country-switch" aria-label="Choose an economy">
<span class="mono">Trends</span>
<a href="/economy/trends" aria-current="page"><small>UK</small>United Kingdom</a>
<a href="/economy/us/trends"><small>US</small>United States</a>
<nav class="economy-subnav" aria-label="Choose an economy">
<div class="economy-subnav-row">
<div class="economy-subnav-scope">
<span class="economy-subnav-label mono">Trends</span>
<span class="economy-subnav-countries">
<a href="/economy/trends" aria-current="page"><small>UK</small><span>United Kingdom</span></a>
<a href="/economy/us/trends"><small>US</small><span>United States</span></a>
</span>
</div>
</div>
</nav>

<section class="band trends-band">
Expand Down
31 changes: 18 additions & 13 deletions economy/us/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,24 @@ <h1 class="reveal page-title" style="--d:1">The US economy, tied to its observat
</div>
</section>

<nav class="economy-country-switch" aria-label="Choose an economy">
<span class="mono">Economy</span>
<a href="/economy"><small>UK</small>United Kingdom</a>
<a href="/economy/us" aria-current="page"><small>US</small>United States</a>
</nav>

<nav class="economy-topics" aria-label="US economy topics">
<a href="#now">At a glance</a>
<a href="#models">Models</a>
<a href="#trends">Trends</a>
<a href="#indicators">Activity &amp; prices</a>
<a href="#markets">Rates &amp; markets</a>
<a href="#releases">Sources</a>
<nav class="economy-subnav" aria-label="US economy navigation">
<div class="economy-subnav-row">
<div class="economy-subnav-scope">
<span class="economy-subnav-label mono">Economy</span>
<span class="economy-subnav-countries" aria-label="Choose an economy">
<a href="/economy"><small>UK</small><span>United Kingdom</span></a>
<a href="/economy/us" aria-current="page"><small>US</small><span>United States</span></a>
</span>
</div>
<div class="economy-topics">
<a href="#now">At a glance</a>
<a href="#models">Models</a>
<a href="#trends">Trends</a>
<a href="#indicators">Activity &amp; prices</a>
<a href="#markets">Rates &amp; markets</a>
<a href="#releases">Sources</a>
</div>
</div>
</nav>

<section id="now" class="band">
Expand Down
14 changes: 10 additions & 4 deletions economy/us/trends/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,16 @@ <h1 class="reveal page-title" style="--d:1">US economic trends.</h1>
</div>
</section>

<nav class="economy-country-switch" aria-label="Choose an economy">
<span class="mono">Trends</span>
<a href="/economy/trends"><small>UK</small>United Kingdom</a>
<a href="/economy/us/trends" aria-current="page"><small>US</small>United States</a>
<nav class="economy-subnav" aria-label="Choose an economy">
<div class="economy-subnav-row">
<div class="economy-subnav-scope">
<span class="economy-subnav-label mono">Trends</span>
<span class="economy-subnav-countries">
<a href="/economy/trends"><small>UK</small><span>United Kingdom</span></a>
<a href="/economy/us/trends" aria-current="page"><small>US</small><span>United States</span></a>
</span>
</div>
</div>
</nav>

<section class="band trends-band">
Expand Down
157 changes: 73 additions & 84 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,47 +360,103 @@ h1, h2, h3, p, figcaption, a { overflow-wrap: anywhere; }
.nav-links a:not(.nav-gh) { display: inline; }
}

/* Topic-level wayfinding for the economy dashboard. Unlike the retired second
global nav row, this names sections within one destination and scrolls
naturally with the page. */
.economy-topics {
/* Economy subnav: one sticky bar for the whole section. The country scope
sits on the left as a segmented capsule; topic anchors read as quiet
underline tabs on the right and scroll horizontally when cramped. */
.economy-subnav {
position: sticky;
top: 61px;
z-index: 8;
display: flex;
gap: var(--s-2);
max-width: var(--max);
margin: 0 auto;
padding: var(--s-4) var(--gutter);
overflow-x: auto;
scrollbar-width: none;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
background: color-mix(in srgb, var(--ink) 94%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--paper) 6%, transparent);
}
.economy-topics::-webkit-scrollbar { display: none; }
.economy-topics a {
.economy-subnav-row {
display: flex;
align-items: stretch;
gap: var(--s-5);
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.economy-subnav-scope {
display: flex;
align-items: center;
gap: var(--s-3);
flex: 0 0 auto;
padding: 8px 12px;
padding: var(--s-3) 0;
}
.economy-subnav-label {
color: var(--paper-faint);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: var(--ls-label);
}
.economy-subnav-countries {
display: inline-flex;
border: 1px solid var(--line-soft);
border-radius: 999px;
overflow: hidden;
}
.economy-subnav-countries a {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 5px 14px;
color: var(--paper-dim);
font-family: var(--mono);
font-size: var(--fs-small);
text-decoration: none;
white-space: nowrap;
}
.economy-topics a:hover {
.economy-subnav-countries a + a { border-left: 1px solid var(--line-soft); }
.economy-subnav-countries a small {
font-size: var(--fs-label);
color: var(--paper-faint);
}
.economy-subnav-countries a:hover {
color: var(--brand-strong);
background: var(--brand-wash);
}
.economy-topics a[aria-current="location"] {
.economy-subnav-countries a[aria-current="page"] {
color: var(--ink);
border-color: var(--brand-strong);
background: var(--brand-strong);
}
.economy-subnav-countries a[aria-current="page"] small { color: var(--ink); }
.economy-topics {
display: flex;
gap: var(--s-5);
margin-left: auto;
overflow-x: auto;
scrollbar-width: none;
}
.economy-topics::-webkit-scrollbar { display: none; }
.economy-topics a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: var(--s-3) 2px;
border-bottom: 2px solid transparent;
color: var(--paper-dim);
font-family: var(--mono);
font-size: var(--fs-small);
text-decoration: none;
white-space: nowrap;
}
.economy-topics a:hover { color: var(--brand-strong); }
.economy-topics a[aria-current="location"] {
color: var(--paper);
border-bottom-color: var(--brand-strong);
}
@media (max-width: 720px) {
.economy-subnav-row { flex-wrap: wrap; gap: 0 var(--s-5); }
.economy-subnav-scope { padding-bottom: 0; }
.economy-topics { margin-left: 0; width: 100%; }
.economy-subnav-countries a span { display: none; }
.economy-subnav-countries a small { font-size: var(--fs-small); color: inherit; }
}

/* Homepage at-a-glance country toggle: same capsule language as the
economy country switch, in button form. The head is a flex row with the
Expand Down Expand Up @@ -453,64 +509,6 @@ h1, h2, h3, p, figcaption, a { overflow-wrap: anywhere; }
z-index: 1;
}

/* Compact segmented control: a mono label plus two pills sharing one
bordered capsule; the active country is clearly filled. */
.economy-country-switch {
display: flex;
align-items: center;
gap: var(--s-4);
max-width: var(--max);
margin: 0 auto;
padding: var(--s-5) var(--gutter);
}
.economy-country-switch > span {
color: var(--paper-faint);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: var(--ls-label);
}
.economy-country-switch a {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--line-soft);
border-radius: 999px;
color: var(--paper-dim);
background: var(--surface);
font-size: var(--fs-small);
text-decoration: none;
white-space: nowrap;
}
.economy-country-switch a + a { margin-left: -1px; }
.economy-country-switch a:first-of-type {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.economy-country-switch a:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.economy-country-switch a:hover {
color: var(--brand-strong);
border-color: var(--brand);
background: var(--brand-wash);
position: relative;
z-index: 1;
}
.economy-country-switch a[aria-current="page"] {
color: var(--ink);
border-color: var(--brand-strong);
background: var(--brand-strong);
position: relative;
z-index: 1;
}
.economy-country-switch small {
font: 600 var(--fs-label)/1 var(--mono);
letter-spacing: .08em;
color: var(--brand-strong);
}
.economy-country-switch a[aria-current="page"] small { color: inherit; }
.economy-page section[id] { scroll-margin-top: 132px; }

.home-proof {
Expand Down Expand Up @@ -1773,10 +1771,6 @@ h2 {
padding-bottom: var(--s-4);
}
.trends-page .model-hero .lede { margin-bottom: var(--s-4); }
.trends-page .economy-country-switch {
padding-top: var(--s-4);
padding-bottom: var(--s-4);
}
.trends-band { padding-top: clamp(36px, 5vw, 58px); }
.trends-heading { max-width: 760px; }
.trends-grid {
Expand Down Expand Up @@ -1849,11 +1843,6 @@ h2 {
.verification-grid { grid-template-columns: 1fr; }
.economy-grid { grid-template-columns: 1fr; }
.verification-card:last-child { grid-column: auto; }
.economy-country-switch {
padding-top: var(--s-4);
padding-bottom: var(--s-4);
}
.economy-country-switch a { flex: 1 1 0; justify-content: center; }
.economy-model-grid { grid-template-columns: 1fr; }
.economy-trends-directory { grid-template-columns: 1fr; }
.economy-trends-card dl { grid-template-columns: 1fr; }
Expand Down