/* Theme Name: TechnoSports Photos – Clean Singles Theme URI: https://photos.technosports.co.in/ Author: TechnoSports Description: Safe variant. Singles/labels/archives render without front-end scripts so content never blanks. Chips hidden globally. Version: 1.1.0 License: GNU GPL v2 or later Text Domain: ts-photos-clean-singles */ /* Base child styles (merged) */ /* === Brand lockup sizing v0.6.33g === */ .tsp-brand{ --brand-size:22px; --brand-text-scale:0.92; --brand-logo-extra:10px; } @media (max-width:900px){ .tsp-brand{ --brand-size:18px; --brand-logo-extra:8px; } } .tsp-brand-logo{ height: calc(var(--brand-size) + var(--brand-logo-extra)); width:auto; display:block; } .tsp-brand-text{ font-size: var(--brand-size); line-height:1; font-weight:700; display:inline-block; transform: translateY(1px); } /* Theme Name: TS Photos Theme Child (Complete) Theme URI: https://photos.technosports.co.in/ Template: ts-photos-theme Author: TechnoSports + ChatGPT Description: Pinterest-style child theme with infinite scroll, trending labels, robust search overlay (scrollable + infinite), and a dedicated full search results page. Includes attachment layout fixes (mobile order + desktop gutter fix). Version: 0.6.30 Text Domain: ts-photos-theme-child-complete */ :root{--pad:16px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b0c10;color:#e8e8e8;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} .tsp-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(11,12,16,.7);border-bottom:1px solid rgba(255,255,255,.06)} .tsp-header-inner{max-width:1280px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:12px} .tsp-logo{color:#fff;text-decoration:none;font-weight:700} .tsp-actions{margin-left:auto;display:flex;gap:8px;align-items:center} .tsp-btn{appearance:none;border:1px solid rgba(255,255,255,.12);background:#121317;color:#fff;padding:8px 10px;border-radius:12px;cursor:pointer} .tsp-btn:hover{border-color:rgba(255,255,255,.28)} .tsp-trending{overflow:auto;padding:6px var(--pad) 10px;border-top:1px solid rgba(255,255,255,.06)} .tsp-trending-row{display:flex;gap:8px} .tsp-chip{padding:6px 10px;white-space:nowrap;font-size:14px;border-radius:999px;background:#191b22;color:#eaeaea;border:1px solid rgba(255,255,255,.08);text-decoration:none} .tsp-chip:hover{background:#20232b} .tsp-grid{column-width:270px;column-gap:12px;max-width:1280px;margin:18px auto;padding:0 var(--pad) 80px} @media (max-width:600px){.tsp-grid{column-width:160px;column-gap:8px;padding:0 8px 80px}} .tsp-card{break-inside:avoid;margin:0 0 12px;display:block;background:#0f1015;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06)} .tsp-card img{width:100%;height:auto;display:block;background:#111} .tsp-meta{padding:10px;display:flex;gap:6px;flex-wrap:wrap}.tsp-tag{font-size:12px;color:#cfd3ff;background:#171a26;border:1px solid rgba(255,255,255,.06);padding:4px 8px;border-radius:8px} /* Search overlay */ .tsp-search-overlay{position:fixed;inset:0;background:rgba(5,6,10,.94);display:none;z-index:100;overflow:auto} .tsp-search-box{max-width:960px;margin:80px auto;padding:0 var(--pad)} .tsp-search-input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:#0d0e14;color:#fff;font-size:18px} .tsp-search-grid{margin-top:14px;column-width:240px;column-gap:10px} @media (max-width:600px){.tsp-search-grid{column-width:150px}} #tsp-search-sentinel{height:1px} .tsp-empty{opacity:.7} /* Attachment page */ .tsp-attach{max-width:1200px;margin:20px auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start} .tsp-sticky-aside{position:sticky;top:76px} .tsp-main figure{margin:0} /* Desktop gutter fix: Explore spans both columns */ .tsp-explore-section{grid-column:1 / -1;margin-top:24px} /* Mobile order & width fix */ @media (max-width: 900px){ .tsp-attach{grid-template-columns:1fr;justify-items:stretch} .tsp-main{order:1;width:100%} .tsp-sticky-aside{order:2;position:static;width:100%;justify-self:stretch} .tsp-explore-section{grid-column:1 / -1;margin-top:24px} .tsp-grid[data-compact="1"]{column-width:160px} } /* 0.6.10: default small margin and allow JS to pull it up if aside is taller */ .tsp-explore-section{grid-column:1 / -1;margin-top:24px} /* 0.6.12: Logo + explore placement */ .tsp-logo-wrap { display:flex; align-items:center; gap:10px; } .custom-logo { height:28px; width:auto; } .tsp-logo { color:#fff; text-decoration:none; font-weight:700; font-size:18px; } @media (min-width: 901px){ .tsp-explore-section{ grid-column: 1 / 2 !important; margin-top: 12px; } } /* 0.6.13: two-column layout with left stack to remove gap */ .tsp-attach{grid-template-columns:minmax(0,1fr) 340px} .tsp-left{display:flex;flex-direction:column;gap:16px} .tsp-explore-section{grid-column:auto;margin-top:0} @media (max-width:900px){ .tsp-attach{grid-template-columns:1fr} .tsp-left{order:1} .tsp-sticky-aside{order:2;position:static} .tsp-explore-section{order:3} } /* 0.6.14: tighten columns */ .tsp-attach{grid-template-columns:minmax(0,1fr) 320px} /* === TSP Photo Detail v0.6.27 === */ .tsp-photo { display:grid; grid-template-columns:1fr; gap:16px; } .tsp-photo-hero { order:0; } .tsp-photo-meta { order:1; } .tsp-photo-more { order:2; margin-top:8px; } .tsp-photo-hero-img { width:100%; height:auto; display:block; border-radius:14px; } @media (max-width:640px){ .tsp-photo{ padding:8px 12px; } .tsp-photo-hero{ margin-top:6px; } .tsp-photo-more h2{ margin:18px 0 10px; } } .tsp-more-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; } .tsp-more-grid a{ display:block; border-radius:12px; overflow:hidden; background:#0f1116; } .tsp-more-grid img{ width:100%; height:auto; display:block; } /* === /TSP Photo Detail === */ /* TSP_HIDE_BLOCKS_V028: conservative spacing fix after removal */ body.home .latest-photos, body.search .latest-photos { display:none !important; } /* TSP_HIDE_BLOCKS_V029 */ h1,h2,h3,h4{} /* TSP_HIDE_FALLBACK_V030 */ :root{} /* === v0.6.31 Mobile hero emphasis === */ @media (max-width: 768px){ .tsp-attach .tsp-main .tsp-card img, .tsp-photo-hero img, .entry-attachment img { width: 100% !important; height: auto !important; display: block; box-shadow: 0 8px 24px rgba(0,0,0,.45); border-radius: 12px; } /* De-emphasize side items */ .tsp-attach aside .tsp-grid img { opacity: .55; filter: grayscale(35%); transition: opacity .2s ease; } .tsp-attach aside .tsp-grid a:hover img { opacity: 1; filter: none; } } /* Add a utility for active thumbnail if present */ .is-active-thumb img, .tsp-thumb.is-active img { opacity: 1 !important; filter: none !important; box-shadow: 0 0 0 2px rgba(255,255,255,.6); } /* === v0.6.31b Mobile hero absolute priority & clarity === */ @media (max-width: 900px){ .tsp-attach{ grid-auto-flow: row; } .tsp-left{ order:1; } .tsp-main{ order:1; z-index:2; } .tsp-sticky-aside{ order:2; position:static !important; z-index:1; margin-top:16px; } .tsp-explore-section{ order:3; } /* ensure hero is never dimmed by stray rules */ .tsp-main .tsp-card img, .tsp-main img, .tsp-photo-hero img, .entry-attachment img{ opacity:1 !important; filter:none !important; } } /* === v0.6.31c Mobile layout hard-lock === */ @media (max-width: 900px){ .tsp-attach{ display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "main" "aside" "explore" !important; row-gap: 16px !important; } .tsp-main{ grid-area: main !important; order: 1 !important; } .tsp-sticky-aside{ grid-area: aside !important; order: 2 !important; position: static !important; } .tsp-explore-section{ grid-area: explore !important; order: 3 !important; } /* un-dim hero image */ .tsp-main .tsp-card img, .tsp-main img{ opacity:1 !important; filter:none !important; } } /* === v0.6.31e Explore placement (desktop) === */ @media (min-width: 901px){ /* Explore belongs to the left stack, right under the hero */ .tsp-explore-section{ grid-column: 1 / 2 !important; order: 2 !important; margin-top: 12px !important; } .tsp-left{ align-self: start; } } /* === v0.6.31f: explore first render stability === */ .tsp-explore-section #tsp-explore{ min-height: 120px; } /* v0.6.32: avoid giant gaps if a grid is temporarily empty */ .tsp-explore-section #tsp-explore:empty { min-height: 120px; margin: 0; } .tsp-sticky-aside #tsp-similar:empty { min-height: 0; } /* v0.6.33: mobile hero reliability & infinite scroll UI comfort */ .tsp-main .tsp-card img { display:block; max-width:100%; height:auto; } @media (max-width: 900px){ .tsp-attach{ display:grid; grid-template-columns:1fr; grid-template-areas: "main" "aside" "explore"; } .tsp-main{ grid-area: main; } .tsp-sticky-aside{ grid-area: aside; position:static !important; } .tsp-explore-section{ grid-area: explore; } } /* v0.6.33c ensure explore visible baseline */ .tsp-explore-section #tsp-explore{min-height:120px} /* === Brand lockup (unified) === */ .tsp-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .tsp-brand{--brand-size:22px;--brand-text-scale:0.92;--brand-logo-extra:7px} .tsp-brand-logo{height:calc(var(--brand-size) + var(--brand-logo-extra, 7px));width:auto;display:block} .tsp-brand-text{font-size:calc(var(--brand-size)*var(--brand-text-scale));line-height:1;font-weight:700;display:inline-block;letter-spacing:.2px;transform:translateY(1px);color:#fff} @media (max-width:900px){ .tsp-brand{--brand-size:18px;--brand-text-scale:0.92;--brand-logo-extra:6px} } /* Reduce layout shift */ .tsp-card img{ content-visibility:auto; contain-intrinsic-size: 320px auto; } /* Soft kill Ideas block on non-single pages (prevents flash & CLS) */ body.home #pv-ideas, body.search #pv-ideas, body.archive #pv-ideas, body.home .pv-right .pv-title, body.search .pv-right .pv-title, body.archive .pv-right .pv-title { display:none !important; visibility:hidden !important; } /* === Performance: cheap layout/paint for grid === */ .tsp-grid-item, .pv-grid > * { content-visibility: auto; contain-intrinsic-size: 360px 540px; /* placeholder size to avoid jumps */ } .pv-grid img { max-width: 100%; height: auto; } /* === Mobile-first LCP tune === */ .pv-grid > *:nth-child(-n+6) { content-visibility: visible; contain-intrinsic-size: auto; } @media (max-width: 600px){ .pv-grid > *:nth-child(-n+4) { content-visibility: visible; contain-intrinsic-size: auto; } } /* Guards */ .tsp-trending, .tsp-trending-row, a.ts-chip { display:none !important; } body.single main, body.archive main, body.single .entry-content, body.archive .entry-content, #content, .content-area, .site-main { display:block !important; opacity:1 !important; visibility:visible !important; }