/* Strength Squad Video Library — member app + gate styles. Ported from stv-handover prototype; scoped under #stv-lib-app / #stv-gate. */
/* ─────────────────────────────────────────
LOCAL HELPERS
Design tokens (--bone, --wine, --ink, --clay, --paper, --line,
--serif, --sans, --label, --accent, …) are defined globally in the
site's style.css :root. Do NOT redefine them here. We only define the
two local helpers the prototype used (--sb safe-area + --stv-hdr offset)
on the two app wrappers.
───────────────────────────────────────── */
#stv-lib-app,
#stv-gate {
--sb: env(safe-area-inset-bottom, 0px);
--stv-hdr: 0px;
}
/* Gate column padding (prototype carried this inline on the inner wrapper). */
#stv-gate .gate-inner {
padding: 30px 18px 40px;
}
/* The page canvas is the light "bone" tone (the prototype set this on ;
here Avada owns , so paint it on our wrappers). */
#stv-lib-app,
#stv-gate {
background: var(--bone);
}
#stv-lib-app { min-height: 70vh; }
/* WordPress wpautop mangles the raw HTML in this Fusion column — it injects
stray empty AND a
after every tag/newline (which bloated the sidebar
button heights and blew out the gaps between them). Suppress both; real line
breaks here are handled by flexbox, not
. */
#stv-lib-app p:empty,
#stv-gate p:empty {
display: none !important;
}
#stv-lib-app br { display: none !important; }
/* Same wpautop
litter inside the gate — in .teaser-head and between
.tchip chips they become zero-width flex items that double the gaps. */
#stv-gate br { display: none !important; }
/* wpautop also wraps the plan-card CTA buttons in stray
— kill the margin. */
#stv-gate .plan-card p { margin: 0; }
/* ─────────────────────────────────────────
SHARED HELPERS (.eyebrow, .btn, em)
───────────────────────────────────────── */
#stv-lib-app em,
#stv-gate em {
font-family: var(--serif);
font-style: normal;
}
#stv-lib-app .eyebrow,
#stv-gate .eyebrow {
font-family: var(--sans);
font-weight: 700;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 9px;
}
#stv-lib-app .eyebrow::before,
#stv-gate .eyebrow::before {
content: "";
width: 20px;
height: 2px;
background: currentColor;
display: inline-block;
}
#stv-lib-app .btn,
#stv-gate .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--sans);
font-weight: 700;
font-size: 15px;
padding: 15px 22px;
border-radius: 4px;
border: none;
min-height: 50px;
width: 100%;
text-decoration: none;
transition: transform .15s, background .2s;
}
#stv-lib-app .btn:active,
#stv-gate .btn:active {
transform: scale(.97);
}
#stv-lib-app .btn-primary,
#stv-gate .btn-primary {
background: var(--accent);
color: #fff;
}
#stv-lib-app .btn-clay,
#stv-gate .btn-clay {
background: var(--clay);
color: #fff;
}
#stv-lib-app .btn-outline,
#stv-gate .btn-outline {
background: transparent;
border: 1.5px solid var(--ink);
color: var(--ink);
}
/* NOTE: the prototype's .top-nav styles are intentionally DROPPED —
Avada provides the real site header. The 430px phone-column body{}
constraint is also dropped; this app is full-width responsive. */
/* ─────────────────────────────────────────
VIEW CONTAINERS
───────────────────────────────────────── */
#stv-lib-app .view {
display: none;
}
#stv-lib-app .view.shown {
display: block;
}
/* ─────────────────────────────────────────
FILTER BAR (sticky, lib view only)
Adaptation: sticky top sits below Avada's header via --stv-hdr.
───────────────────────────────────────── */
#stv-lib-app .filter-bar {
position: sticky;
top: var(--stv-hdr, 0px);
z-index: 50;
background: var(--bone);
border-bottom: 1px solid var(--line);
}
#stv-lib-app .filter-bar.hidden {
display: none;
}
/* .fb-inner: flex row holding the search + (desktop) profile pill.
On mobile it is effectively just the search row. */
#stv-lib-app .fb-inner {
display: flex;
align-items: center;
gap: 14px;
}
#stv-lib-app .search-wrap {
position: relative;
padding: 10px 18px 8px;
flex: 1;
}
#stv-lib-app .search-wrap .s-ico {
position: absolute;
left: 32px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
opacity: .42;
pointer-events: none;
stroke: var(--ink);
fill: none;
stroke-width: 2;
}
#stv-lib-app .search-wrap input {
width: 100%;
padding: 10px 36px 10px 38px;
border: 1.5px solid var(--line);
border-radius: 10px;
background: var(--paper);
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
}
#stv-lib-app .search-wrap input::placeholder {
color: var(--ink-soft);
}
#stv-lib-app .search-wrap input:focus {
outline: none;
border-color: var(--accent);
background: #fff;
}
/* .fb-profile: desktop-only profile pill living in the filter bar.
Hidden on mobile (mobile uses the bottom nav Profile tab). */
#stv-lib-app .fb-profile {
display: none;
font-family: var(--label);
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
padding: 8px 15px;
margin-right: 18px;
border-radius: 99px;
border: 1.5px solid var(--line);
background: var(--paper);
color: var(--ink);
white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
#stv-lib-app .fb-profile:hover {
border-color: var(--accent);
color: var(--accent);
}
#stv-lib-app .fb-profile svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
#stv-lib-app .chip-rail {
display: flex;
gap: 7px;
overflow-x: auto;
padding: 0 18px 11px;
scrollbar-width: none;
-ms-overflow-style: none;
}
#stv-lib-app .chip-rail::-webkit-scrollbar {
display: none;
}
#stv-lib-app .chip-btn {
flex: none;
font-family: var(--label);
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
padding: 6px 13px;
border-radius: 99px;
border: 1.5px solid var(--line);
background: var(--paper);
color: var(--ink-soft);
white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
#stv-lib-app .chip-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* ─────────────────────────────────────────
BOTTOM NAV (mobile; full width — no 430px cap)
Shown via .visible class added by JS when authed.
───────────────────────────────────────── */
#stv-lib-app .bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 80;
background: rgba(255,255,255,.94);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-top: 1px solid var(--line);
display: none; /* shown by JS via .visible when authed */
padding-bottom: var(--sb);
box-shadow: 0 -2px 20px -8px rgba(62,61,58,.12);
}
#stv-lib-app .bottom-nav.visible {
display: flex;
}
#stv-lib-app .bn-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 9px 4px;
background: none;
border: none;
font-family: var(--label);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-soft);
transition: color .15s;
}
#stv-lib-app .bn-tab svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
}
#stv-lib-app .bn-tab.active {
color: var(--accent);
}
/* ─────────────────────────────────────────
GATE VIEW (logged-out)
───────────────────────────────────────── */
#stv-gate {
padding: 30px 18px 40px;
}
#stv-gate .gate-hero {
margin-bottom: 26px;
}
#stv-gate .gate-hero h1 {
font-family: var(--serif);
font-weight: 500;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.015em;
margin: 14px 0 10px;
}
#stv-gate .gate-hero h1 em {
color: var(--accent);
}
#stv-gate .gate-hero p {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.6;
}
/* Teaser swatches */
#stv-gate .teaser-swatches {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 20px 0 26px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
#stv-gate .swatch {
aspect-ratio: 16/10;
border-radius: 6px;
overflow: hidden;
}
#stv-gate .teaser-lock {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(238,236,230,0) 28%, rgba(238,236,230,.75) 62%, rgba(238,236,230,.97) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 14px;
text-align: center;
}
#stv-gate .lock-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
margin-bottom: 10px;
box-shadow: 0 10px 22px -10px rgba(78,65,109,.65);
}
#stv-gate .lock-icon svg {
width: 20px;
height: 20px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
#stv-gate .teaser-lock h3 {
font-family: var(--serif);
font-weight: 500;
font-size: 18px;
color: var(--ink);
margin-bottom: 4px;
}
#stv-gate .teaser-lock p {
font-size: 13px;
color: var(--ink-soft);
}
/* Login card */
#stv-gate .login-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 26px 22px;
margin-bottom: 18px;
box-shadow: 0 16px 40px -30px rgba(33,28,26,.3);
}
#stv-gate .login-card h2 {
font-family: var(--serif);
font-weight: 500;
font-size: 26px;
margin: 8px 0 20px;
}
#stv-gate .fld {
margin-bottom: 14px;
}
#stv-gate .fld label {
display: block;
font-family: var(--label);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 6px;
}
#stv-gate .fld input {
width: 100%;
padding: 13px 14px;
border: 1.5px solid var(--line);
border-radius: 8px;
background: var(--bone);
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
}
#stv-gate .fld input:focus {
outline: none;
border-color: var(--accent);
background: #fff;
}
#stv-gate .login-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 16px;
}
#stv-gate .login-row label {
display: flex;
align-items: center;
gap: 7px;
}
#stv-gate .login-row a {
color: var(--accent);
font-weight: 600;
}
/* Pricing */
#stv-gate .join-label {
text-align: center;
font-size: 13px;
color: var(--ink-soft);
margin: 6px 0 24px;
}
#stv-gate .plan-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 22px 20px;
margin-bottom: 14px;
position: relative;
}
#stv-gate .plan-card.featured {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
#stv-gate .ribbon {
position: absolute;
top: -11px;
left: 20px;
background: var(--clay);
color: #fff;
font-family: var(--label);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: 4px 11px;
border-radius: 99px;
}
#stv-gate .plan-card .ptag {
font-family: var(--label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
#stv-gate .plan-card.featured .ptag {
color: var(--clay-soft);
}
#stv-gate .plan-card h3 {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
}
#stv-gate .price-row {
display: flex;
align-items: baseline;
gap: 6px;
margin: 10px 0 12px;
}
#stv-gate .price-row .amt {
font-family: var(--serif);
font-size: 34px;
}
#stv-gate .price-row .per {
font-size: 13px;
color: var(--ink-soft);
}
#stv-gate .plan-card.featured .per {
color: rgba(251,247,240,.6);
}
#stv-gate .plan-feats {
list-style: none;
font-size: 13.5px;
color: var(--ink-soft);
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 16px;
}
#stv-gate .plan-card.featured .plan-feats {
color: rgba(251,247,240,.72);
}
#stv-gate .plan-feats li {
display: flex;
align-items: flex-start;
gap: 9px;
}
#stv-gate .plan-feats li::before {
content: "✓";
color: var(--clay);
font-weight: 800;
font-size: 12px;
flex-shrink: 0;
margin-top: 1px;
}
#stv-gate .plan-card.featured .plan-feats li::before {
color: var(--clay-soft);
}
/* ─────────────────────────────────────────
LIBRARY VIEW
Bottom padding clears the fixed bottom nav on mobile.
───────────────────────────────────────── */
#stv-lib-app #view-lib {
padding-bottom: calc(76px + var(--sb));
}
#stv-lib-app .found-bar {
padding: 12px 18px 8px;
font-family: var(--label);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Video grid — base (mobile) 2-up; widens on tablet/desktop below. */
#stv-lib-app .vid-grid-m {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 0 18px;
}
#stv-lib-app .vcard-m {
display: block;
background: var(--paper);
border: 1px solid var(--line-soft);
border-radius: 12px;
overflow: hidden;
text-align: left;
box-shadow: 0 1px 2px rgba(33,28,26,.04);
transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
#stv-lib-app .vcard-m:active {
transform: scale(.97);
}
@media (hover: hover) {
#stv-lib-app .vcard-m:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -16px rgba(33,28,26,.45);
border-color: var(--line);
}
}
#stv-lib-app .vthumb-m {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--bone-2);
}
/* Soft scrim top+bottom so the white group label and duration pill stay
legible over bright thumbnails (e.g. whiteboard videos). */
#stv-lib-app .vthumb-m::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
linear-gradient(180deg, rgba(20,16,28,.42) 0%, rgba(20,16,28,0) 34%),
linear-gradient(0deg, rgba(20,16,28,.34) 0%, rgba(20,16,28,0) 26%);
}
/* Thumbnails are now REAL ![]()
elements (object-fit
cover). When .vthumb-bg is a
with an inline gradient background
it still works as a fallback. */
#stv-lib-app .vthumb-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#stv-lib-app .vthumb-grp {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
font-family: var(--label);
font-size: 8.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: var(--accent);
padding: 3px 8px;
border-radius: 5px;
box-shadow: 0 2px 8px -2px rgba(33,28,26,.55);
}
#stv-lib-app .vthumb-grp--violet { background: #6b5392; }
#stv-lib-app .vthumb-grp--plum { background: #4f3f68; }
#stv-lib-app .vthumb-grp--blue { background: #4a5c86; }
#stv-lib-app .vthumb-grp--clay { background: #8a6248; }
#stv-lib-app .vthumb-grp--teal { background: #3f6f6a; }
#stv-lib-app .vthumb-grp--slate { background: #5d5770; }
#stv-lib-app .vthumb-play {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
}
#stv-lib-app .vthumb-play span {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,.9);
display: grid;
place-items: center;
box-shadow: 0 6px 18px -5px rgba(0,0,0,.55);
transition: transform .2s ease, background .2s ease;
}
@media (hover: hover) {
#stv-lib-app .vcard-m:hover .vthumb-play span {
transform: scale(1.09);
background: #fff;
}
}
#stv-lib-app .vthumb-play span svg {
width: 14px;
height: 14px;
margin-left: 2px;
fill: var(--accent);
}
#stv-lib-app .vthumb-dur {
position: absolute;
bottom: 6px;
right: 7px;
z-index: 2;
background: rgba(20,16,28,.82);
color: #fff;
font-family: var(--label);
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: .02em;
}
#stv-lib-app .vmeta-m {
padding: 9px 10px 11px;
}
#stv-lib-app .vmeta-m h3 {
font-family: var(--sans);
font-weight: 700;
font-size: 13px;
line-height: 1.28;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .18s ease;
}
@media (hover: hover) {
#stv-lib-app .vcard-m:hover .vmeta-m h3 { color: var(--accent); }
}
#stv-lib-app .vmeta-cat {
margin-top: 4px;
font-family: var(--label);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .04em;
color: var(--ink-soft);
text-transform: uppercase;
}
#stv-lib-app .no-res-m {
grid-column: 1 / -1;
padding: 48px 0;
text-align: center;
color: var(--ink-soft);
font-size: 15px;
}
/* Pagination */
#stv-lib-app .pager-m {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 18px 18px 4px;
}
#stv-lib-app .pager-m button {
min-width: 38px;
height: 38px;
border: 1.5px solid var(--line);
background: var(--paper);
border-radius: 8px;
font-family: var(--label);
font-weight: 600;
font-size: 13px;
color: var(--ink);
padding: 0 10px;
}
#stv-lib-app .pager-m button.cur {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
#stv-lib-app .pager-m button:disabled {
opacity: .35;
cursor: default;
}
#stv-lib-app .pager-m .ep {
color: var(--ink-soft);
padding: 0 2px;
font-size: 13px;
}
/* NOTE: the watch view (#view-watch, .watch-*, .player-*, .cue-*,
.also-*) is intentionally omitted — there is no in-app watch view
in this build. */
/* ─────────────────────────────────────────
PROFILE VIEW
───────────────────────────────────────── */
#stv-lib-app #view-profile {
padding: 32px 18px calc(76px + var(--sb));
}
#stv-lib-app .profile-avatar {
width: 68px;
height: 68px;
border-radius: 50%;
background: linear-gradient(135deg, var(--wine), var(--clay));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
#stv-lib-app .profile-avatar svg {
width: 30px;
height: 30px;
stroke: #fff;
fill: none;
stroke-width: 1.8;
}
#stv-lib-app .profile-name {
font-family: var(--serif);
font-weight: 500;
font-size: 26px;
margin-bottom: 5px;
}
#stv-lib-app .profile-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--label);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 28px;
}
#stv-lib-app .profile-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #22B36B; /* membership green — matches the nav avatar dot + dropdown chip */
display: block;
}
#stv-lib-app .profile-ctas {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
#stv-lib-app .profile-rows {
display: flex;
flex-direction: column;
}
#stv-lib-app .profile-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid var(--line);
border-left: none;
border-right: none;
border-top: none;
font-size: 15px;
color: var(--ink);
background: none;
width: 100%;
text-align: left;
}
#stv-lib-app .profile-row:first-child {
border-top: 1px solid var(--line);
}
#stv-lib-app .profile-row svg {
width: 16px;
height: 16px;
stroke: var(--ink-soft);
fill: none;
stroke-width: 2;
}
#stv-lib-app .logout-btn {
margin-top: 28px;
width: 100%;
padding: 15px;
background: none;
border: 1.5px solid var(--line);
border-radius: 8px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--ink-soft);
transition: border-color .15s, color .15s;
}
#stv-lib-app .logout-btn:hover {
border-color: var(--ink);
color: var(--ink);
}
/* ─────────────────────────────────────────
CATEGORY BOTTOM SHEET (mobile; full width — no 430px cap)
───────────────────────────────────────── */
#stv-lib-app .sheet-bd {
display: none;
position: fixed;
inset: 0;
background: rgba(33,28,26,.45);
z-index: 90;
opacity: 0;
transition: opacity .25s;
}
#stv-lib-app .sheet-bd.open {
display: block;
}
#stv-lib-app .sheet-bd.vis {
opacity: 1;
}
#stv-lib-app .cat-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 91;
background: var(--paper);
border-radius: 20px 20px 0 0;
padding-bottom: var(--sb);
max-height: 82vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.32,0,.67,0);
}
#stv-lib-app .cat-sheet.open {
transform: translateY(0);
transition-timing-function: cubic-bezier(.22,1,.36,1);
}
#stv-lib-app .sheet-handle {
width: 36px;
height: 4px;
background: var(--line);
border-radius: 99px;
margin: 12px auto 0;
}
#stv-lib-app .sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 12px;
border-bottom: 1px solid var(--line-soft);
}
#stv-lib-app .sheet-header h3 {
font-family: var(--label);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-soft);
}
#stv-lib-app .sheet-close {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bone-2);
border: none;
display: grid;
place-items: center;
}
#stv-lib-app .sheet-close svg {
width: 13px;
height: 13px;
stroke: var(--ink);
fill: none;
stroke-width: 2;
}
#stv-lib-app .sheet-list {
padding: 8px 12px 20px;
display: flex;
flex-direction: column;
gap: 2px;
}
#stv-lib-app .scat-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 12px;
border-radius: 10px;
background: none;
border: none;
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
text-align: left;
transition: background .15s;
}
#stv-lib-app .scat-btn:active {
background: var(--bone);
}
#stv-lib-app .scat-btn.active {
background: var(--accent);
color: #fff;
}
#stv-lib-app .scat-btn .cnt {
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
}
#stv-lib-app .scat-btn.active .cnt {
color: rgba(255,255,255,.6);
}
/* ─────────────────────────────────────────
DESKTOP SIDEBAR (hidden on mobile; shown ≥900px)
Buttons grouped at the top, then search + category list — replaces the
mobile chip-rail / bottom-nav / sheet on desktop.
───────────────────────────────────────── */
#stv-lib-app .stv-side {
display: none;
flex-direction: column;
gap: 20px;
position: sticky;
top: calc(var(--stv-hdr, 0px) + 20px);
}
#stv-lib-app .side-actions { display: flex; flex-direction: column; gap: 10px; }
#stv-lib-app .profile-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
#stv-lib-app .profile-btn svg { width: 17px; height: 17px; flex: none; }
/* Two-line action button (also used in the mobile profile view). */
#stv-lib-app .btn-twoline {
flex-direction: column;
align-items: center;
gap: 3px;
padding-top: 13px;
padding-bottom: 13px;
line-height: 1.2;
text-align: center;
}
#stv-lib-app .btn-twoline .btn-sub {
font-family: var(--sans);
font-size: 11px;
font-weight: 400;
letter-spacing: .01em;
opacity: .8;
}
#stv-lib-app .searchbox { position: relative; }
#stv-lib-app .searchbox input {
width: 100%;
padding: 13px 40px 13px 15px;
border: 1.5px solid var(--line);
border-radius: 8px;
background: var(--paper);
font-family: var(--sans);
font-size: 14.5px;
color: var(--ink);
}
#stv-lib-app .searchbox input:focus { outline: none; border-color: var(--accent); }
#stv-lib-app .searchbox svg {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; opacity: .5; stroke: var(--ink); fill: none; stroke-width: 2;
}
#stv-lib-app .cats-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; }
#stv-lib-app .cats-panel .ct-head {
font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-soft); padding: 10px 12px 8px;
}
#stv-lib-app .cats-list { display: flex; flex-direction: column; gap: 2px; }
#stv-lib-app .cat {
display: flex; align-items: center; justify-content: space-between; width: 100%;
background: none; border: none; cursor: pointer; font-family: var(--sans);
font-size: 14.5px; color: var(--ink); padding: 9px 12px; border-radius: 7px;
text-align: left; transition: background .15s, color .15s;
}
#stv-lib-app .cat:hover { background: var(--bone-2); }
#stv-lib-app .cat.active { background: var(--accent); color: #fff; }
#stv-lib-app .cat .n { color: var(--ink-soft); font-size: 13px; }
#stv-lib-app .cat.active .n { color: rgba(255,255,255,.75); }
/* ─────────────────────────────────────────
RESPONSIVE — desktop extension
(the prototype is phone-only; widen the grid + center controls.)
───────────────────────────────────────── */
/* Tablet: 3-up grid */
@media (min-width: 560px) {
#stv-lib-app .vid-grid-m {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
}
/* ── Gate: base (mobile) extras for the desktop-capable markup ──
On mobile the teaser sits ABOVE the login card (as before), and the desktop-
only teaser header + count chips are hidden. */
#stv-gate .gate-grid { display: flex; flex-direction: column; gap: 0; }
#stv-gate .gate-grid > *,
#stv-gate .gate-plans > * { min-width: 0; } /* let flex children shrink (no overflow) */
#stv-gate .login-card { order: 2; }
#stv-gate .teaser { order: 1; }
#stv-gate .teaser-head { display: none; }
#stv-gate .teaser-chips { display: none; }
#stv-gate .gate-plans { display: flex; flex-direction: column; gap: 14px; }
/* Gate: comfortable centered column on small tablets (full-width bone canvas,
inner content centered — no dark side bands). */
@media (min-width: 760px) and (max-width: 899px) {
#stv-gate .gate-inner { max-width: 560px; margin: 0 auto; }
}
/* ── Gate DESKTOP (≥900): two-column login + teaser, then 2-up pricing.
Mirrors the desktop prototype (Video Library - …html). ── */
@media (min-width: 900px) {
/* full-width bone canvas; inner content centered (no dark side bands) */
#stv-gate .gate-inner { max-width: 1080px; margin: 0 auto; padding: 56px 40px 88px; }
#stv-gate .gate-hero h1 { font-size: clamp(38px, 4vw, 52px); }
#stv-gate .gate-hero p { font-size: 16px; max-width: 60ch; }
/* login (left) + teaser (right) */
#stv-gate .gate-grid {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 56px;
align-items: center;
margin-top: 36px;
}
#stv-gate .login-card { order: 0; margin-bottom: 0; padding: 38px 34px; }
#stv-gate .teaser {
order: 0;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: var(--paper);
box-shadow: 0 30px 60px -42px rgba(33,28,26,.4);
}
#stv-gate .teaser-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--line);
}
#stv-gate .teaser-head .t { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--ink); }
#stv-gate .teaser-head .badge {
font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent); background: var(--bone-2);
padding: 5px 11px; border-radius: 99px;
}
#stv-gate .teaser-swatches { margin: 0; padding: 22px; gap: 14px; border-radius: 0; }
#stv-gate .swatch { aspect-ratio: 16/11; }
/* veil now covers just the swatch area inside the card */
#stv-gate .teaser-lock { padding: 0 24px 26px; }
#stv-gate .teaser-chips {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px;
}
#stv-gate .teaser-chips .tchip {
font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .03em;
background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
padding: 5px 11px; border-radius: 99px;
}
/* pricing: two columns, centered */
#stv-gate .join-label { margin-top: 84px; }
#stv-gate .gate-plans {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
max-width: 880px; margin: 0 auto;
}
}
/* Desktop (≥900): sidebar layout — video grid + right sidebar. The mobile
chip-rail, bottom nav, sheet and profile view are all hidden in favor of the
sidebar (per the desktop design spec). */
@media (min-width: 900px) {
/* Two-column shell, centered. */
#stv-lib-app .stv-cols {
display: grid;
grid-template-columns: 1fr 304px;
gap: 48px;
align-items: start;
max-width: 1240px;
margin: 0 auto;
padding: 28px 40px 60px;
}
/* Grid is 3-up beside the sidebar; the .stv-cols padding supplies the gutters. */
#stv-lib-app .vid-grid-m {
grid-template-columns: repeat(3, 1fr);
gap: 26px 22px;
padding: 0;
}
#stv-lib-app .found-bar { padding: 0 0 16px; font-size: 12px; line-height: 1.4; }
#stv-lib-app .pager-m { padding: 28px 0 0; }
/* Always show the grid on desktop (profile view is mobile-only, so a saved
'profile' view must never blank the desktop page). */
#stv-lib-app #view-lib { display: block !important; padding-bottom: 0; }
/* Show the sidebar; hide every mobile-only control. */
#stv-lib-app .stv-side { display: flex; }
/* Offset the sidebar down by the height of the "39 VIDEOS" count label so it
lines up with the top edge of the first card row, not the label. The grid is
align-items:start, so this margin sits on top of the sticky column.
Value = .found-bar height: 1 line (12px × 1.4) + its 16px bottom padding. */
#stv-lib-app .stv-side { margin-top: calc(12px * 1.4 + 16px); }
#stv-lib-app .filter-bar,
#stv-lib-app .bottom-nav,
#stv-lib-app .cat-sheet,
#stv-lib-app .sheet-bd,
#stv-lib-app #view-profile { display: none !important; }
}
/* ─────────────────────────────────────────
REDUCED MOTION — disable sheet/card/chip transitions
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
#stv-lib-app .cat-sheet,
#stv-lib-app .sheet-bd,
#stv-lib-app .vcard-m,
#stv-lib-app .chip-btn {
transition: none !important;
}
}
/* ── Temp-password nudge banner ── */
.stv-pw-nudge {
background: var(--accent);
color: #fff;
border-radius: 8px;
margin: 0 0 16px;
}
.stv-pw-nudge .pw-nudge-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
flex-wrap: wrap;
}
.stv-pw-nudge .pw-nudge-text {
flex: 1 1 220px;
font-family: var(--sans);
font-size: 14px;
line-height: 1.4;
}
.stv-pw-nudge .pw-nudge-cta {
flex: 0 0 auto;
background: #fff;
color: var(--accent);
font-family: var(--sans);
font-weight: 700;
font-size: 13px;
text-decoration: none;
padding: 9px 16px;
border-radius: 4px;
white-space: nowrap;
}
.stv-pw-nudge .pw-nudge-cta:hover { filter: brightness(.97); }
.stv-pw-nudge .pw-nudge-x {
flex: 0 0 auto;
background: transparent;
border: none;
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
opacity: .8;
}
.stv-pw-nudge .pw-nudge-x:hover { opacity: 1; }
/* ═════════════════════════════════════════
WATCH & LISTEN — public library states
(page header, locked tiles, upsell cards,
grouped categories, lock sheet, mobile strip)
─────────────────────────────────────────── */
/* ── Page header (eyebrow / H1 / sub) ── */
#stv-lib-app .wl-hd {
max-width: 1240px;
margin: 0 auto;
padding: 38px 18px 4px;
}
#stv-lib-app .wl-eyebrow {
font-family: var(--label);
font-weight: 700;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 11px;
}
#stv-lib-app .wl-eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: currentColor;
display: inline-block;
}
/* body-scoped !important: Avada's responsive typography inflates custom
h1 sizes via calc() !important — this wins without editing the parent. */
body #stv-lib-app .wl-h1 {
font-family: var(--serif) !important;
font-weight: 500 !important;
font-size: clamp(34px, 4.6vw, 46px) !important;
line-height: 1.02 !important;
letter-spacing: -0.015em;
color: var(--ink);
margin: 14px 0 0;
}
#stv-lib-app .wl-h1 em {
color: var(--accent);
font-style: normal;
}
#stv-lib-app .wl-sub {
margin: 10px 0 0;
color: var(--ink-soft);
font-family: var(--sans);
font-size: 15.5px;
line-height: 1.55;
max-width: 560px;
}
/* ── Count-line membership badge (kept to one text line so the sidebar
top-alignment calc on .found-bar stays valid) ── */
#stv-lib-app .found-bar .fb-mb {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: top;
margin-left: 10px;
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.2;
text-transform: uppercase;
color: #22B36B;
background: rgba(34,179,107,.13);
padding: 2px 9px;
border-radius: 99px;
}
#stv-lib-app .found-bar .fb-mb .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22B36B;
}
#stv-lib-app .found-bar .fb-mb.t-1to1 {
color: var(--clay);
background: rgba(94,77,134,.13);
}
#stv-lib-app .found-bar .fb-mb.t-1to1 .dot { background: var(--clay); }
/* ── Locked tiles ── */
#stv-lib-app .vcard-m.is-locked .vthumb-bg { filter: saturate(.45) brightness(.78); }
#stv-lib-app .vcard-m.is-locked .vmeta-m h3 { color: var(--ink-soft); }
#stv-lib-app .vthumb-lock {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
}
#stv-lib-app .vthumb-lock span {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(33,28,26,.78);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: grid;
place-items: center;
}
#stv-lib-app .vthumb-lock svg {
width: 13px;
height: 13px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
/* Type ribbons (podcast green / YouTube red) reuse the group-pill slot. */
#stv-lib-app .vthumb-grp--pod { background: #22B36B; }
#stv-lib-app .vthumb-grp--ytb { background: #D94B3C; }
/* ── Inline upsell card (in-grid, spans 2 columns) ── */
#stv-lib-app .vcard-up {
grid-column: span 2;
background: var(--ink);
color: #fff;
border-radius: 11px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
position: relative;
overflow: hidden;
}
#stv-lib-app .vcard-up::before {
content: "";
position: absolute;
right: -50px;
top: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,77,134,.55), transparent 70%);
}
#stv-lib-app .vcard-up .tag {
font-family: var(--label);
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--clay-soft);
position: relative;
}
#stv-lib-app .vcard-up h3 {
font-family: var(--serif);
font-size: 21px;
line-height: 1.08;
font-weight: 500;
margin: 10px 0 0;
letter-spacing: -0.01em;
color: #fff;
position: relative;
}
#stv-lib-app .vcard-up .price {
font-family: var(--sans);
font-size: 13px;
color: rgba(251,247,240,.82);
position: relative;
}
#stv-lib-app .vcard-up .price b {
font-family: var(--serif);
font-size: 22px;
color: #fff;
font-weight: 500;
margin-right: 4px;
}
#stv-lib-app .vcard-up .b {
margin-top: 12px;
display: inline-block;
align-self: flex-start;
background: var(--clay-soft);
color: var(--wine-deep);
padding: 9px 16px;
border-radius: 99px;
font-family: var(--label);
font-weight: 700;
font-size: 11.5px;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
position: relative;
}
/* ── Sidebar dark upsell card ── */
#stv-lib-app .side-cta {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 11px;
padding: 18px 20px;
text-align: center;
}
#stv-lib-app .side-cta.dark {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
#stv-lib-app .side-cta.dark::before {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--clay-soft);
margin: 0 auto 12px;
}
#stv-lib-app .side-cta .ttl {
font-family: var(--serif);
font-size: 18px;
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.005em;
}
#stv-lib-app .side-cta .ttl em { color: var(--accent); font-style: normal; }
#stv-lib-app .side-cta.dark .ttl em { color: var(--clay-soft); }
#stv-lib-app .side-cta .sml {
margin-top: 6px;
font-size: 12.5px;
color: var(--ink-soft);
font-family: var(--label);
}
#stv-lib-app .side-cta.dark .sml { color: rgba(251,247,240,.7); }
#stv-lib-app .side-cta .b {
margin-top: 12px;
display: inline-block;
background: var(--accent);
color: #fff;
padding: 9px 18px;
border-radius: 99px;
font-family: var(--label);
font-weight: 700;
font-size: 12px;
letter-spacing: .05em;
text-transform: uppercase;
text-decoration: none;
}
#stv-lib-app .side-cta.dark .b {
background: var(--clay-soft);
color: var(--wine-deep);
}
#stv-lib-app .side-cta.dark .login {
display: block;
margin-top: 11px;
font-family: var(--label);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
color: rgba(251,247,240,.7);
text-decoration: none;
border-top: 1px solid rgba(251,247,240,.12);
padding-top: 11px;
}
#stv-lib-app .side-cta.dark .login b { color: var(--clay-soft); font-weight: 700; }
#stv-lib-app .side-cta.dark .login:hover { color: #fff; }
/* ── Grouped category rows (desktop sidebar + mobile sheet) ── */
#stv-lib-app .cat .lbl,
#stv-lib-app .scat-btn .lbl {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
#stv-lib-app .cat .ic,
#stv-lib-app .scat-btn .ic {
width: 13px;
height: 13px;
display: inline-grid;
place-items: center;
flex: none;
}
#stv-lib-app .cat .ic svg,
#stv-lib-app .scat-btn .ic svg {
width: 12px;
height: 12px;
fill: none;
stroke-width: 2;
}
#stv-lib-app .cat.free .ic svg,
#stv-lib-app .scat-btn.free .ic svg { stroke: #22B36B; }
#stv-lib-app .cat.lock .ic svg,
#stv-lib-app .scat-btn.lock .ic svg { stroke: var(--ink-soft); opacity: .7; }
#stv-lib-app .cat.lock,
#stv-lib-app .scat-btn.lock { color: var(--ink-soft); }
#stv-lib-app .cat.lock .n { opacity: .7; }
#stv-lib-app .cat.active .ic svg,
#stv-lib-app .scat-btn.active .ic svg { stroke: #fff; opacity: 1; }
#stv-lib-app .cat-group-hd {
font-family: var(--label);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #22B36B;
padding: 10px 12px 4px;
display: flex;
align-items: center;
gap: 7px;
}
#stv-lib-app .cat-group-hd.lock { color: var(--ink-soft); }
#stv-lib-app .cat-group-hd .ln {
flex: 1;
height: 1px;
background: currentColor;
opacity: .3;
}
/* ── Chip rail check/lock glyphs ── */
#stv-lib-app .chip-btn svg {
width: 10px;
height: 10px;
fill: none;
stroke-width: 2;
margin-right: 4px;
vertical-align: -1px;
}
#stv-lib-app .chip-btn.lk { color: var(--ink-soft); }
#stv-lib-app .chip-btn.lk svg { stroke: var(--ink-soft); }
#stv-lib-app .chip-btn.free svg { stroke: #22B36B; stroke-width: 2.4; }
#stv-lib-app .chip-btn.active svg { stroke: #fff; }
#stv-lib-app .chip-btn .cnt { opacity: .65; margin-left: 3px; }
/* ── Mobile join strip (guest) ── */
#stv-lib-app .mjoin {
margin: 14px 18px 0;
background: var(--ink);
color: #fff;
border-radius: 12px;
padding: 14px 16px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 12px;
}
#stv-lib-app .mjoin::before {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94,77,134,.55), transparent 70%);
}
#stv-lib-app .mjoin .ic {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--clay-soft);
color: var(--wine-deep);
display: grid;
place-items: center;
flex: none;
position: relative;
}
#stv-lib-app .mjoin .ic svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
#stv-lib-app .mjoin .txt { flex: 1; position: relative; min-width: 0; }
#stv-lib-app .mjoin .ttl {
font-family: var(--serif);
font-size: 15px;
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.005em;
}
#stv-lib-app .mjoin .ttl em { color: var(--clay-soft); font-style: normal; }
#stv-lib-app .mjoin .sml {
font-family: var(--label);
font-size: 10.5px;
color: rgba(251,247,240,.7);
margin-top: 2px;
letter-spacing: .04em;
}
#stv-lib-app .mjoin .b {
background: var(--clay-soft);
color: var(--wine-deep);
padding: 8px 14px;
border-radius: 99px;
font-family: var(--label);
font-weight: 700;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
flex: none;
position: relative;
}
#stv-lib-app .mjoin-login {
margin: 8px 18px 0;
text-align: center;
font-family: var(--label);
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
display: block;
padding: 4px;
}
#stv-lib-app .mjoin-login b { color: var(--accent); font-weight: 700; }
/* ── Mobile member status card ── */
#stv-lib-app .mstatus {
margin: 14px 18px 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
}
#stv-lib-app .mstatus .toprow {
display: flex;
align-items: center;
gap: 10px;
}
#stv-lib-app .mstatus .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22B36B;
flex: none;
}
#stv-lib-app .mstatus .lb {
font-family: var(--label);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #22B36B;
}
#stv-lib-app .mstatus .pl {
font-family: var(--sans);
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
margin-top: 1px;
}
#stv-lib-app .mstatus .sp { flex: 1; }
#stv-lib-app .mstatus .lk {
font-family: var(--label);
font-size: 11px;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
}
#stv-lib-app .mstatus .call {
margin-top: 13px;
padding-top: 13px;
border-top: 1px solid var(--line-soft);
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ink);
}
#stv-lib-app .mstatus .call .cic {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--clay-soft);
color: var(--wine-deep);
display: grid;
place-items: center;
flex: none;
}
#stv-lib-app .mstatus .call .cic svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
#stv-lib-app .mstatus .call .ct {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#stv-lib-app .mstatus .call .ct .l1 {
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
#stv-lib-app .mstatus .call .ct .l2 {
font-family: var(--label);
font-size: 11px;
color: var(--ink-soft);
}
#stv-lib-app .mstatus .call .arr {
font-family: var(--label);
font-size: 18px;
color: var(--ink-soft);
}
/* ── Locked-tap bottom sheet (mobile) ── */
#stv-lib-app .lock-bd {
display: none;
position: fixed;
inset: 0;
background: rgba(33,28,26,.45);
z-index: 92;
opacity: 0;
transition: opacity .25s;
}
#stv-lib-app .lock-bd.open { display: block; }
#stv-lib-app .lock-bd.vis { opacity: 1; }
#stv-lib-app .lock-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 93;
background: var(--paper);
border-radius: 24px 24px 0 0;
padding: 18px 20px calc(28px + var(--sb));
box-shadow: 0 -20px 40px -20px rgba(33,28,26,.3);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.32,0,.67,0);
}
#stv-lib-app .lock-sheet.open {
transform: translateY(0);
transition-timing-function: cubic-bezier(.22,1,.36,1);
}
#stv-lib-app .lock-sheet .grip {
width: 36px;
height: 4px;
background: var(--line);
border-radius: 99px;
margin: 0 auto 16px;
}
#stv-lib-app .lock-sheet .ic {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
margin-bottom: 12px;
}
#stv-lib-app .lock-sheet .ic svg {
width: 18px;
height: 18px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
#stv-lib-app .lock-sheet h3 {
font-family: var(--serif);
font-size: 22px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
#stv-lib-app .lock-sheet p {
font-family: var(--sans);
font-size: 13.5px;
color: var(--ink-soft);
margin: 8px 0 0;
line-height: 1.5;
}
#stv-lib-app .lock-sheet p b { color: var(--accent); }
#stv-lib-app .lock-sheet .bs {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 9px;
}
#stv-lib-app .lock-sheet .b1 {
background: var(--accent);
color: #fff;
padding: 13px;
border-radius: 99px;
font-family: var(--label);
font-weight: 700;
font-size: 13px;
letter-spacing: .04em;
text-align: center;
text-decoration: none;
}
#stv-lib-app .lock-sheet .b3 {
background: none;
color: var(--ink-soft);
padding: 8px;
font-family: var(--label);
font-size: 12px;
text-align: center;
text-decoration: none;
}
/* ── Locked-category upsell state (guest picked a members-only category) ── */
#stv-lib-app .cat-upsell {
grid-column: 1 / -1;
position: relative;
}
#stv-lib-app .cat-upsell .cu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
filter: blur(7px) saturate(.5) brightness(.88);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
#stv-lib-app .cat-upsell .cu-grid .vcard-m:nth-child(3) { display: none; }
#stv-lib-app .cat-upsell .cu-card {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 16px;
}
#stv-lib-app .cat-upsell .cu-card-inner {
background: var(--ink);
color: #fff;
border-radius: 14px;
padding: 24px 26px;
text-align: center;
max-width: 380px;
box-shadow: 0 30px 60px -30px rgba(33,28,26,.6);
}
#stv-lib-app .cat-upsell .ic {
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
margin: 0 auto 12px;
}
#stv-lib-app .cat-upsell .ic svg {
width: 18px;
height: 18px;
stroke: #fff;
fill: none;
stroke-width: 2;
}
#stv-lib-app .cat-upsell h3 {
font-family: var(--serif);
font-size: 21px;
line-height: 1.12;
font-weight: 500;
letter-spacing: -0.01em;
color: #fff;
margin: 0;
}
#stv-lib-app .cat-upsell p {
font-family: var(--sans);
font-size: 13px;
color: rgba(251,247,240,.78);
margin: 8px 0 0;
line-height: 1.5;
}
#stv-lib-app .cat-upsell p b { color: var(--clay-soft); }
#stv-lib-app .cat-upsell .b {
margin-top: 14px;
display: inline-block;
background: var(--clay-soft);
color: var(--wine-deep);
padding: 10px 18px;
border-radius: 99px;
font-family: var(--label);
font-weight: 700;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
}
/* ── Watch & Listen desktop adjustments ── */
@media (min-width: 900px) {
#stv-lib-app .wl-hd { padding: 46px 40px 8px; }
/* Mobile top strips never render on desktop (sidebar card covers it). */
#stv-lib-app .mjoin,
#stv-lib-app .mjoin-login,
#stv-lib-app .mstatus,
#stv-lib-app .lock-bd,
#stv-lib-app .lock-sheet { display: none !important; }
/* Bigger lock badge on desktop tiles (per spec: 46px vs 34px). */
#stv-lib-app .vthumb-lock span { width: 46px; height: 46px; }
#stv-lib-app .vthumb-lock svg { width: 17px; height: 17px; }
/* Locked-category preview mirrors the 3-up desktop grid. */
#stv-lib-app .cat-upsell .cu-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
#stv-lib-app .cat-upsell .cu-grid .vcard-m:nth-child(3) { display: block; }
}
/* Hover lift looks wrong on locked tiles — keep them flat. */
@media (hover: hover) {
#stv-lib-app .vcard-m.is-locked:hover {
transform: none;
box-shadow: 0 1px 2px rgba(33,28,26,.04);
border-color: var(--line-soft);
}
#stv-lib-app .vcard-m.is-locked:hover .vmeta-m h3 { color: var(--ink-soft); }
}
/* The extra 13th tile that squares up the upsell row (3-up grids only):
hidden on the 2-up mobile grid, where the upsell already fills its own row. */
@media (max-width: 559px) {
#stv-lib-app .vcard-m.vcard-fill { display: none; }
}