itself. It now holds TWO links (the /p/ title link and the outbound Amazon
button) and anchors cannot nest, so the card became a . The
whole-card click target is preserved by stretching .product-card-link over
the card with ::after; the buy button is raised above that overlay with
position:relative + z-index so it stays independently clickable.
Server-rendered cards (_product_card.html) and JS-rendered cards
(site.js productCardEl) share every rule below — they sit in the same grid
on a filtered category page, so any divergence is visible side by side. */
.product-card {
position: relative;
display: flex;
flex-direction: column;
color: var(--color-fg);
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--thumb-radius);
overflow: hidden;
transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.product-card:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.product-card-thumb {
aspect-ratio: 9 / 16;
position: relative;
overflow: hidden;
}
.product-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 150ms ease;
}
/* products.image_url is a square-ish Amazon catalog shot, not a 9:16 video
still. Cropping it to fill would cut the product in half, so it is
letterboxed over the card's tone instead. 16 products carry one today. */
.product-card-img-contain {
object-fit: contain;
padding: var(--space-xs);
}
.product-card-body {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
/* The title link, stretched over the whole card. */
.product-card-link {
color: var(--color-fg);
font-size: 0.875rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.product-card-link:hover {
text-decoration: underline;
}
.product-card-brand {
font-size: 0.75rem;
color: var(--color-muted);
}
.product-card-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Derived tag pills. Non-interactive on the card itself — the clickable
version is .tag-chip in the category controls. */
.product-tag-pill {
font-size: 0.625rem;
line-height: 1;
padding: 4px 7px;
border-radius: 999px;
background: var(--color-bg);
color: var(--color-fg);
border: 1px solid var(--color-card-border);
white-space: nowrap;
}
/* Raised above .product-card-link::after so the buy link stays clickable. */
.product-card-buy {
position: relative;
z-index: 2;
margin-top: auto;
align-self: flex-start;
font-size: 0.75rem;
font-weight: 600;
padding: 8px 12px;
min-height: 36px;
display: inline-flex;
align-items: center;
border-radius: var(--radius-md);
background: var(--britt-tan);
color: var(--color-fg);
border: 1px solid var(--color-card-border);
}
.product-card-buy:hover {
background: var(--color-accent);
text-decoration: none;
}
/* Screen-reader-only label text. Added 2026-08-25 for the category filter
and sort controls, whose visible affordance is the input itself — they
still need an accessible name. Standard clip-rect pattern; deliberately
not display:none, which would hide it from assistive tech too. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* -- Category page controls (filter / chips / sort) --------------------
Rendered [hidden] and unhidden by site.js only once it has taken over the
grid: without JS the server-paginated chain is still the live UI and these
controls would do nothing. */
.category-controls {
margin: var(--space-md) 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.category-controls[hidden] { display: none; }
.category-controls-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.category-filter { flex: 1 1 220px; }
.category-sort { flex: 0 0 auto; }
.category-filter input,
.category-sort select {
width: 100%;
min-height: 44px;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-card-border);
background: var(--britt-cream);
color: var(--color-fg);
font: inherit;
font-size: 0.875rem;
}
.category-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.tag-chip {
font: inherit;
font-size: 0.75rem;
min-height: 36px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--color-card-border);
background: var(--britt-cream);
color: var(--color-fg);
cursor: pointer;
}
.tag-chip:hover { border-color: var(--color-accent); }
.tag-chip[aria-pressed="true"] {
background: var(--color-accent);
border-color: var(--color-accent);
font-weight: 600;
}
.tag-chip-count {
color: var(--color-muted);
margin-left: 4px;
}
.tag-chip[aria-pressed="true"] .tag-chip-count { color: inherit; }
.category-result-count,
.category-empty {
font-size: 0.8125rem;
color: var(--color-muted);
margin: 0;
}
.category-empty[hidden] { display: none; }
.pagination[hidden] { display: none; }
.category-page-note {
font-size: 0.875rem;
color: var(--color-muted);
max-width: 60ch;
}
/* -- /c/ index category cards ------------------------------------------ */
.category-card-grid {
list-style: none;
padding: 0;
margin: var(--space-md) 0 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
}
.category-card-link {
display: flex;
flex-direction: column;
height: 100%;
color: var(--color-fg);
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--thumb-radius);
overflow: hidden;
transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.category-card-link:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.category-card-thumb {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.category-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.category-card-body {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: 2px;
}
.category-card-name {
font-weight: 600;
font-size: 0.875rem;
}
.category-card-count {
font-size: 0.75rem;
color: var(--color-muted);
}
/* The uncategorised bucket is a real destination, but it is not an operator
taxonomy choice — a dashed border says "not filed yet" without demoting
it out of the grid. */
.category-card-unsorted .category-card-link {
border-style: dashed;
}
/* Same root cause, different template: .product-meta-link
(_product_page.html's Brand:/Category: links) has no dedicated rule
either and sits directly on the page, not inside a card. */
.product-meta-link {
color: var(--color-link-on-light);
}
/* Same root cause again: /b/ and /c/ index pages (b/index.html,
c/index.html) link each brand/category via .brand-list-link /
.category-list-link, neither of which had a dedicated rule — same
bare-anchor-on-light-bg gap as .product-card and .product-meta-link
above. Color is set on the anchor so the name/count spans inside it
inherit it rather than falling back to the base cyan link color. */
.brand-list-link,
.category-list-link {
color: var(--color-link-on-light);
}
/* -- Follow bar (landing page, above the video grid) ------------------- */
.follow-bar {
padding: var(--space-md) 0 var(--space-sm);
}
.follow-bar-heading {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-bg-elevated);
text-align: center;
margin: 0 0 var(--space-sm) 0;
}
.follow-bar-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
}
/* 2026-08-06 retheme: resting state is now cream + tan border (was dark
--color-bg-elevated + --britt-blue border) — the page is no longer dark,
so a "elevated dark surface" pill doesn't read as elevated anymore, it
just reads as a dark blob. Text stays --color-fg (dark slate), correct
on cream via the brand.css repoint — no per-rule change needed there. */
.follow-pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: 44px;
padding: var(--space-sm) var(--space-md);
border-radius: 999px;
background: var(--britt-cream);
border: 1.5px solid var(--britt-tan);
color: var(--color-fg);
font-weight: 600;
font-size: 0.875rem;
white-space: nowrap;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.follow-pill svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Hover fill moves to --britt-tan (was --britt-blue-hover, which is now
literally the page background color — a hovered pill can't fill with
the exact color of the page it sits on, it would disappear). Text stays
dark (var(--color-fg)) — 7.69:1 against britt-tan minimum, more than
var(--color-fg-on-dark) would have been an error here). */
.follow-pill:hover {
background: var(--britt-tan);
border-color: var(--britt-tan);
color: var(--color-fg);
text-decoration: none;
transform: translateY(-1px);
}
.follow-pill:focus-visible {
outline: 2px solid var(--color-bg-elevated);
outline-offset: 2px;
}
/* -- Get the app (homepage, between follow bar and home intro) -------- */
.get-app-home {
padding: var(--space-md) 0;
}
.get-app-home-heading {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--color-fg);
text-align: center;
margin: 0 0 var(--space-md) 0;
}
.get-app-home-heading::after {
content: "";
display: block;
width: 60px;
height: 4px;
border-radius: 2px;
background: var(--britt-tan);
margin: var(--space-xs) auto 0 auto;
}
.get-app-home-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
@media (max-width: 640px) {
.get-app-home-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
.get-app-home-col {
text-align: center;
}
.get-app-home-sub {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-muted);
margin: 0 0 var(--space-sm) 0;
}
.get-app-home-badge {
height: 60px;
width: auto;
display: inline-block;
}
.get-app-home-step {
margin: 0 0 var(--space-md) 0;
}
.get-app-home-step-label {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-fg);
margin: 0 0 var(--space-sm) 0;
}
.get-app-home-step-helper {
color: var(--color-muted);
font-size: 0.85rem;
line-height: 1.5;
max-width: 32ch;
margin: var(--space-sm) auto 0 auto;
}
.get-app-home-btn {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 48px;
width: 100%;
max-width: 250px;
margin: 0 auto;
text-align: center;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
padding: 0.75rem 1.25rem;
border-radius: 0.75rem;
border: 2px solid transparent;
cursor: pointer;
background: var(--britt-blue);
color: var(--color-fg);
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.get-app-home-btn:hover,
.get-app-home-btn:active {
background: var(--britt-blue-hover);
border-color: var(--color-bg-elevated);
}
.get-app-home-btn:focus-visible {
outline: 2px solid var(--color-bg-elevated);
outline-offset: 2px;
}
.get-app-home-anchor {
display: inline-flex;
align-items: center;
justify-content: center;
height: 60px;
min-width: 200px;
padding: 0 var(--space-md);
border-radius: var(--radius-md);
background: #202124;
color: #fff;
font-weight: 600;
font-size: 0.95rem;
box-sizing: border-box;
}
.get-app-home-steps {
text-align: left;
max-width: 32ch;
margin: var(--space-sm) auto 0 auto;
padding-left: 1.25rem;
color: var(--color-muted);
font-size: 0.85rem;
line-height: 1.5;
}
/* -- Home intro ------------------------------------------------------- */
.home-intro {
text-align: center;
padding: var(--space-xl) 0 var(--space-lg) 0;
}
.home-intro h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
}
.home-intro p {
color: var(--color-muted);
max-width: 50ch;
margin: 0 auto;
}
.home-cta {
text-align: center;
padding: var(--space-xl) 0;
}
/* -- Video grid ------------------------------------------------------- */
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
}
/* -- Video card (grid item) ------------------------------------------- */
.video-card {
display: flex;
flex-direction: column;
color: var(--color-fg);
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--thumb-radius);
overflow: hidden;
transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.video-card:hover {
transform: translateY(-3px);
border-color: var(--color-accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.video-card:hover .video-thumb-img {
transform: scale(1.03);
}
.video-thumb {
aspect-ratio: 9 / 16;
background: linear-gradient(
135deg,
var(--tone-a, var(--color-bg-elevated)),
var(--tone-b, var(--color-fg))
);
position: relative;
border-radius: var(--thumb-radius);
overflow: hidden;
}
.video-thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
transition: transform 150ms ease;
}
/* Buy-link indicator on any video card carrying a product link -- both
server-rendered (_video_card.html, homepage/latest) and client-appended
"Load More" cards (site.js) render this the same way, 2026-08-16 CT. */
.video-card-buy-badge {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.65);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
}
/* -- Placeholder thumbnail tones + icon (2026-08-18) ------------------
Shown when a video has no local thumbnail (thumbnail_path NULL) or a
/link Reel is unmatched. Replaces the old arbitrary hsl(hue, 50%, ..)
gradient: six muted tones whose every stop is an EXISTING brand.css
palette var (no invented colors, and they re-follow any future
retheme automatically). build.py's thumb_tone() assigns the index
deterministically per video/media id -- md5, not hash(), so a video
keeps the same tone across rebuilds.
Icon contrast is structural, not per-tone: the glyph always sits on a
rgba(0,0,0,0.45) circular scrim, so the composite under it is dark on
EVERY tone. Worst case (sand) = 5.00:1 against --color-fg-on-dark;
all six clear 4.5:1, well past the 3:1 non-text bar. Changing a tone
later cannot silently break legibility -- the scrim, not the tone,
carries the contrast.
Server-rendered (_video_card.html / _video_page.html / _link_card.html)
and JS-appended Load More cards (site.js) emit IDENTICAL markup here,
same rule as .video-card-buy-badge above. */
.thumb-tone-0 { --tone-a: var(--color-bg-elevated); --tone-b: var(--color-fg); }
.thumb-tone-1 { --tone-a: var(--color-muted); --tone-b: var(--color-bg-elevated); }
.thumb-tone-2 { --tone-a: var(--color-tx-blue); --tone-b: var(--color-tx-blue-hover); }
.thumb-tone-3 { --tone-a: var(--color-link-on-light);--tone-b: var(--color-fg); }
.thumb-tone-4 { --tone-a: var(--color-bg); --tone-b: var(--color-muted); }
.thumb-tone-5 { --tone-a: var(--britt-tan); --tone-b: var(--color-bg); }
.thumb-ph-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.thumb-ph-icon::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: var(--color-fg-on-dark);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 56px row thumb on /link -- same markup, scaled down. */
.link-row-thumb .thumb-ph-icon { width: 28px; height: 28px; }
.link-row-thumb .thumb-ph-icon::before { width: 13px; height: 13px; }
/* /v/ detail: the "Watch on TikTok" button is already centred here, so
the placeholder glyph sits above it rather than colliding with it. */
.video-detail-thumb .thumb-ph-icon { width: 56px; height: 56px; top: 32%; }
.video-detail-thumb .thumb-ph-icon::before { width: 26px; height: 26px; }
.video-caption {
padding: var(--space-sm) var(--space-sm) 4px;
font-size: 0.875rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
min-height: calc(3 * 1.4em + var(--space-sm) + 4px);
}
.video-card-stats {
padding: 0 var(--space-sm) var(--space-sm);
font-size: 0.75rem;
color: var(--color-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* -- Video detail page ------------------------------------------------ */
.video-detail {
display: grid;
gap: var(--space-xl);
max-width: 800px;
margin: 0 auto;
}
@media (min-width: 700px) {
.video-detail {
grid-template-columns: 300px 1fr;
align-items: start;
}
}
.video-detail-thumb {
aspect-ratio: 9 / 16;
background: linear-gradient(
135deg,
var(--tone-a, var(--color-bg-elevated)),
var(--tone-b, var(--color-fg))
);
border-radius: var(--thumb-radius);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
}
.video-detail-thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--thumb-radius);
transition: transform 200ms ease;
}
.video-detail-thumb:hover .video-detail-thumb-img {
transform: scale(1.02);
}
.video-detail-thumb:hover .video-detail-thumb-overlay .btn {
background: var(--color-accent-hover);
}
.video-detail-thumb-link {
position: absolute;
inset: 0;
display: block;
cursor: pointer;
border-radius: var(--thumb-radius);
overflow: hidden;
}
.video-detail-thumb-overlay {
text-align: center;
position: relative;
z-index: 1;
}
.video-detail-body {
display: flex;
flex-direction: column;
gap: var(--space-lg);
min-width: 0;
}
.video-detail-caption {
font-size: 1.0625rem;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.video-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-xs);
padding: var(--space-md) 0;
border-top: 1px solid var(--color-border-strong);
border-bottom: 1px solid var(--color-border-strong);
}
.video-stat {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.75rem;
}
.video-stat-num {
font-weight: 700;
font-size: 1rem;
color: var(--color-fg);
}
.video-stat-label {
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.video-meta {
color: var(--color-muted);
font-size: 0.875rem;
}
.video-nav {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-md);
}
/* -- Video action sections (Watch / Where to buy) --------------------- */
.video-actions {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.video-action-title {
font-size: 0.6875rem;
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-bg-elevated);
margin: 0 0 var(--space-xs) 0;
}
.video-platform-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
/* Same root cause as .product-card / .product-meta-link / .brand-list-link
above, one more consumer the 2026-08-06 retheme missed: the product-name
link in /v/'s "Where to buy" group sits directly on the page bg (its
ancestors .video-actions/.video-detail-body set no background), yet it
explicitly declared the on-dark --color-link. #4fc3f7 measured 1.24:1
against --color-bg #92A8B2 -- the same failing number brand.css already
recorded for this token on this surface. --color-link-on-light = 4.81:1.
Color-only, matching the other on-light link rules: the link affordance
stays brand.css's base `a:hover { text-decoration: underline }`. */
.product-mention-link {
display: inline-flex;
align-items: center;
font-size: 0.8125rem;
color: var(--color-link-on-light);
}
/* Money buttons (Buy on TikTok / Amazon) — the ONLY orange on the page.
Slightly heavier than the WATCH buttons (font-weight 700 vs 600, a touch
more horizontal padding) so the two money buttons visually own the color
and read as more important than the platform-colored WATCH row. */
.btn-cta {
background: var(--color-cta);
color: #fff;
font-weight: 700;
padding: var(--space-sm) calc(var(--space-lg) + var(--space-xs));
transition: background 150ms ease, transform 100ms ease;
}
.btn-cta:hover {
background: var(--color-cta-hover);
color: #fff;
text-decoration: none;
}
.btn-cta:active {
background: #bf360c;
color: #fff;
transform: translateY(1px);
}
.btn-cta:focus-visible {
outline: 2px solid var(--color-cta);
outline-offset: 2px;
}
.btn-amazon {
background: #FF9900;
color: #111;
font-weight: 700;
padding: var(--space-sm) calc(var(--space-lg) + var(--space-xs));
transition: background 150ms ease, transform 100ms ease;
}
.btn-amazon:hover {
background: #e88600;
color: #111;
text-decoration: none;
}
.btn-amazon:active {
background: #bf360c;
color: #111;
transform: translateY(1px);
}
.btn-amazon:focus-visible {
outline: 2px solid #FF9900;
outline-offset: 2px;
}
/* WATCH buttons — one shared brand-blue button (Britt's logo palette),
platform recognition carried by a small icon chip inside the button
rather than the whole button being platform-colored (the old per-
platform full-button fill made TikTok's near-black button invisible
against the page's near-black background — fixed 2026-08-07). Text is
DARK (var(--color-fg)) since --britt-blue is light — 10.47:1 default.
2026-08-06 retheme fix: text used to read var(--color-bg) as a "the
dark value" shortcut, which broke the instant --color-bg became the
light page background (button text would have gone light-on-light,
invisible) — repointed to var(--color-fg), which is the actual dark-
text token post-retheme. Hover also moved off --britt-blue-hover
(now literally equal to the page background) onto --britt-tan.
Added a 1px --color-border-strong border for edge definition: britt-
blue vs the new page bg is only ~1.6:1 apart in luminance (both are
light/mid blues), so the button would nearly blend into the page
without it — this is the judgment call flagged for report. Same base
sizing as the money buttons (.btn) but font-weight 600, one notch
lighter than .btn-cta/.btn-amazon's 700, per spec. */
.btn-watch {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: var(--britt-blue);
color: var(--color-fg);
font-weight: 600;
border: 1px solid var(--color-border-strong);
transition: background 150ms ease, transform 100ms ease;
}
.btn-watch:hover {
background: var(--britt-tan);
color: var(--color-fg);
text-decoration: none;
}
.btn-watch:active {
transform: translateY(1px);
}
.btn-watch:focus-visible {
outline: 2px solid var(--color-bg-elevated);
outline-offset: 2px;
}
/* Platform icon chip — the ONLY platform-colored pixels on a WATCH
button now. ~26px, rounded, native platform color + white icon. */
.platform-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
flex-shrink: 0;
}
.platform-chip svg {
width: 16px;
height: 16px;
}
.platform-chip-tiktok { background: #0a0a0a; color: #fff; }
.platform-chip-youtube { background: #FF0000; color: #fff; }
.platform-chip-facebook { background: #1877F2; color: #fff; }
.platform-chip-instagram { background: #E4405F; color: #fff; }
/* -- Utility ---------------------------------------------------------- */
.rounded-media { border-radius: var(--thumb-radius); }
/* -- Pagination ------------------------------------------------------- */
.pagination {
display: flex;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-xl) 0;
}
.pagination .btn-ghost { flex: 0 0 auto; }
/* -- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.video-card,
.video-thumb-img,
.video-detail-thumb-img,
.btn,
.btn-cta,
.btn-amazon,
.btn-watch,
.follow-pill,
.nav-toggle-bar,
.site-nav {
transition: none !important;
}
.video-card:hover {
transform: none;
}
.video-card:hover .video-thumb-img,
.video-detail-thumb:hover .video-detail-thumb-img {
transform: none;
}
.btn-cta:active,
.btn-amazon:active,
.btn-watch:active,
.follow-pill:hover {
transform: none;
}
}
/* Push opt-in pill (notify.js) ------------------------------------- */
.bb-notify {
position: fixed;
bottom: var(--space-sm, 12px);
left: 50%;
transform: translateX(-50%);
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
max-width: min(92vw, 480px);
padding: 10px 14px;
background: #ffffff;
color: #1a1a1a;
border: 2px solid #92A8B2;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
font-size: 0.92em;
}
.bb-notify-btn {
border: 0;
border-radius: 999px;
padding: 7px 14px;
background: #BED4DD;
color: #1a1a1a;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.bb-notify-btn:hover { background: #92A8B2; }
.bb-notify-btn:disabled { opacity: 0.6; cursor: default; }
.bb-notify-x {
border: 0;
background: none;
color: inherit;
font-size: 1.25em;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
opacity: 0.65;
}
.bb-notify-x:hover { opacity: 1; }
/* Pill mobile-wrap fix: text gets remaining width, softer radius when it wraps */
.bb-notify { border-radius: 22px; }
.bb-notify > span:first-child { flex: 1 1 auto; min-width: 0; }
.bb-notify { width: min(92vw, 480px); }
.bb-notify { width: min(84vw, 330px); bottom: 15vh; }
/* -- /link — bio landing page ------------------------------------------ */
.link-hero {
text-align: center;
padding: var(--space-xl) 0 var(--space-md) 0;
}
.link-hero-avatar {
border-radius: 50%;
display: block;
margin: 0 auto var(--space-sm) auto;
}
.link-hero-name {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
margin: 0;
}
.link-hero-tagline {
color: var(--color-muted);
max-width: 50ch;
margin: var(--space-xs) auto 0 auto;
}
.link-section {
margin: var(--space-lg) 0;
}
.link-section-heading {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-bg-elevated);
margin: 0 0 var(--space-sm) 0;
}
.link-cta {
text-align: center;
padding: var(--space-lg) 0;
}
/* -- Linktree-class /link buttons (2026-08-17) -------------------------- */
.link-hero-socials {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.link-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
color: var(--color-muted);
border: 1px solid var(--color-border);
transition: color 150ms ease, border-color 150ms ease;
}
.link-social-icon:hover {
color: var(--color-fg);
border-color: var(--color-accent);
text-decoration: none;
}
.link-social-icon svg {
width: 36px;
height: 36px;
}
/* -- Linktree-class /link polish pass (2026-08-17) ---------------------- */
.link-topbar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 480px;
margin: 0 auto;
padding: var(--space-sm) var(--space-md) 0;
}
.link-topbar-icon,
.link-topbar-share {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-bg-elevated);
color: var(--color-fg-on-dark);
border: none;
font-size: 1.25rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: transform 150ms ease;
}
.link-topbar-icon:hover,
.link-topbar-share:hover {
transform: translateY(-2px);
text-decoration: none;
}
.link-topbar-share svg {
width: 18px;
height: 18px;
}
.link-toast {
position: fixed;
bottom: var(--space-lg);
left: 50%;
transform: translate(-50%, 20px);
background: var(--color-bg-elevated);
color: var(--color-fg-on-dark);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-size: 0.875rem;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease, transform 150ms ease;
z-index: 200;
}
.link-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.link-panel {
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
max-width: 480px;
margin: 0 auto;
}
.link-buttons {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.link-slot-row {
position: relative;
}
.link-slot-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: var(--space-sm) var(--space-xxl) var(--space-sm) var(--space-lg);
background: var(--color-accent);
background-size: cover;
background-position: center;
color: #fff;
font-weight: 600;
text-align: center;
border-radius: var(--radius-md);
text-decoration: none;
transition: background 150ms ease, transform 150ms ease;
}
.link-slot-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
text-decoration: none;
}
.link-slot-label {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.link-slot-menu-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.18);
color: #fff;
cursor: pointer;
}
.link-slot-menu-btn svg {
width: 16px;
height: 16px;
}
.link-slot-menu {
position: absolute;
right: 6px;
top: calc(100% + 4px);
z-index: 20;
min-width: 140px;
background: var(--britt-cream);
color: var(--color-fg);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.link-slot-menu-item {
display: block;
width: 100%;
text-align: left;
padding: var(--space-sm) var(--space-md);
background: none;
border: none;
font-size: 0.875rem;
color: var(--color-fg);
cursor: pointer;
}
.link-slot-menu-item:hover {
background: var(--color-card-bg);
}
.link-qr-corner {
display: none;
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
text-align: center;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
z-index: 50;
}
.link-qr-corner canvas {
display: block;
width: 96px;
height: 96px;
border-radius: var(--radius-sm);
}
.link-qr-caption {
display: block;
font-size: 0.6875rem;
color: var(--color-fg);
margin-top: 4px;
}
@media (min-width: 768px) {
.link-qr-corner {
display: block;
}
}
.link-rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 480px;
margin: 0 auto;
}
.link-row {
display: flex;
align-items: center;
gap: var(--space-sm);
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
padding: var(--space-xs);
color: var(--color-fg);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.link-row:hover {
border-color: var(--color-accent);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.link-row-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
display: block;
background: linear-gradient(
135deg,
var(--tone-a, var(--color-bg-elevated)),
var(--tone-b, var(--color-fg))
);
}
.link-row-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.link-row-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.link-row-title {
font-size: 0.8125rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.link-row-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.link-row-actions .btn {
font-size: 0.75rem;
padding: 4px var(--space-xs);
}
/* -- Newsletter signup (homepage + /link, above the footer) ------------ */
.newsletter-signup {
text-align: center;
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin: var(--space-lg) 0;
}
.newsletter-signup h2 {
margin: 0 0 var(--space-xs) 0;
font-size: 1.25rem;
}
.newsletter-signup > p {
color: var(--color-muted);
max-width: 45ch;
margin: 0 auto var(--space-md) auto;
}
.newsletter-form {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
max-width: 32em;
margin: 0 auto;
}
.newsletter-email {
flex: 1 1 16em;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-card-border);
font-size: 1rem;
font-family: inherit;
color: var(--color-fg);
background: var(--color-bg);
}
/* Honeypot -- off-screen, not display:none/visibility:hidden (some bots
skip fields hidden that way but still fill in off-screen ones caught by
this technique), not tab-reachable, hidden from assistive tech. */
.newsletter-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.newsletter-msg {
margin: var(--space-sm) 0 0 0;
font-size: 0.9375rem;
}
.newsletter-msg[data-state="error"] {
color: var(--color-cta);
}
/* ---------------------------------------------------------------------------
/about + /partner content pages (2026-08-24)
--------------------------------------------------------------------------- */
.page-copy {
max-width: 62ch;
margin: 0 auto var(--space-lg) auto;
}
.page-copy h1 {
margin-bottom: var(--space-md);
}
.page-copy p {
line-height: 1.65;
margin: 0 0 var(--space-md) 0;
}
/* Operator-uploaded portrait. Only ever rendered when the file exists on
disk (build.py _page_photo), so there is no broken-image state to style. */
.page-photo {
display: block;
width: 100%;
max-width: 360px;
height: auto;
border-radius: var(--radius-md);
border: 1px solid var(--color-card-border);
margin: 0 0 var(--space-lg) 0;
}
/* Audience stats -- build-time follower counts, /partner only. */
.audience-stats {
max-width: 62ch;
margin: 0 auto var(--space-lg) auto;
}
.audience-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: var(--space-sm);
}
.audience-stat {
background: var(--britt-cream);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-sm);
text-align: center;
}
.audience-num {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.1;
color: var(--color-fg);
}
.audience-label {
display: block;
margin-top: 2px;
font-size: 0.8125rem;
color: var(--color-muted);
}
/* Partner inquiry form. Mirrors .newsletter-form's tokens; two columns on
wide viewports, one on narrow. */
.inquiry-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-sm);
margin-top: var(--space-md);
}
.inquiry-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.inquiry-field-wide,
.inquiry-actions {
grid-column: 1 / -1;
}
.inquiry-field > span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-fg);
}
.inquiry-field input,
.inquiry-field textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--color-card-border);
font-size: 1rem;
font-family: inherit;
color: var(--color-fg);
background: var(--color-bg);
}
.inquiry-field textarea {
resize: vertical;
min-height: 7em;
}
.inquiry-field input:focus-visible,
.inquiry-field textarea:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
/* Honeypot -- off-screen rather than display:none, same technique and same
reasoning as .newsletter-hp above. */
.inquiry-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}