Public Access
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:
1 parent
b28c002d7d
commit
497002a112
1 file changed
+37
-1
@@ -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">
|
||||
<h2 class="section-title">Freelancers available</h2>
|
||||
<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
|
||||
|
||||
Reference in new issue
Block a user