/* ============================================================================ 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 (ia-card-*) • section heading style (ia-home-*) • badge + thumbnail feel (ia-ft-*) • spacing / title size (ia-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.ia-d-compact { --iax-gap: 14px; --iax-pad: 30px; --iax-title: .92rem; } body.ia-d-normal { --iax-gap: 18px; --iax-pad: 40px; --iax-title: .96rem; } body.ia-d-spacious { --iax-gap: 24px; --iax-pad: 52px; --iax-title: 1rem; } .iasec { margin-bottom: var(--iax-pad, 40px); } .iagrid { gap: calc(var(--iax-gap,18px) + 4px) var(--iax-gap,18px); } .iac-title { font-size: var(--iax-title, .96rem); } /* baseline polish for every site: title turns accent on hover */ .iac-title a { transition: color .15s ease; } .iac:hover .iac-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 (.iac) — theme baseline (avatar-left + full sub). */ /* overlay: caption is a child of the thumb anchor → sits over the image. */ .iac-v-overlay .iac-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); } .iac-v-overlay .iac-over .iac-title { margin: 0 0 3px; } .iac-v-overlay .iac-title a, .iac-v-overlay:hover .iac-title a { color: #fff; } .iac-v-overlay .iac-sub { color: rgba(255,255,255,.82); } /* minimal: no avatar node at all; clean title + stats. */ .iac-v-min .iac-meta { width: 100%; } /* accent: a channel chip row above the title, accent left-bar on the meta. */ .iac-v-accent .iac-meta { border-left: 3px solid var(--c-accent,#e60000); padding-left: 10px; } .iac-v-accent .iac-title { font-weight: 800; } .iac-v-accent .iac-chip { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: .76rem; color: var(--c-muted,#aaa); font-weight: 600; } .iac-v-accent .iac-chip .iac-av { width: 22px; height: 22px; font-size: .72rem; } /* ============================ SECTION HEADINGS ============================ Restyle only the section

. Grid is untouched. */ /* grid — plain (default). */ body.ia-home-hero .iasec-head h2 { border-left: 4px solid var(--c-accent,#e60000); padding-left: 11px; font-weight: 800; } body.ia-home-rows .iasec-head h2 { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--c-accent,#e60000); } body.ia-home-masonry .iasec-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.ia-home-sidebar .iasec-head h2 { text-transform: uppercase; letter-spacing: .07em; } body.ia-home-list .iasec-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.ia-ft-slim .iac-thumb { border-radius: 6px; } body.ia-ft-slim .iac-q { background: var(--c-accent,#e60000); color: #fff; } body.ia-ft-columns .iac-thumb { border-radius: 16px; } body.ia-ft-columns .iac-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. */ .iah-v-search .iahead-search { flex: 1; } /* centered: two rows — brand+actions, then centered nav+search. */ .iah-v-centered .iahead-in { flex-direction: column; align-items: stretch; gap: 10px; } .iah-v-centered .iahead-row { display: flex; align-items: center; gap: 14px; width: 100%; } .iah-v-centered .iahead-r1 { justify-content: space-between; } .iah-v-centered .iahead-r2 { justify-content: center; } .iah-v-centered .iahead-r2 .iahead-search { flex: 0 1 480px; } /* split: logo left, everything else grouped to the right. */ .iah-v-split .iahead-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. */ .iah-v-stack .iahead-in { flex-direction: column; align-items: stretch; gap: 8px; } .iah-v-stack .iahead-row { display: flex; align-items: center; gap: 14px; } .iah-v-stack .iahead-r1 { justify-content: space-between; } .iah-v-stack .iahead-grp { display: flex; align-items: center; gap: 12px; } .iah-v-stack .iahead-r1 .iahead-search { flex: 1; max-width: 440px; } .iah-v-stack .iahead-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 (.iah-v-* .iahead-r2 .iahead-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) { .iahead-in { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .iahead-row, .iahead-grp { display: contents !important; } .iahead-burger { display: grid !important; order: 1 !important; } .iahead-logo { order: 2 !important; flex: 0 1 auto !important; justify-content: flex-start !important; } .iahead-actions{ order: 3 !important; margin-left: auto !important; } .iahead-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. */ .iahead { position: relative; } body.ianav-open .iahead-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.ianav-open .iahead-nav ul, body.ianav-open .iahead-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } body.ianav-open .iahead-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). */ .ia-card-overlay .iawl { left: 8px; right: auto; } /* top-left */ .ia-card-minimal .iawl { top: auto; bottom: 8px; } /* bottom-right */ .ia-card-accent .iawl { left: 8px; right: auto; top: auto; bottom: 8px; } /* bottom-left */ .ia-ft-slim .iawl { border-radius: 7px; } /* rounded-square */ .ia-ft-columns .iawl { width: 34px; height: 34px; } /* larger circle */ /* centered play circle (always visible, like the references) */ .iac-play { opacity: .92; background: transparent; } .iac-thumb:hover .iac-play { opacity: 1; } .iac-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; } .iac-thumb:hover .iac-play svg { background: var(--c-accent, #e60000); } .ia-card-minimal .iac-play svg { width: 40px; height: 40px; } .ia-card-accent .iac-play svg { width: 52px; height: 52px; } .ia-card-overlay .iac-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 */ .iahead-search input { background: rgba(127,127,127,.1); } .iahead-search button { background: rgba(127,127,127,.16); } /* pill icons */ .iapill-i { display: inline-flex; vertical-align: middle; margin-right: 6px; } .iapill-i svg { width: 14px; height: 14px; } /* verified check next to channel names */ .iaverified { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--c-accent, #e60000); } .iaverified svg { width: 13px; height: 13px; } /* mobile bottom tab bar */ .iatab { display: none; } @media (max-width: 900px) { .iatab { 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; } .iatab-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