feat: B2 coming-soon badges on inactive tool cards (v2.1.4)

- Add 'coming_soon' key to module card definitions
- Protocol Builder, Tracker, Subject Log: coming_soon = true
- Calculator: fully active (shortcode_exists passes); no badge, no --inactive
- New .ps-module-card__badge: absolute top-right pill, --gray-200/--gray-700,
  Inter 600 10px; layers on top of --inactive dim treatment
- position: relative added to .ps-module-card to anchor the badge

CMO-approved in thread: 2026-04-site-wide-brand-adoption seq 10
This commit is contained in:
peptiderepo
2026-04-26 09:49:32 +00:00
parent 22716b4227
commit fdaea84d72
3 changed files with 46 additions and 1 deletions

View File

@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
Description: Premium, accessible WordPress theme for scientific peptide reference database
Author: Peptide Repo
Author URI: https://peptiderepo.com
Version: 2.1.3
Version: 2.1.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptide-starter
@@ -2533,6 +2533,7 @@ html[data-theme="light"] {
text-decoration: none;
color: var(--color-text-primary);
transition: all var(--transition-normal);
position: relative; /* Required for .ps-module-card__badge absolute positioning */
}
.ps-module-card:hover {
@@ -2546,6 +2547,27 @@ html[data-theme="light"] {
pointer-events: none;
}
/*
* "Coming soon" badge — overlays top-right corner of inactive tool cards.
* Layered on top of --inactive treatment (dim + no-hover); does not replace it.
* Spec: Inter 600, 10px, --gray-200 bg, --gray-700 text, pill shape.
*/
.ps-module-card__badge {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
padding: 2px 8px;
background-color: var(--gray-200);
color: var(--gray-700);
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.6;
pointer-events: none; /* Badge is presentational; card's pointer-events handles clicks */
}
.ps-module-card__icon {
display: flex;
align-items: center;