/* ============================================================================ Subtle Skin Engine (v2 — safe). Keeps the ORIGINAL header + grid 100% intact. Varies ONLY cosmetic details per site so sites don't look identical: • card title treatment (mt-card-*) • section heading style (mt-home-*) • badge + thumbnail feel (mt-ft-*) • spacing / title size (mt-d-*) NOTHING here changes header structure, grid display, or element positions (except the self-contained "overlay" title, which stays inside the card box). ============================================================================ */ /* ---- density: gentle spacing + title size (grid columns unchanged) --------- */ body.mt-d-compact { --mtx-gap: 14px; --mtx-pad: 30px; --mtx-title: .92rem; } body.mt-d-normal { --mtx-gap: 18px; --mtx-pad: 40px; --mtx-title: .96rem; } body.mt-d-spacious { --mtx-gap: 24px; --mtx-pad: 52px; --mtx-title: 1rem; } .mtsec { margin-bottom: var(--mtx-pad, 40px); } .mtgrid { gap: calc(var(--mtx-gap,18px) + 4px) var(--mtx-gap,18px); } .mtc-title { font-size: var(--mtx-title, .96rem); } /* baseline polish for every site: title turns accent on hover */ .mtc-title a { transition: color .15s ease; } .mtc:hover .mtc-title a { color: var(--c-accent, #e60000); } /* ============================ CARD STRUCTURAL VARIANTS ===================== These match the per-site DOM emitted by vbase_card() (different markup, not just CSS). Each renders cleanly inside the standard grid. */ /* default (.mtc) — theme baseline (avatar-left + full sub). */ /* overlay: caption is a child of the thumb anchor → sits over the image. */ .mtc-v-overlay .mtc-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.9) 18%, rgba(0,0,0,.35) 62%, transparent); } .mtc-v-overlay .mtc-over .mtc-title { margin: 0 0 3px; } .mtc-v-overlay .mtc-title a, .mtc-v-overlay:hover .mtc-title a { color: #fff; } .mtc-v-overlay .mtc-sub { color: rgba(255,255,255,.82); } /* minimal: no avatar node at all; clean title + stats. */ .mtc-v-min .mtc-meta { width: 100%; } /* accent: a channel chip row above the title, accent left-bar on the meta. */ .mtc-v-accent .mtc-meta { border-left: 3px solid var(--c-accent,#e60000); padding-left: 10px; } .mtc-v-accent .mtc-title { font-weight: 800; } .mtc-v-accent .mtc-chip { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: .76rem; color: var(--c-muted,#aaa); font-weight: 600; } .mtc-v-accent .mtc-chip .mtc-av { width: 22px; height: 22px; font-size: .72rem; } /* ============================ SECTION HEADINGS ============================ Restyle only the section

. Grid is untouched. */ /* grid — plain (default). */ body.mt-home-hero .mtsec-head h2 { border-left: 4px solid var(--c-accent,#e60000); padding-left: 11px; font-weight: 800; } body.mt-home-rows .mtsec-head h2 { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--c-accent,#e60000); } body.mt-home-masonry .mtsec-head h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent,#e60000); margin-right: 9px; vertical-align: middle; } body.mt-home-sidebar .mtsec-head h2 { text-transform: uppercase; letter-spacing: .07em; } body.mt-home-list .mtsec-head h2 { color: var(--c-accent,#e60000); } /* ============================ BADGE / THUMBNAIL FEEL ====================== Tie thumbnail corners + duration/quality badge to the footer axis. */ /* rich — default rounded thumb + dark badge. */ body.mt-ft-slim .mtc-thumb { border-radius: 6px; } body.mt-ft-slim .mtc-q { background: var(--c-accent,#e60000); color: #fff; } body.mt-ft-columns .mtc-thumb { border-radius: 16px; } body.mt-ft-columns .mtc-dur { background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.45); } /* ============================ HEADER STRUCTURAL VARIANTS =================== Match the per-site header DOM from header.php (different element order + grouping wrappers). All keep a clean single/two-row bar. Mobile falls back to the theme's stacked behavior so the nav drawer keeps working. */ /* classic — theme default (no override). */ /* search: search field grows in the middle. */ .mth-v-search .mthead-search { flex: 1; } /* centered: two rows — brand+actions, then centered nav+search. */ .mth-v-centered .mthead-in { flex-direction: column; align-items: stretch; gap: 10px; } .mth-v-centered .mthead-row { display: flex; align-items: center; gap: 14px; width: 100%; } .mth-v-centered .mthead-r1 { justify-content: space-between; } .mth-v-centered .mthead-r2 { justify-content: center; } .mth-v-centered .mthead-r2 .mthead-search { flex: 0 1 480px; } /* split: logo left, everything else grouped to the right. */ .mth-v-split .mthead-grp { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* stack: brand group + tools group on row 1, full-width nav on row 2. */ .mth-v-stack .mthead-in { flex-direction: column; align-items: stretch; gap: 8px; } .mth-v-stack .mthead-row { display: flex; align-items: center; gap: 14px; } .mth-v-stack .mthead-r1 { justify-content: space-between; } .mth-v-stack .mthead-grp { display: flex; align-items: center; gap: 12px; } .mth-v-stack .mthead-r1 .mthead-search { flex: 1; max-width: 440px; } .mth-v-stack .mthead-r2 { border-top: 1px solid var(--c-line,#272727); padding-top: 6px; overflow-x: auto; } /* mobile: unified, robust header for EVERY variant — [burger][logo][actions] on one row, full-width search below, nav in the burger dropdown. Uses !important because the desktop per-variant rules (.mth-v-* .mthead-r2 .mthead-search, specificity 0,3,0) are MORE specific than these overrides and would otherwise leak into mobile and hide the burger + actions (Upload/avatar/dark-mode). Keeping this predictable > a fancy per-variant mobile layout that silently drops the menu. */ @media (max-width: 900px) { .mthead-in { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .mthead-row, .mthead-grp { display: contents !important; } .mthead-burger { display: grid !important; order: 1 !important; } .mthead-logo { order: 2 !important; flex: 0 1 auto !important; justify-content: flex-start !important; } .mthead-actions{ order: 3 !important; margin-left: auto !important; } .mthead-search { order: 4 !important; flex: 1 1 100% !important; margin: 0 !important; max-width: none !important; } /* Mobile burger menu = clean floating dropdown panel (was rendering in-flow, unstyled). Anchor to the header + force the absolute panel. */ .mthead { position: relative; } body.mtnav-open .mthead-nav { position: absolute !important; left: 10px; right: 10px; top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 2px; background: var(--c-surface, #1a1a1a); border: 1px solid var(--c-line, #272727); border-radius: 14px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 1100; max-height: 72vh; overflow-y: auto; } body.mtnav-open .mthead-nav ul, body.mtnav-open .mthead-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } body.mtnav-open .mthead-nav a { padding: 11px 14px; border-radius: 9px; } } /* ============================ PER-CARD CHROME (watch-later + play) ========== The watch-later button + play overlay repeat on every card → vary them per site so they're not identical. Position by card variant, shape/size by footer axis; the WL ICON itself also varies (set in vbase_card by the footer axis). */ .mt-card-overlay .mtwl { left: 8px; right: auto; } /* top-left */ .mt-card-minimal .mtwl { top: auto; bottom: 8px; } /* bottom-right */ .mt-card-accent .mtwl { left: 8px; right: auto; top: auto; bottom: 8px; } /* bottom-left */ .mt-ft-slim .mtwl { border-radius: 7px; } /* rounded-square */ .mt-ft-columns .mtwl { width: 34px; height: 34px; } /* larger circle */ /* centered play circle (always visible, like the references) */ .mtc-play { opacity: .92; background: transparent; } .mtc-thumb:hover .mtc-play { opacity: 1; } .mtc-play svg { width: 46px; height: 46px; fill: #fff; background: rgba(0,0,0,.5); border-radius: 50%; padding: 13px; box-sizing: border-box; filter: none; } .mtc-thumb:hover .mtc-play svg { background: var(--c-accent, #e60000); } .mt-card-minimal .mtc-play svg { width: 40px; height: 40px; } .mt-card-accent .mtc-play svg { width: 52px; height: 52px; } .mt-card-overlay .mtc-play { background: transparent; } /* ============================ APP POLISH (reference-grade) ================= Mobile bottom tab bar + icon pills + verified badge — app-style, like the user's reference designs. */ /* search bar — subtle neutral pill that reads well on BOTH light + dark themes */ .mthead-search input { background: rgba(127,127,127,.1); } .mthead-search button { background: rgba(127,127,127,.16); } /* pill icons */ .mtpill-i { display: inline-flex; vertical-align: middle; margin-right: 6px; } .mtpill-i svg { width: 14px; height: 14px; } /* verified check next to channel names */ .mtverified { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--c-accent, #e60000); } .mtverified svg { width: 13px; height: 13px; } /* mobile bottom tab bar */ .mttab { display: none; } @media (max-width: 900px) { .mttab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 58px; background: var(--c-surface, #1a1a1a); border-top: 1px solid var(--c-line, #272727); padding: 0 4px calc(0px + env(safe-area-inset-bottom, 0px)); align-items: center; } .mttab-i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .62rem; font-weight: 600; text-decoration: none; height: 100%; /* reset native