directory: SOFTLAUNCH label beside the 'Freelancers available' heading

Adds a hollow brass chip next to the directory heading, sibling of the <h2>
(so the heading's name stays 'Freelancers available'). Uses the OCA Member
Profile badge's chip language (pill radius, 600 weight, 0.72rem) but not its
solid brass fill - related, clearly distinct. Real text, not aria-hidden.

Contrast measured on the section's real surface: brass #c9a227 on midnight
#0d1b2e = 7.15:1 (small text needs 4.5:1). Wraps as a unit below the heading
at 375 px, 0 overflow. No date, count or scarcity word added.
This commit is contained in:
webmaster committed 2026-11-03 23:43:21 +00:00
1 parent b28c002d7d
commit 497002a112
1 file changed
+36
+36
View File
@@ -994,6 +994,39 @@
border-color: var(--brass-deep);
}
/* The SOFTLAUNCH label — the directory section's own chip, beside its heading.
Built from the OCA Member Profile badge's chip language (same pill radius, same
600 weight and 0.72rem type scale) but HOLLOW: a brass outline and brass text
over the section's midnight, not the membership badge's solid brass fill — two
identical chips on one page mean neither reads as a signal. Real text, never
aria-hidden: it carries meaning. It is a SIBLING of the <h2>, not inside it, so
the heading's accessible name stays "Freelancers available". The row wraps the
pair as a unit at 375 px — the label drops below the heading whole, never split.
Contrast, measured on the section's real surface: brass #c9a227 on midnight
#0d1b2e = 7.15:1 (small text needs 4.5:1). */
.section-title-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.3rem 0.7rem;
margin-bottom: 2rem;
}
.section-title-row .section-title {
margin-bottom: 0;
}
.softlaunch-label {
font-size: 0.72rem;
line-height: 1.4;
padding: 0.15rem 0.6rem;
border-radius: var(--radius-pill, 999px);
background: transparent;
border: 1px solid var(--brass);
color: var(--brass);
font-weight: 600;
white-space: nowrap;
}
/* The OCA Member Profile badge — a link built from a link the freelancer
supplied. It straddles the card's TOP frame at the top-right corner (the top
border line runs through it, like a tag on the corner) but its RIGHT edge sits
@@ -1348,7 +1381,10 @@
<!-- The directory -->
<section class="section-dark" id="directory">
<div class="container">
<div class="section-title-row">
<h2 class="section-title">Freelancers available</h2>
<span class="softlaunch-label">SOFTLAUNCH</span>
</div>
<!-- Rendered at build time from our freelancer webhook (one call, no CRM),
so the list works with JavaScript disabled. The filter controls below are