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); 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 /* 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 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 border line runs through it, like a tag on the corner) but its RIGHT edge sits
@@ -1348,7 +1381,10 @@
<!-- The directory --> <!-- The directory -->
<section class="section-dark" id="directory"> <section class="section-dark" id="directory">
<div class="container"> <div class="container">
<div class="section-title-row">
<h2 class="section-title">Freelancers available</h2> <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), <!-- Rendered at build time from our freelancer webhook (one call, no CRM),
so the list works with JavaScript disabled. The filter controls below are so the list works with JavaScript disabled. The filter controls below are