/* =========================================================== TZVH v2 — Public-site design system Tokens, primitives, and component styles taken from the tzvh-redesign.html mockup. Single file, light + dark themes driven by the `data-theme` attribute on . =========================================================== */ /* ---------- Tokens ---------- */ :root, :root[data-theme="dark"] { --bg: #0A0A0B; --bg-2: #101013; --card: #141416; --card-2: #1B1B1E; --line: #222226; --line-2: #2E2E33; --text: #FFFFFF; --text-2: #B6B6BC; --text-3: #74747C; --red: #E50914; --red-hot: #FF1F2D; --red-deep: #8A050B; --shadow-red: 0 10px 40px -10px rgba(229, 9, 20, 0.45); --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.8); --grad-music: linear-gradient(135deg, #3D0066 0%, #8B0030 60%, #1A0010 100%); --grad-sports: linear-gradient(135deg, #003D2B 0%, #007A4D 60%, #02110A 100%); --grad-fights: linear-gradient(135deg, #4A0008 0%, #8A0510 50%, #0A0001 100%); --grad-tech: linear-gradient(135deg, #001E4A 0%, #0072C6 60%, #00060F 100%); --grad-cars: linear-gradient(135deg, #B23900 0%, #FF6A00 50%, #100400 100%); --grad-fashion: linear-gradient(135deg, #65003C 0%, #C20062 50%, #0F0006 100%); --grad-news: linear-gradient(135deg, #1C1C1F 0%, #3A3A40 50%, #060607 100%); --grad-funny: linear-gradient(135deg, #8A6500 0%, #FFB300 55%, #100A00 100%); --grad-exc: linear-gradient(135deg, #5C0000 0%, #E50914 55%, #100000 100%); --ad-yellow: #FFC700; } :root[data-theme="light"] { --bg: #F6F4EE; --bg-2: #EFECE3; --card: #FFFFFF; --card-2: #F0EDE5; --line: #E5E0D4; --line-2: #D5CFC0; --text: #0A0A0B; --text-2: #44444A; --text-3: #8B8A88; --red: #E50914; --red-hot: #C70710; --red-deep: #8A050B; --shadow-red: 0 14px 40px -14px rgba(229, 9, 20, 0.40); --shadow-card: 0 12px 30px -16px rgba(20, 20, 25, 0.18); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "ss01" on, "cv11" on; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background 0.15s, color 0.15s; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img { display: block; max-width: 100%; } ::selection { background: var(--red); color: #fff; } /* ---------- Grain overlay ---------- */ .tz-grain { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } :root[data-theme="light"] .tz-grain { opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- Ticker ---------- */ .tz-ticker { background: var(--red); color: #fff; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; } .tz-ticker-track { display: inline-flex; gap: 3rem; padding: 0.45rem 0; white-space: nowrap; animation: tz-ticker 38s linear infinite; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .tz-ticker-track span::before { content: "■"; margin-right: 0.75rem; font-size: 0.55rem; vertical-align: middle; } @keyframes tz-ticker { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } /* ---------- Topbar ---------- */ .tz-topbar { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: rgba(10, 10, 11, 0.78); border-bottom: 1px solid var(--line); } :root[data-theme="light"] .tz-topbar { background: rgba(246, 244, 238, 0.85); } .tz-topbar-inner { max-width: 1046px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 0.55rem 1.5rem; } .tz-logo { font-family: "Anton", "Bebas Neue", sans-serif; font-size: 1.85rem; letter-spacing: 0.04em; line-height: 1; display: inline-flex; align-items: baseline; color: var(--text); } .tz-logo-dot { color: var(--red); margin-left: 2px; } .tz-channels { display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap; } .tz-channels a { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.55rem 0.85rem; border-radius: 999px; color: var(--text-2); transition: color .18s ease, background .18s ease; position: relative; } .tz-channels a:hover { color: var(--text); } .tz-channels a.is-active { color: var(--text); background: rgba(229,9,20,0.12); } .tz-channels a.is-active::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 18px; height: 2px; background: var(--red); transform: translateX(-50%); border-radius: 2px; } .tz-actions { display: flex; align-items: center; gap: 0.4rem; } .tz-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-2); transition: color .15s ease, background .15s ease; } .tz-icon-btn:hover { color: var(--text); background: var(--card); } .tz-login { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); padding: 0.55rem 0.9rem; border-radius: 999px; transition: color .15s; } .tz-login:hover { color: var(--text); } .tz-btn-red { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--red); padding: 0.65rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow-red); transition: transform .15s ease, background .15s ease; } .tz-btn-red:hover { background: var(--red-hot); transform: translateY(-1px); } /* ---------- Wrap ---------- */ .tz-wrap { max-width: 1046px; margin: 0 auto; padding: 0 1.5rem; } /* ---------- Section header ---------- */ .tz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 2.25rem 0 1rem; } .tz-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3); } .tz-eyebrow .bar { display: inline-block; width: 28px; height: 2px; background: var(--red); margin-right: 0.7rem; vertical-align: middle; } .tz-section-title { font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: 0.01em; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 0.95; margin: 0.35rem 0 0; text-transform: uppercase; } .tz-section-title em { font-style: normal; color: var(--red); } .tz-see-all { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); transition: color .15s, border-color .15s, background .15s; } .tz-see-all:hover { color: var(--text); border-color: var(--red); background: rgba(229,9,20,0.08); } .tz-see-all svg { width: 14px; height: 14px; } /* ---------- Hero ---------- */ .tz-hero { padding-top: 1.75rem; padding-bottom: 0.5rem; } .tz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; } .tz-hero-card { position: relative; aspect-ratio: 16 / 9; background: var(--grad-exc); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(229,9,20,0.45), 0 10px 30px -10px rgba(0,0,0,0.8); isolation: isolate; } .tz-hero-card-bg { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; } .tz-hero-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.18), transparent 60%), linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%); } .tz-hero-tag { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--red); color: #fff; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.45rem 0.75rem; border-radius: 4px; } .tz-hero-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tz-pulse 1.6s ease-out infinite; } @keyframes tz-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.65); } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .tz-hero-play { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .2s ease, background .2s ease; } .tz-hero-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); animation: tz-ring 2.4s ease-out infinite; } @keyframes tz-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } } .tz-hero-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--red); } .tz-hero-play svg { width: 30px; height: 30px; margin-left: 4px; } .tz-hero-thumb-meta { position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,0.85); font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; } .tz-hero-thumb-meta .duration { background: rgba(0,0,0,0.7); padding: 0.35rem 0.55rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); } .tz-hero-content .tz-meta-row { display: flex; align-items: center; gap: 0.7rem; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.1rem; } .tz-meta-row .dot { width: 4px; height: 4px; background: var(--text-3); border-radius: 50%; } .tz-chip-channel { display: inline-block; padding: 0.3rem 0.55rem; border-radius: 999px; background: rgba(229,9,20,0.15); color: var(--red); border: 1px solid rgba(229,9,20,0.3); font-weight: 700; } .tz-hero-title { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; margin: 0 0 1.1rem; overflow-wrap: anywhere; word-break: break-word; } .tz-hero-title .accent { color: var(--red); } .tz-hero-title a { color: inherit; text-decoration: none; transition: color 160ms ease; } .tz-hero-title a:hover { color: var(--red-hot); } .tz-hero-deck { color: var(--text-2); font-size: 0.95rem; line-height: 1.45; margin: 0 0 1.6rem; max-width: 38ch; } .tz-hero-cta-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .tz-btn-ghost { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.85rem 1.15rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); display: inline-flex; align-items: center; gap: 0.55rem; transition: background .15s, border-color .15s; } .tz-btn-ghost:hover { background: var(--card); border-color: var(--text-3); } .tz-btn-watch { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.95rem 1.4rem; border-radius: 999px; color: #fff; background: var(--red); display: inline-flex; align-items: center; gap: 0.55rem; box-shadow: var(--shadow-red); transition: background .15s, transform .15s; } .tz-btn-watch:hover { background: var(--red-hot); transform: translateY(-1px); } .tz-btn-watch svg, .tz-btn-ghost svg { width: 14px; height: 14px; } /* ---------- Scroller (horizontal rows) ---------- */ .tz-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 22%); gap: 1rem; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 0.5rem 0.25rem 1rem; margin: 0 -0.25rem; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .tz-scroller::-webkit-scrollbar { height: 6px; } .tz-scroller::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; } .tz-scroller::-webkit-scrollbar-track { background: transparent; } .tz-scroller > * { scroll-snap-align: start; } /* ---------- Trending card ---------- */ .tz-trend-card { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 0.9rem; align-items: start; } .tz-trend-num { font-family: "Anton", sans-serif; font-size: 4.2rem; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--red); letter-spacing: -0.02em; transition: color .25s ease; } .tz-trend-card:hover .tz-trend-num { color: var(--red); } /* ---------- Top searches pills ---------- */ .tz-top-searches { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .tz-top-searches .label { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); margin-right: 0.35rem; } .tz-pill { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); background: var(--card); transition: border-color .15s, background .15s; } .tz-pill:hover { border-color: var(--red); background: rgba(229,9,20,0.08); } /* ---------- Video card ---------- */ .tz-video-card { display: block; position: relative; transition: transform .2s ease; } .tz-video-card:hover { transform: translateY(-3px); } .tz-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line); isolation: isolate; background-position: center; background-size: cover; } .tz-thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%); } .tz-thumb.is-music { background-image: var(--grad-music); } .tz-thumb.is-sports { background-image: var(--grad-sports); } .tz-thumb.is-fights { background-image: var(--grad-fights); } .tz-thumb.is-tech { background-image: var(--grad-tech); } .tz-thumb.is-cars { background-image: var(--grad-cars); } .tz-thumb.is-fashion { background-image: var(--grad-fashion); } .tz-thumb.is-news { background-image: var(--grad-news); } .tz-thumb.is-funny { background-image: var(--grad-funny); } .tz-thumb.is-exc { background-image: var(--grad-exc); } .tz-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } .tz-thumb-watermark { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: "Anton", sans-serif; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: 0.08em; color: rgba(255,255,255,0.12); text-transform: uppercase; pointer-events: none; user-select: none; } .tz-channel-chip { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.35rem 0.55rem; border-radius: 4px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); color: #fff; } .tz-channel-chip.is-red { background: var(--red); border-color: rgba(255,255,255,0.3); } .tz-channel-chip.is-ad { background: var(--ad-yellow); color: #1B1B1E; border-color: rgba(0,0,0,0.18); } /* Premium / paywall chip — top-right of the thumb */ .tz-paywall-chip { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.35rem; font-family: "JetBrains Mono", monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3rem 0.5rem 0.3rem 0.45rem; border-radius: 4px; background: linear-gradient(135deg, #FFD400 0%, #FFB300 100%); color: #1a1410; border: 1px solid rgba(0,0,0,0.18); box-shadow: 0 4px 12px rgba(255,179,0,0.35); } .tz-paywall-chip svg { width: 11px; height: 11px; display: block; } /* Subtle dim on paywalled thumbs so the lock badge reads first */ .tz-video-card.is-paywalled .tz-thumb-img { filter: brightness(0.86); transition: filter .2s ease; } .tz-video-card.is-paywalled:hover .tz-thumb-img { filter: brightness(1); } .tz-duration { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 5; font-family: "JetBrains Mono", monospace; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.25rem 0.5rem; border-radius: 4px; background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.18); color: #fff; } .tz-live { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--red); color: #fff; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.35rem 0.55rem; border-radius: 4px; } .tz-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: tz-pulse 1.4s ease-out infinite; } .tz-play-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; } .tz-play-overlay > div { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transform: scale(0.9); transition: transform .25s ease, background .2s; } .tz-play-overlay svg { width: 22px; height: 22px; margin-left: 3px; color: #fff; } .tz-video-card:hover .tz-play-overlay { opacity: 1; } .tz-video-card:hover .tz-play-overlay > div { transform: scale(1); background: var(--red); } .tz-video-card:hover .tz-thumb { box-shadow: 0 12px 35px -10px rgba(229,9,20,0.45), 0 6px 18px -8px rgba(0,0,0,0.6); border-color: var(--line-2); } .tz-video-meta { padding: 0.6rem 0.1rem 0; } .tz-video-title { font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 0.93rem; line-height: 1.3; color: var(--text); margin: 0 0 0.5rem; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s ease; } .tz-video-card:hover .tz-video-title { color: var(--red-hot); } .tz-video-byline { color: var(--text-3); font-size: 0.78rem; font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 0.55rem; } .tz-video-byline .dot { width: 3px; height: 3px; background: var(--text-3); border-radius: 50%; } /* ---------- Latest grid (3 per row) ---------- */ .tz-grid-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.25rem; } /* ---------- Ad slots — IAB-standard sizes, matches v1 banner geometry ---- header / footer / trending-this-week-header → 728×90 leaderboard home-trending-now → 300×100 posts-list / post-trending-now → 300×250 medium-rectangle trending-this-week-footer → 250×250 square floating-footer → 728×90 fixed, centred Ads render at their NATURAL pixel dimensions (no upscaling on big screens), and shrink proportionally on narrow viewports (object-fit: contain so the creative is never cropped, regardless of asset aspect ratio). ---------------------------------------------------------------- */ .tz-ad { position: relative; margin: 1.5rem auto; /* always horizontally centred */ padding: 0; display: flex; align-items: center; justify-content: center; width: 100%; } /* Wrapping / inner block fills the slot box */ .tz-ad > *, .tz-ad a { display: block; width: 100%; height: 100%; line-height: 0; } /* `contain` so the creative is shown 1:1 (with letterbox if asset ratio differs from slot ratio), never cropped. Width caps at the banner's natural width. */ .tz-ad img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; display: block; object-fit: contain; } .tz-ad iframe { width: 100%; height: 100%; border: 0; display: block; } .tz-ad video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } /* Body-injection raw