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);
|
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">
|
||||||
<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),
|
<!-- 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
|
||||||
|
|||||||
Reference in new issue
Block a user