/* HS CSS VERSION: 2026-05-11-1 */ :root{ --bg:#ffffff; --bg-custom:#ffffff; --surface:#ffffff; --surface-2:#f5f5f5; --text:#0e0e0e; --muted:#666666; --border:#dddddd; --accent:#000000; --chip:#f2f2f2; --shadow:0 1px 2px rgba(0,0,0,.06); --maxw:1380px; --font-scale:1; } html[data-theme="dark"]{ --surface:#181818; --surface-2:#232323; --text:#f7f7f7; --muted:#ababab; --border:#303030; --accent:#ffffff; --chip:#202020; --shadow:0 1px 2px rgba(0,0,0,.24); } html:not([data-theme]), html[data-theme="light"], html[data-theme="dark"]{ --bg:var(--bg-custom); } *{box-sizing:border-box} html{font-size:calc(16px * var(--font-scale))} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)} a{color:inherit} img{max-width:100%;display:block} .shell{max-width:var(--maxw);margin:0 auto;padding:14px} .topbar{padding:4px 0 8px;border-bottom:1px solid var(--border)} .topbar-main{ display:grid; grid-template-columns:auto minmax(320px,1fr) auto; gap:14px; align-items:center; min-height:42px; } .brand{display:inline-block} .brand .logo{width:auto} .brand .logo-light,.brand .logo-dark{height:38px;width:auto} .brand .logo-light{display:block} .brand .logo-dark{display:none} html[data-theme="dark"] .brand .logo-light, html[data-theme="dark"] .ql-light{display:none} html[data-theme="dark"] .brand .logo-dark, html[data-theme="dark"] .ql-dark{display:block} .brand-wrap{display:flex;align-items:flex-end;gap:10px;min-width:240px} .brand-sub{ font:700 18px/1 Arial,Helvetica,sans-serif; letter-spacing:1px; color:var(--muted); white-space:nowrap; padding-bottom:2px; } .topSearch{ min-width:0; display:block; max-width:480px; justify-self:end; width:100%; min-height:40px; position:relative; } .topSearch .gsc-control-cse, .topSearch .gsc-control-cse-en, .topSearch .gsc-control-wrapper-cse, .topSearch .gsc-search-box, .topSearch table, .topSearch tbody, .topSearch tr, .topSearch td{ background:transparent!important; border:0!important; padding:0!important; margin:0!important; } .topSearch .gsc-control-wrapper-cse{padding:0!important} .topSearch .gsc-input-box{ position:relative!important; border:1px solid #000!important; border-radius:10px!important; background:var(--surface)!important; height:38px!important; box-shadow:none!important; } .topSearch .gsc-input-box::before{ content:"⌕"; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#656565; font-size:22px; pointer-events:none; } .topSearch input.gsc-input, .topSearch input.gsib_a{ background:transparent!important; color:var(--text)!important; height:36px!important; padding-left:28px!important; text-indent:0!important; box-sizing:border-box!important; font-size:16px!important; } .topSearch .gsc-search-box-tools .gsc-search-box .gsc-input, .topSearch .gsc-input-box, .topSearch .gsc-search-button-v2{border-radius:10px!important} .topSearch .gsc-search-button-v2{ margin-left:8px!important; border:1px solid var(--border)!important; background:var(--surface)!important; height:38px!important; padding:0 12px!important; } .topSearch .gsc-search-button-v2 svg{width:18px;height:18px} .topSearch .gsib_b{vertical-align:middle!important} .topSearch .gscb_a{color:var(--muted)!important} .header-tools{display:flex;align-items:center;gap:10px;justify-self:end} .quicklinks-menu{position:relative} .quicklinks-toggle, .voice-search-btn{ border:0; background:transparent; color:var(--text); width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:22px; line-height:1; } .quicklinks-toggle:hover, .voice-search-btn:hover{background:var(--surface-2)} .quicklinks-panel{ position:absolute; top:calc(100% + 6px); right:0; z-index:120; width:180px; height:600px; max-height:600px; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:8px 0; } .quicklinks-panel a{ display:block; padding:8px 14px; text-decoration:none; white-space:nowrap; } .quicklinks-panel a:hover{background:var(--surface-2)} .ql-icon{ width:32px!important; height:32px!important; min-width:32px; min-height:32px; object-fit:contain; display:block; margin:0 10px 0 6px; background:transparent; } .ql-dark{display:none} .quicklinks-toggle{ margin-left:6px; margin-right:-6px; } #voice-search-btn, #voice-search-btn *{cursor:pointer} .voice-search-btn.listening, #voice-search-btn[aria-busy="true"]{ background:#960019!important; box-shadow:0 0 10px rgba(150,0,25,.45); transform:scale(1.05); } .voice-search-btn.listening .ql-icon, #voice-search-btn[aria-busy="true"] .ql-icon{filter:brightness(1.08)} .modebar{margin:12px 0 10px} .modebar-row{ display:flex!important; align-items:center!important; gap:10px!important; flex-wrap:nowrap!important; width:100%!important; } .display-tools select, .display-tools button, .feed-step, .feed-chip, .modebar button, .feedmenu-toggle{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:12px; font-size:14px; } .modebar button{ flex:0 0 auto!important; width:auto!important; min-width:0!important; padding:8px 12px!important; cursor:pointer; border-radius:12px; } .modebar button.active{ background:var(--text); color:var(--bg); border-color:var(--text); } .top-feed-menu-slot{ flex:1 1 auto!important; min-width:0!important; width:auto!important; display:flex!important; justify-content:flex-end!important; padding-right:88px!important; } .top-feed-menu-slot .feedmenu, .feedmenu-top{ margin-left:auto!important; margin-right:0!important; } .feedmenu{position:relative;display:inline-block} .feedmenu-toggle{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:var(--chip); border-radius:12px; padding:10px 16px; font-weight:800; text-transform:uppercase; } .feedmenu-toggle::-webkit-details-marker{display:none} .feedmenu-panel{ display:none; position:absolute; top:calc(100% + 6px); left:50%!important; right:auto!important; transform:translateX(-50%)!important; z-index:130; border:1px solid var(--border); background:var(--surface); border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:10px 12px; min-width:min(340px,92vw); grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .feedmenu[open] .feedmenu-panel{display:grid} .feed-chip{ padding:9px 12px; cursor:pointer; text-align:left; } .feed-chip.active{ background:var(--text); color:var(--bg); border-color:var(--text); } .feedmenu-top button, .feedmenu button{ transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .08s ease,box-shadow .08s ease; } .feedmenu-toggle:hover, .feed-chip:hover{ background:var(--text)!important; color:var(--surface)!important; border-color:var(--text)!important; cursor:pointer; } .feedmenu-top button:hover, .feedmenu button:hover{ background:var(--text); color:var(--surface); border-color:var(--text); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.18); } .feedmenu-top button:active, .feedmenu button:active{ transform:translateY(0); box-shadow:0 1px 3px rgba(0,0,0,.25) inset; } .feed-chip.active:hover{ background:var(--surface-2)!important; color:var(--text)!important; border-color:var(--text)!important; } .topAd{ width:100%; text-align:center; position:relative; margin:6px 0 10px; padding-top:8px; min-height:90px; } .ad-slot-desktop{min-width:728px;height:90px;margin:0 auto} .ad-slot-mobile{display:none;min-width:320px;max-width:468px;height:auto;max-height:60px;margin:0 auto} .page-message{ width:100%; margin:10px auto 6px; text-align:center; } .page-message-inner{ display:inline-block; max-width:980px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:14px; line-height:1.35; } .panel{min-height:260px;padding-bottom:24px} .panel-empty{ padding:20px; border:1px dashed var(--border); border-radius:14px; color:var(--muted); background:var(--surface-2); } .feedbar{ display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center; margin-bottom:10px; min-height:64px; } .feed-step{ min-height:44px; font-size:18px; cursor:pointer; } .feedbar-main{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center; min-height:74px; } .feedbar-title-row{ display:flex; justify-content:center; align-items:center; min-height:42px; margin:0 0 14px; padding:0; padding-top:10px; } .feedbar-title{ display:block; text-align:center; text-decoration:none; font-size:36px; font-weight:800; letter-spacing:1px; text-transform:uppercase; line-height:1.02; margin:0 auto; } .feedbar-title:hover{color: #888;} .feedbar .feedchips{display:none} #headline-grid{min-height:800px} .headlines-grid{display:grid;gap:22px} .headlines-grid.cols-1{grid-template-columns:1fr} .headlines-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .headlines-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .headline-card{ display:flex; gap:14px; padding:14px 14px 10px; align-items:flex-start; min-height:0; position:relative; z-index:1; overflow:visible; background:transparent; border:0; box-shadow:none; contain:layout style; } .headline-card:hover{z-index:120} .headline-image-link{ flex:0 0 auto; width:auto; position:relative; z-index:2; display:block; overflow:visible; float:left; margin:0 18px 10px 0; } .headline-content{ flex:1 1 auto; min-width:0; overflow:visible; } .headline-content::after{content:"";display:block;clear:both} .headline-image{ width:240px; height:auto; max-height:240px; aspect-ratio:16 / 9; object-fit:cover; display:block; background:var(--surface-2); border-radius:10px; transition:transform .18s ease,box-shadow .18s ease; transform-origin:left top; position:relative; z-index:40; } .headline-image.image-small{width:150px;max-height:150px} .headline-image.image-medium{width:240px;max-height:240px} .headline-image.image-large{width:300px;max-height:300px} .headline-image-link:hover .headline-image, .headline-image:hover{ transform:scale(2.4)!important; box-shadow:0 10px 26px rgba(0,0,0,.24)!important; position:relative; z-index:140!important; } .headline-title{ margin:0 0 6px; font-size:1.24rem; line-height:1.0; } .headline-title a{text-decoration:none} .headline-title a:hover{color: #458b74;} .headline-summary{ margin:8px 0 8px; color:var(--text); line-height:1.45; } .headline-meta-stack{margin-top:4px} .headline-meta{ display:flex; align-items:center; gap:0; flex-wrap:wrap; color:var(--muted); font-size:12px; margin:0; white-space:nowrap; } .headline-meta{ justify-content:flex-end; text-align:right; opacity:.85; } .headline-source, .headline-meta-line{font-weight:400} .headline-actions{ display:inline-flex; gap:4px; align-items:center; white-space:nowrap; position:relative; z-index:10; } .headline-actions .mini-icon{ border:0; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; margin:0; font-size:15px; line-height:20px; border-radius:0; box-shadow:none; cursor:pointer; } .headline-actions .mini-icon:hover{color:var(--text);background:transparent} .headline-actions .mini-icon:active{color:#458b74} .headline-bullet{ display:inline-block; width:20px; min-width:20px; margin-right:0; font-size:20px; line-height:1; color:var(--text); vertical-align:top; position:relative; top:1px; } .headlines-grid.headlines-only .headline-summary{ display:block; } .headlines-grid.headlines-only .headline-card{padding-bottom:12px} .headlines-grid.headlines-only .headline-title{margin-bottom:0} .headlines-grid.cols-1.headlines-only .headline-card:hover::after{ content:none !important; display:none !important; } .embed-wrap{ position:relative; width:100%; padding-top:170%; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; overflow:hidden; } .embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .dir-jump{ position:sticky; top:0; background:var(--bg); z-index:15; padding:24px 0 18px; border-bottom:1px solid var(--border); margin-bottom:14px; } .dir-jump-inner{display:flex;gap:8px;flex-wrap:wrap} .dir-jump a{ text-decoration:none; padding:6px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); font-size:14px; font-weight:500; cursor:pointer; } .dir-jump a:hover{background:var(--surface-2)} .dir-category{margin-bottom:22px;scroll-margin-top:60px} .dir-category h2{margin:0 0 12px;font-size:1.5rem} .dir-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .dir-sub{padding:12px} .dir-sub h3{margin:0 0 10px;font-size:1.1rem} .dir-links{list-style:none;padding:0;margin:0} .dir-links li{margin-bottom:8px} .dir-links a{text-decoration:none} .dir-links a:hover{color: #458b74;} /* ===== Directory font scaling ===== */ .dir-category-title{ font-size:calc(42px * var(--font-scale)); } .dir-sub-title{ font-size:calc(32px * var(--font-scale)); } .dir-links a{ font-size:calc(22px * var(--font-scale)); line-height:1.4; } .display-tools{ margin-top:14px; padding-top:14px; padding-bottom:36px!important; border-top:1px solid var(--border); } .display-tools-row{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:center; } .display-tools-row label{ display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:600; color:var(--muted); font-size:12px; text-align:center; } .display-tools select, .display-tools button{ padding:10px 12px; cursor:pointer; } #bg-color{ width:44px; height:36px; padding:2px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; } .backtotop-arrow{ font-size:34px; line-height:1; display:block; color:#000; } html[data-theme="dark"] .backtotop-arrow{ color:#fff; } .back-to-top-btn{ position:fixed; right:12px; bottom:10px; width:44px; height:44px; border:1px solid var(--border)!important; border-radius:10px!important; background:var(--surface)!important; padding:1px!important; line-height:0; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:900; /* below NEWS TV overlay, above page content */ opacity:.38; box-shadow:0 4px 12px rgba(0,0,0,.14); transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease; } .back-to-top-btn:hover, .back-to-top-btn:focus{ opacity:1; background:var(--surface-2)!important; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.22); } .footerAd{ position:relative; text-align:center; width:100%; height:300px; max-height:300px; margin:16px auto 32px auto!important; } .footerAd .adsbygoogle{max-width:1160px;margin:0 auto} .footer-note{ margin:0 auto 4px auto!important; text-align:center; color:var(--muted); font-size:14px; line-height:1.4; } .stamp{ display:block; width:100%; text-align:right; color:var(--muted); font-size:12px; margin-top:4px; margin-bottom:0; min-height:24px; } /* NEWS TV */ #openVideoViewerMid{background:var(--text);color:var(--surface)} #openVideoViewerMid:hover{background:#960019;color:#f0f0f0} .hs-news-tv-bookmark-btn{ cursor:pointer; font-size:11px; background:#fff; padding:2px 3px; color:#000; border:1px solid #333; border-radius:12px; font-weight:750; width:140px; height:25px; line-height:1.1; margin-top:6px; } .hs-news-tv-bookmark-btn:hover{background:#f5f5f5} .open-video-link{ display:inline-block; font-size:18px; font-weight:bold; color:#656565; text-decoration:none; cursor:pointer; margin-top:20px; } .open-video-link:hover{color:#417FBC} .open-video-link:active{color:#458b74} .video-overlay{ display:none; position:fixed; bottom:35px; left:3px; width:400px; max-width:100%; background:#333; border-radius:8px; border-style:solid; border-color:#191D1E; border-width:18px 9px 9px 9px; z-index:1000; cursor:default; overscroll-behavior:none; overflow:visible!important; } .video-overlay.video-large{width:800px;max-width:96vw} .video-overlay .video-modal{ position:relative!important; width:100%!important; padding-bottom:56.25%!important; overflow:visible!important; } .video-overlay .video-modal iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius:8px; background:#111; } .video-modal{cursor:default} .video-modal::before{ content:""; position:absolute; top:0; left:0; right:0; height:22px; cursor:move; z-index:5; } .video-overlay .close-btn, .video-overlay .resize-btn, .video-overlay .autonext-btn, .video-overlay .backup-btn{ position:absolute; top:-22px; font-size:16px; background:#191D1E; color:#888; border-radius:50%; width:24px; height:24px; line-height:24px; text-align:center; cursor:pointer; user-select:none; } .video-overlay .close-btn{right:-8px;font-weight:400} .video-overlay .resize-btn{right:24px;font-size:18px} .video-overlay .autonext-btn{right:58px;font-size:18px} .video-overlay .autonext-btn[data-on="1"]{color:#960019} .video-overlay .backup-btn{left:48px;font-size:18px} .video-overlay .drawer-btn{ position:absolute; top:-24px; left:-8px; font-size:26px; background:#191D1E; color:#888; border-radius:50%; width:48px; height:24px; line-height:26px; text-align:center; cursor:pointer; transition:transform .15s ease; } .drawer-btn.open{transform:rotate(180deg)} .video-placeholder{ display:none; position:absolute; inset:0; border-radius:8px; background:var(--surface); color:var(--text); z-index:2; box-sizing:border-box; padding:4px 12px 12px 8px; text-align:center; font-family:Roboto,Helvetica,sans-serif; overflow:hidden; } .video-placeholder .vp-title{ color:var(--text); font-size:16px; font-weight:700; margin:0 0 8px; letter-spacing:.33em; line-height:1.15; position:sticky; top:0; z-index:2; background:var(--surface); padding:0 2px 4px; } .video-placeholder .vp-text{ position:absolute; top:34px; left:8px; right:8px; bottom:8px; overflow-y:auto; overflow-x:hidden; font-size:14px; line-height:1.25em; padding:0 18px 32px 2px; box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#6d7277 rgba(0,0,0,.12); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .video-placeholder .vp-text b{color:var(--text)} .video-placeholder .vp-text::-webkit-scrollbar, #savedVideoList::-webkit-scrollbar{width:8px} .video-placeholder .vp-text::-webkit-scrollbar-track, #savedVideoList::-webkit-scrollbar-track{background:rgba(0,0,0,.12)} .video-placeholder .vp-text::-webkit-scrollbar-thumb, #savedVideoList::-webkit-scrollbar-thumb{background:#6d7277;border-radius:8px} .video-drawer{ position:absolute!important; bottom:4px!important; left:50%!important; transform:translateX(-50%)!important; width:320px!important; height:36px!important; background:#191D1E; padding:2px 8px!important; border-radius:0 0 8px 8px!important; transition:bottom .3s ease; align-items:center; justify-content:space-between; display:none; z-index:1002; } .video-drawer.open{ bottom:-44px!important; display:flex!important; } .video-drawer input{ flex:1; margin-right:8px; margin-left:2px; padding:2px; border-radius:4px; background:var(--surface); color:var(--text); border:0; font-size:14px; width:220px; } #videoInput[type="search"]{ appearance:textfield; width:auto; border:none; background:var(--surface); color:var(--text); } #videoInput:focus{outline:0} .video-drawer button{ background:#393D3E; color:#fff; border:none; font-size:18px; padding:2px 8px; border-radius:4px; cursor:pointer; } .video-drawer button:hover{background:#960019} #savedVideoList{ display:none; position:absolute!important; left:50%!important; transform:translateX(-50%)!important; bottom:-4px!important; width:320px!important; max-height:196px!important; overflow:auto; background:rgba(13,15,16,.78)!important; backdrop-filter:blur(1px); border:1px solid #3a3d3f; border-bottom:0; box-sizing:border-box; z-index:7!important; text-align:left; box-shadow:0 2px 8px rgba(0,0,0,.22); scrollbar-width:thin; scrollbar-color:#6d7277 rgba(0,0,0,.12); overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; } #savedVideoList .sv-row{ display:block; position:relative; padding:4px 40px 4px 10px; border-bottom:1px solid #2b2f31; background:transparent; color:#ddd; font-size:13px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; text-align:left; } #savedVideoList .sv-row:hover{background:#23272a} #savedVideoList .sv-row[draggable="true"]{ cursor:pointer; transition:transform .08s ease,box-shadow .08s ease; } #savedVideoList .sv-row.sv-dragging{ cursor:grabbing; opacity:.75; transform:scale(1.03); box-shadow:none; z-index:2; } #savedVideoList .sv-row.sv-drop-target, #savedVideoList .sv-row.sv-active{background:#34393d} #savedVideoList .sv-remove{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:22px; height:22px; line-height:22px; text-align:center; color:#797d7e; font-size:12px; font-weight:700; cursor:pointer; border-radius:50%; } #savedVideoList .sv-remove:hover{ color:#fff; background:rgba(255,255,255,.08); } #backToStartBtn{ display:none; cursor:pointer; padding-right:12px; padding-left:6px; font-size:22px; font-weight:600; line-height:1; color:#aaa; user-select:none; } #backToStartBtn:hover{color:#fff} #backToStartBtn.active{ opacity:1; pointer-events:auto; } #saveVideoBtn{ display:none; cursor:pointer; padding-left:4px; padding-right:2px; margin-left:6px; font-size:16px; line-height:1; color:#aaa; user-select:none; } #saveVideoBtn:hover{color:#458b74} .video-buttons{ display:flex; gap:12px; justify-content:center; } .video-buttons a{ display:inline-block; padding:4px 8px; text-decoration:none; background:#191D1E; color:#fff; border-radius:6px; font-size:16px; font-weight:500; transition:background .2s ease; border:solid #e0e0e0 1px; } .video-buttons a:hover{ color:#fff; background:#417FBC; } .hs-newstv-panel{max-width:760px;margin:18px auto 0;text-align:center} .hs-newstv-panel .hs-news-tv-bookmark-btn{ width:auto; min-width:180px; height:auto; padding:8px 14px; font-size:16px; line-height:1.2; border-radius:16px; } .hs-newstv-panel .hs-tv-note{ max-width:720px; margin:20px auto 8px; text-align:center; color:var(--muted); font-size:13px; line-height:1.45; padding:0 14px; } .hs-newstv-panel .hs-tv-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px; margin-bottom:14px; } .hs-newstv-panel .hs-tv-check{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; } .hs-newstv-panel .hs-tv-hidden{display:none} @media (max-width:1100px){ .headlines-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} .dir-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1020px){ .topSearch{max-width:360px} } @media (max-width:980px){ .topbar-main{grid-template-columns:auto 1fr auto} .topSearch{max-width:420px} } @media (max-width:940px){ .topbar-main{ grid-template-columns:1fr auto; grid-template-areas:"brand tools" "search search"; row-gap:10px; } .brand-wrap{grid-area:brand} .header-tools{grid-area:tools} .topSearch{grid-area:search;max-width:450px;justify-self:center} .top-feed-menu-slot{padding-right:88px!important} .ad-slot-desktop{display:none!important} .ad-slot-mobile{display:block} } @media (max-width:900px){ .brand-sub{font-size:15px} .feedbar-title{font-size:30px} .headline-image.image-small{width:120px;max-height:120px} .headline-image.image-medium{width:220px;max-height:220px} .headline-image.image-large{width:275px;max-height:275px} } @media (max-width:760px){ .topbar-main{ grid-template-columns:1fr auto; grid-template-areas:"brand tools" "search search"; row-gap:10px; } .brand-wrap{grid-area:brand} .header-tools{grid-area:tools} .topSearch{grid-area:search;max-width:none;width:100%;justify-self:stretch} .brand .logo-light,.brand .logo-dark{height:34px} .brand-sub{font-size:15px} } @media (max-width:700px){ .modebar-row{ display:grid!important; grid-template-columns:repeat(3,max-content) 1fr!important; gap:8px!important; align-items:center!important; } .top-feed-menu-slot{ grid-column:1 / -1!important; justify-content:center!important; min-width:0!important; padding-right:0!important; } .top-feed-menu-slot .feedmenu, .feedmenu-top{ margin-left:auto!important; margin-right:auto!important; } .feedmenu-panel{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:min(92vw,340px)!important; min-width:0!important; } .topSearch{max-width:none;width:100%} .display-tools-row{gap:16px} .back-to-top-btn{margin-left:0} .feedbar{ grid-template-columns:42px 1fr 42px; } .feedbar-title{justify-self:start;font-size:26px;text-align:left} .headline-card{display:block} .headline-image-link{float:none;margin:0 0 10px 0} .headline-meta{white-space:normal} .headline-actions{margin-top:2px} .headline-image.image-small{width:120px;max-height:120px} .headline-image.image-medium{width:220px;max-height:220px} .headline-image.image-large{width:300px;max-height:300px} } @media (max-width:480px){ .topSearch{position:relative;width:100%} .topAd{min-height:60px;max-height:60px} .headline-image-link:hover .headline-image, .headline-image:hover{transform:none!important} .dir-jump{position:static} .back-to-top-btn{ bottom:4px; } .video-overlay{ position:fixed!important; width:98vw!important; max-width:98vw!important; left:50%!important; right:auto!important; top:auto!important; bottom:max(40px, env(safe-area-inset-bottom))!important; transform:translateX(-50%)!important; border-width:12px 2px 2px 2px; border-radius:6px; touch-action:none; } .video-overlay .video-modal{ width:100%; padding-bottom:56.25%; touch-action:none; } .video-drawer{ left:8px!important; right:8px!important; width:auto!important; box-sizing:border-box!important; transform:none!important; } .video-drawer.open{bottom:-34px!important} .video-drawer input{font-size:16px} .video-overlay .close-btn{right:0} .video-overlay .resize-btn{right:36px} .video-overlay .drawer-btn{left:0} .video-overlay .backup-btn{left:64px} .video-overlay .autonext-btn{right:72px} #savedVideoList{ left:8px!important; right:8px!important; width:auto!important; box-sizing:border-box!important; transform:none!important; max-height:172px!important; bottom:-4px!important; } } @media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait){ .video-overlay{ top:auto!important; left:50%!important; right:auto!important; bottom:35px!important; transform:translateX(-50%); margin:0; } } /* ===== header icon alignment / spacing refinements ===== */ .topbar-main{ grid-template-columns:auto minmax(260px,1fr) auto !important; } .topSearch{ max-width:440px !important; margin-right:8px; } .header-tools{ display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:124px; } .quicklinks-toggle, .voice-search-btn{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; } .ql-icon{ width:28px !important; height:28px !important; min-width:28px; min-height:28px; margin:0 !important; } .voice-search-btn.listening, #voice-search-btn[aria-busy="true"]{ display:inline-flex; align-items:center; justify-content:center; } /* ===== mobile image/text spacing and stacking ===== */ @media (max-width:700px){ .headline-card{ display:block; padding-right:12px; } .headline-content{ padding-right:6px; } .headline-image-link{ float:none !important; display:block; width:100%; max-width:100%; margin:0 0 12px 0; padding-right:12px; } .headline-image{ display:block; max-width:100%; } .headline-image.image-large{ width:100% !important; max-height:none !important; } .headline-image.image-medium{ width:min(220px, 100%); } .headline-image.image-small{ width:min(120px, 100%); } } /* ===== tighter small-screen header fit ===== */ @media (max-width:760px){ .topbar-main{ grid-template-columns:1fr auto; grid-template-areas:"brand tools" "search search"; row-gap:10px; } .topSearch{ max-width:none !important; width:100%; } .header-tools{ gap:8px; min-width:104px; } .quicklinks-toggle, .voice-search-btn{ width:42px; height:42px; } .ql-icon{ width:24px !important; height:24px !important; min-width:24px; min-height:24px; } } @media (max-width:480px){ .brand-sub{ display:none; } .topbar-main{ grid-template-columns:minmax(0,1fr) auto; gap:10px; } .topSearch{ width:100%; } .header-tools{ gap:6px; min-width:94px; } .quicklinks-toggle, .voice-search-btn{ width:38px; height:38px; } .ql-icon{ width:22px !important; height:22px !important; min-width:22px; min-height:22px; } .headline-card{ padding-right:10px; } .headline-content{ padding-right:8px; } } /* ===== preserve desktop icon spacing, fix mobile header/image behavior ===== */ /* desktop / tablet spacing for search + top-right icons */ .topbar-main{ grid-template-columns:auto minmax(260px,1fr) auto !important; } .topSearch{ max-width:440px !important; } .header-tools{ display:flex; align-items:center; justify-content:flex-end; gap:14px !important; min-width:124px; } .quicklinks-toggle, .voice-search-btn{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1; } .ql-icon{ width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; margin:0 !important; } /* keep ad wrappers from creating horizontal movement */ .topAd, .footerAd{ overflow-x:hidden; } .ad-slot-desktop, .ad-slot-mobile{ max-width:100%; } /* mobile / narrow header corrections */ @media (max-width:760px){ .topbar-main{ grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"brand tools" "search search"; row-gap:10px; gap:10px; } .brand-wrap{ grid-area:brand; min-width:0 !important; } .header-tools{ grid-area:tools; min-width:0 !important; width:auto !important; gap:8px !important; justify-self:end !important; justify-content:flex-end !important; } .topSearch{ grid-area:search; max-width:none !important; width:100%; min-width:0 !important; justify-self:stretch !important; } .quicklinks-toggle, .voice-search-btn{ width:42px; height:42px; } .ql-icon{ width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; } } /* mobile image behavior: 1 col = full width image 2 col / 3 col = sized image with text allowed beside/below as space allows */ @media (max-width:700px){ .modebar-row{ display:grid!important; grid-template-columns:repeat(3,max-content) 1fr!important; gap:8px!important; align-items:center!important; } .top-feed-menu-slot{ grid-column:1 / -1!important; justify-content:center!important; min-width:0!important; padding-right:0!important; } .top-feed-menu-slot .feedmenu, .feedmenu-top{ margin-left:auto!important; margin-right:auto!important; } .feedmenu-panel{ left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:min(92vw,340px)!important; min-width:0!important; } /* correct single-column stack on mobile */ .headlines-grid.cols-1 .headline-card{ display:block !important; } .headlines-grid.cols-1 .headline-image-link{ float:none !important; display:block !important; width:100% !important; max-width:100% !important; margin:0 0 0 0 !important; } .headlines-grid.cols-1 .headline-image.image-medium, .headlines-grid.cols-1 .headline-image.image-large{ width:100% !important; max-height:none !important; } /* 2 and 3 columns behave the same */ .headlines-grid.cols-2 .headline-card, .headlines-grid.cols-3 .headline-card{ display:block !important; } .headlines-grid.cols-2 .headline-image-link, .headlines-grid.cols-3 .headline-image-link{ float:none !important; display:block !important; width:auto !important; max-width:100% !important; margin:0 0 10px 0 !important; } .headlines-grid.cols-2 .headline-image.image-small, .headlines-grid.cols-3 .headline-image.image-small{ width:120px !important; max-height:120px !important; } .headlines-grid.cols-2 .headline-image.image-medium, .headlines-grid.cols-3 .headline-image.image-medium{ width:220px !important; max-height:220px !important; } .headlines-grid.cols-2 .headline-image.image-large, .headlines-grid.cols-3 .headline-image.image-large{ width:220px !important; max-height:220px !important; } .headline-content{ padding-right:0 !important; } .headline-card{ padding-right:0 !important; } .headline-meta{ white-space:normal; } .headline-actions{ margin-top:2px; } } @media (max-width:480px){ .brand-sub{ display:none; } .header-tools{ gap:6px !important; min-width:0 !important; width:auto !important; } .quicklinks-toggle, .voice-search-btn{ width:38px; height:38px; } .ql-icon{ width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; } /* keep ads from pushing viewport width */ .topAd{ min-height:60px; max-height:60px; overflow:hidden; } .ad-slot-mobile{ width:100%; min-width:0 !important; } /* on very small screens, make image full width regardless of selected size */ .headline-image.image-medium, .headline-image.image-large{ width:100% !important; max-height:none !important; } } /* ===== stronger story card polish ===== */ .headline-card{ border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 2px 6px rgba(0,0,0,.08); transition:all .18s ease; } .headline-card:hover{ border-color:var(--text); background:var(--surface); box-shadow:0 10px 28px rgba(0,0,0,.18); transform:translateY(-3px) scale(1.01); filter:brightness(1.02); } .headline-card:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.18); } .headline-title a{ transition:color .15s ease; } .headline-card:hover .headline-title a{ color:#000; font-weight:700; } html[data-theme="dark"] .headline-card:hover .headline-title a{ color:#fff; } /* image slightly lifts with card */ .headline-card:hover .headline-image{ transform:scale(1.05); box-shadow:0 6px 18px rgba(0,0,0,.22); } /* dark mode tuning */ html[data-theme="dark"] .headline-card{ box-shadow:0 2px 8px rgba(0,0,0,.35); } html[data-theme="dark"] .headline-card:hover{ box-shadow:0 12px 34px rgba(0,0,0,.55); } .hs-reset-hover .headline-card:hover{ transform:none !important; box-shadow:0 2px 6px rgba(0,0,0,.08) !important; background:var(--surface) !important; border-color:var(--border) !important; } html[data-theme="dark"] .hs-reset-hover .headline-card:hover{ box-shadow:0 2px 8px rgba(0,0,0,.35) !important; } .hs-reset-hover .headline-card:hover .headline-image, .hs-reset-hover .headline-image-link:hover .headline-image, .hs-reset-hover .headline-image:hover{ transform:none !important; box-shadow:none !important; } .hs-reset-hover .headline-card:hover .headline-title a{ color:inherit !important; font-weight:inherit !important; } .hs-reset-hover .headline-card:focus-within{ border-color:var(--border) !important; box-shadow:0 2px 6px rgba(0,0,0,.08) !important; } html[data-theme="dark"] .hs-reset-hover .headline-card:focus-within{ box-shadow:0 2px 8px rgba(0,0,0,.35) !important; } .hs-reset-hover .headline-card:focus-within .headline-title a{ color:inherit !important; font-weight:inherit !important; } /* ===== final mobile overrides: disable hover effects, center images ===== */ @media (max-width:700px){ .headline-card, .headline-card:hover, .headline-card:focus-within{ transform:none !important; box-shadow:0 2px 6px rgba(0,0,0,.08) !important; } .headline-card:hover{ border-color:var(--border) !important; background:var(--surface) !important; } html[data-theme="dark"] .headline-card, html[data-theme="dark"] .headline-card:hover, html[data-theme="dark"] .headline-card:focus-within{ box-shadow:0 2px 8px rgba(0,0,0,.35) !important; } .headline-card:hover .headline-title a, .headline-card:focus-within .headline-title a{ color:inherit !important; font-weight:inherit !important; } .headline-image-link:hover .headline-image, .headline-image:hover, .headline-card:hover .headline-image{ transform:none !important; box-shadow:none !important; } .headlines-grid.cols-1.headlines-only .headline-card:hover::after{ content:none !important; display:none !important; } .headlines-grid.cols-1 .headline-image-link, .headlines-grid.cols-2 .headline-image-link, .headlines-grid.cols-3 .headline-image-link{ float:none !important; display:flex !important; justify-content:center !important; align-items:flex-start !important; width:100% !important; max-width:100% !important; margin:0 auto 12px auto !important; text-align:center !important; } .headlines-grid.cols-1 .headline-image, .headlines-grid.cols-2 .headline-image, .headlines-grid.cols-3 .headline-image{ display:block !important; margin:0 auto !important; max-width:100% !important; transform-origin:center top !important; } .headlines-grid.cols-1 .headline-image.image-small, .headlines-grid.cols-1 .headline-image.image-medium, .headlines-grid.cols-1 .headline-image.image-large{ width:100% !important; max-height:none !important; } .headlines-grid.cols-2 .headline-card, .headlines-grid.cols-3 .headline-card{ display:block !important; overflow:hidden !important; padding-right:0 !important; } .headlines-grid.cols-2 .headline-image.image-small, .headlines-grid.cols-3 .headline-image.image-small{ width:min(100%, 110px) !important; max-height:110px !important; } .headlines-grid.cols-2 .headline-image.image-medium, .headlines-grid.cols-3 .headline-image.image-medium{ width:min(100%, 165px) !important; max-height:165px !important; } .headlines-grid.cols-2 .headline-image.image-large, .headlines-grid.cols-3 .headline-image.image-large{ width:min(100%, 210px) !important; max-height:210px !important; } .headline-content{ padding-right:0 !important; } } @media (max-width:560px){ .headlines-grid.cols-2 .headline-image.image-small, .headlines-grid.cols-3 .headline-image.image-small{ width:min(100%, 96px) !important; max-height:96px !important; } .headlines-grid.cols-2 .headline-image.image-medium, .headlines-grid.cols-3 .headline-image.image-medium{ width:min(100%, 138px) !important; max-height:138px !important; } .headlines-grid.cols-2 .headline-image.image-large, .headlines-grid.cols-3 .headline-image.image-large{ width:min(100%, 172px) !important; max-height:172px !important; } } @media (max-width:480px){ .feedbar-title:hover, .dir-links a:hover, .open-video-link:hover, .hs-news-tv-bookmark-btn:hover, .quicklinks-toggle:hover, .voice-search-btn:hover, .back-to-top-btn:hover, .dir-jump a:hover, .feedmenu-toggle:hover, .feed-chip:hover, .feedmenu-top button:hover, .feedmenu button:hover{ color:inherit !important; background:inherit !important; box-shadow:none !important; transform:none !important; border-color:inherit !important; } .feedbar-title{font-size:22px} } /* ===== mobile overflow correction ===== */ @media (max-width:760px){ html, body{ overflow-x:hidden; } .shell{ padding-left:10px; padding-right:10px; } .topbar-main, .modebar, .modebar-row, .topSearch{ max-width:100% !important; min-width:0 !important; } .topSearch .gsc-input-box{ margin-left:0 !important; width:100% !important; max-width:100% !important; } .topSearch .gsc-control-cse, .topSearch .gsc-control-wrapper-cse, .topSearch .gsc-search-box{ max-width:100% !important; overflow:hidden !important; } } @media (max-width:700px){ .modebar-row{ grid-template-columns:repeat(4, max-content) !important; justify-content:start !important; } } @media (max-width:480px){ .modebar-row{ gap:6px !important; } .modebar button{ padding:6px 6px !important; } } /* ===== header / horizontal overflow fix ===== */ /* Keep page containers from exceeding the viewport */ html, body{ max-width:100%; overflow-x:hidden; } .shell, .topbar, .topbar-main, .modebar, .modebar-row{ max-width:100%; } /* Header spacing should come from grid gaps, not search margins */ .topbar-main{ grid-template-columns:minmax(0,auto) minmax(220px,1fr) auto !important; column-gap:22px !important; width:100%; max-width:100%; } .brand-wrap{ min-width:0 !important; max-width:100%; } .topSearch{ margin-left:0 !important; margin-right:0 !important; min-width:0 !important; width:100% !important; max-width:440px !important; justify-self:end !important; } .header-tools{ flex:0 0 auto !important; min-width:0 !important; width:auto !important; max-width:max-content !important; } /* Google CSE can inject table widths; force it to obey the grid cell */ .topSearch .gsc-control-cse, .topSearch .gsc-control-cse-en, .topSearch .gsc-control-wrapper-cse, .topSearch .gsc-search-box, .topSearch form, .topSearch table, .topSearch tbody, .topSearch tr, .topSearch td{ max-width:100% !important; } .topSearch table{ width:100% !important; table-layout:fixed !important; } .topSearch .gsc-input-box{ margin-left:0 !important; margin-right:0 !important; max-width:100% !important; watermark: } /* The feed menu padding can create overflow in the no-wrap modebar */ @media (max-width:1280px){ .top-feed-menu-slot{ padding-right:88px !important; } } /* Medium widths: let search breathe under the logo/tools row if needed */ @media (max-width:940px){ .modebar-row{ flex-wrap:wrap !important; } .topbar-main{ grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"brand tools" "search search"; row-gap:10px; column-gap:12px !important; } .brand-wrap{ grid-area:brand; } .header-tools{ grid-area:tools; justify-self:end !important; } .topSearch{ grid-area:search; justify-self:stretch !important; max-width:100% !important; } } /* Small screens: keep the icon area natural-width only */ @media (max-width:760px){ .topbar-main{ grid-template-columns:minmax(0,1fr) auto !important; gap:10px !important; } .top-feed-menu-slot{ flex:1 1 100% !important; width:100% !important; justify-content:center !important; padding-right:0 !important; } .top-feed-menu-slot .feedmenu, .feedmenu-top{ margin-left:auto !important; margin-right:auto !important; } .header-tools{ gap:8px !important; min-width:0 !important; max-width:max-content !important; } .topSearch{ max-width:100% !important; } } @media (max-width:480px){ .shell{ padding-left:10px; padding-right:10px; } .header-tools{ gap:6px !important; } } /* ===== optional 4-column headline layout ===== */ .headlines-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .headlines-grid.cols-4 .headline-image.image-small{ width:min(100%,150px); max-height:150px; } .headlines-grid.cols-4 .headline-image.image-medium{ width:min(100%,220px); max-height:190px; } .headlines-grid.cols-4 .headline-image.image-large{ width:min(100%,280px); max-height:220px; } @media (max-width:790px){ .headlines-grid.cols-4{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:560px){ .headlines-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px){ .headlines-grid.cols-4 .headline-card{ display:block !important; overflow:hidden !important; padding-right:0 !important; } .headlines-grid.cols-4 .headline-image-link{ float:none !important; display:flex !important; justify-content:center !important; align-items:flex-start !important; width:100% !important; max-width:100% !important; margin:0 auto 12px auto !important; text-align:center !important; } .headlines-grid.cols-4 .headline-image{ display:block !important; margin:0 auto !important; max-width:100% !important; transform-origin:center top !important; } .headlines-grid.cols-4 .headline-image.image-small{ width:min(100%,96px) !important; max-height:96px !important; } .headlines-grid.cols-4 .headline-image.image-medium{ width:min(100%,138px) !important; max-height:138px !important; } .headlines-grid.cols-4 .headline-image.image-large{ width:min(100%,172px) !important; max-height:172px !important; } } @media (max-width:420px){ .headlines-grid.cols-4{ grid-template-columns:1fr; } .headlines-grid.cols-4 .headline-image.image-medium, .headlines-grid.cols-4 .headline-image.image-large{ width:100% !important; max-height:none !important; } } /* ===== 4-column image/text fix ===== */ /* In 4-wide mode, stack the image above the headline text. This avoids the flex image column reserving space and squeezing text. */ .headlines-grid.cols-4 .headline-card{ display:block; overflow:visible; } .headlines-grid.cols-4 .headline-image-link{ float:none !important; display:flex !important; justify-content:center !important; align-items:flex-start !important; width:100% !important; max-width:100% !important; margin:0 auto 12px auto !important; text-align:center !important; } .headlines-grid.cols-4 .headline-content{ width:100%; min-width:0; padding-right:0 !important; } .headlines-grid.cols-4 .headline-image{ display:block !important; margin:0 auto !important; max-width:100% !important; transform-origin:center top !important; } .shell{ max-width:1680px; margin:0 auto; } /* ===== tuned 4☰ adaptive layout ===== */ /* Keep the 1680px cap; make 4☰ behave like a smart stacked-card layout. */ .shell{ max-width:1680px; margin:0 auto; } /* True 4-wide only when there is enough room for stacked cards and 2x hover image expansion. */ .headlines-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } /* Drop from 4 to 3 sooner for readability and hover breathing room. -changed from 1480- */ @media (max-width:790px){ .headlines-grid.cols-4{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } /* Then step to 2-wide before cards get cramped. */ @media (max-width:560px){ .headlines-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* Mobile remains 2-wide until narrow phones, then single column. */ @media (max-width:480px){ .headlines-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:420px){ .headlines-grid.cols-4{ grid-template-columns:1fr !important; } } /* ===== 4☰ stacked-card hover tuning: card hover only ===== */ /* Keep the card lift, but do not give the 4w image any extra vertical jump. Direct 2x image zoom is handled by click JS, not hover. */ @media (min-width:701px){ .headlines-grid.cols-4 .headline-card{ overflow:visible !important; transform-origin:center top; } .headlines-grid.cols-4 .headline-card:hover{ transform:translateY(-4px) scale(1.008) !important; z-index:160 !important; } .headlines-grid.cols-4 .headline-card:hover .headline-content{ transform:translateY(3px) !important; transition:transform .18s ease; } .headlines-grid.cols-4 .headline-card:hover .headline-image{ transform:scale(1.05) !important; box-shadow:0 6px 18px rgba(0,0,0,.22); } } /* ===== footer centering fix ===== */ /* The footer uses a blockquote, which has browser default side margins. Neutralize those margins so Privacy / Contact and copyright center correctly. */ .footer-note blockquote{ width:auto !important; max-width:100% !important; margin:0 auto !important; padding:0 10px !important; text-align:center !important; box-sizing:border-box; } /* ===== direct image hover disabled for click-to-zoom ===== */ /* 2x image zoom is now controlled by app.js click toggle. Keep pointer cue only; no hover transform here. */ @media (min-width:701px){ .headline-image-link:hover .headline-image, .headline-image:hover, .headlines-grid.cols-4 .headline-image-link:hover .headline-image, .headlines-grid.cols-4 .headline-image:hover{ transform:scale(1.05) !important; box-shadow:0 6px 18px rgba(0,0,0,.22) !important; cursor:zoom-in; } .headline-image.hs-image-zoomed{ transform:scale(2.4) !important; box-shadow:0 10px 26px rgba(0,0,0,.24)!important; position:relative !important; z-index:240 !important; cursor:zoom-out; } .headlines-grid.cols-4 .headline-image.hs-image-zoomed{ transform-origin:center bottom !important; box-shadow:none !important; } } .back-to-top-btn{ opacity:.38; transition:opacity .3s ease, transform .15s ease, box-shadow .15s ease; } /* active/visible state */ .back-to-top-btn.is-visible{ opacity:1; } /* ===== X Posts top-slot refresh button ===== */ .xposts-refresh-top-btn{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:var(--chip); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 16px; font-size:14px; font-weight:800; text-transform:uppercase; } .xposts-refresh-top-btn:hover{ background:var(--text)!important; color:var(--surface)!important; border-color:var(--text)!important; transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.18); } .xposts-refresh-top-btn:disabled{ opacity:.65; cursor:default; transform:none!important; box-shadow:none!important; } .xposts-wall-wrap{ padding:10px; } @media (max-width:480px){ .xposts-refresh-top-btn:hover{ color:inherit !important; background:inherit !important; box-shadow:none !important; transform:none !important; border-color:inherit !important; } } /* ===== bottom HotSheet branding before display settings ===== */ .bottom-brand-logo{ display:flex; justify-content:center; align-items:center; margin:50px auto 18px auto; padding:0 10px; text-align:center; } .bottom-logo{ display:block; width:auto; height:18px; max-width:200px; } .bottom-logo-light{ display:block; } .bottom-logo-dark{ display:none; } html[data-theme="dark"] .bottom-logo-light{ display:none; } html[data-theme="dark"] .bottom-logo-dark{ display:block; } /* give the logo breathing room before the Display Settings horizontal rule */ .display-tools{ margin-top:0 !important; padding-top:22px !important; } @media (max-width:480px){ .bottom-brand-logo{ margin-top:42px; margin-bottom:20px; } .bottom-logo{ height:13px; } } /* ===== headlines-only keep source credit line ===== */ .headlines-grid.headlines-only .headline-meta-stack{ display:block; margin-top:0px; } .headlines-grid.headlines-only .headline-title{ margin-bottom:2px; } /* ===== click image zoom must override hover/card transforms ===== */ @media (min-width:701px){ .headline-card:hover .headline-image.hs-image-zoomed, .headline-image-link:hover .headline-image.hs-image-zoomed, .headline-image.hs-image-zoomed{ transform:scale(2.4) !important; box-shadow:0 10px 26px rgba(0,0,0,.24)!important; position:relative !important; z-index:260 !important; cursor:zoom-out !important; } .headlines-grid.cols-4 .headline-card:hover .headline-image.hs-image-zoomed, .headlines-grid.cols-4 .headline-image-link:hover .headline-image.hs-image-zoomed, .headlines-grid.cols-4 .headline-image.hs-image-zoomed{ transform-origin:center bottom !important; transform:scale(2.4) !important; box-shadow:none !important; position:relative !important; z-index:280 !important; cursor:zoom-out !important; } } /* ===== headlines-only hover summary reveal ===== */ /* Summary is rendered as real text, hidden until card hover/focus. */ .headlines-grid.headlines-only .headline-summary-hover{ max-height:0; opacity:0; overflow:hidden; margin:0; padding:0; line-height:1.42; color:var(--text); transform:translateY(-4px); transition:max-height .18s ease .03s, opacity .14s ease .03s, margin .14s ease .03s, transform .14s ease .03s; } .headlines-grid.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.headlines-only .headline-card:focus-within .headline-summary-hover{ max-height:220px; opacity:1; margin:8px 0 6px; transform:translateY(0); } /* Keep credits below the revealed description, still unobtrusive/right aligned. */ .headlines-grid.headlines-only .headline-card:hover .headline-meta-stack, .headlines-grid.headlines-only .headline-card:focus-within .headline-meta-stack{ margin-top:4px; } /* ===== 3w/4w hover summary overlay: anchor to actual card bottom ===== */ /* In 3-wide and 4-wide headlines-only modes, attach the summary panel to the real card bottom so cards with shorter titles line up cleanly and the grid row does not expand. */ @media (min-width:701px){ .headlines-grid.cols-3.headlines-only .headline-card, .headlines-grid.cols-4.headlines-only .headline-card{ overflow:visible !important; position:relative; } .headlines-grid.cols-3.headlines-only .headline-content, .headlines-grid.cols-4.headlines-only .headline-content{ position:static !important; overflow:visible !important; } .headlines-grid.cols-3.headlines-only .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-summary-hover{ position:absolute; left:14px; right:14px; top:calc(100% - 1px); /* start just below the card bottom border; prevents side-border fragments */ z-index:230; max-height:none; opacity:0; pointer-events:none; margin:0; padding:10px 12px; background:var(--surface); color:var(--text); border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); border-top:none; border-radius:0 0 12px 12px; box-shadow:0 10px 24px rgba(0,0,0,.18); transform:none; transition:opacity .12s ease .02s; } .headlines-grid.cols-3.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-3.headlines-only .headline-card:focus-within .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:focus-within .headline-summary-hover{ opacity:1; transform:none; margin:0; } .headlines-grid.cols-3.headlines-only .headline-card:hover, .headlines-grid.cols-4.headlines-only .headline-card:hover{ z-index:260 !important; } } /* ===== 4w dropdown card-bottom anchor correction ===== */ /* 4w stacks image above content. The existing 4w hover tuning moves .headline-content down, which makes the dropdown appear to anchor to the credits/content area instead of the card bottom. In headlines-only 4w, keep the content still and anchor the dropdown to the article card. */ @media (min-width:701px){ .headlines-grid.cols-4.headlines-only .headline-card{ position:relative !important; overflow:visible !important; } .headlines-grid.cols-4.headlines-only .headline-card:hover .headline-content, .headlines-grid.cols-4.headlines-only .headline-card:focus-within .headline-content{ transform:none !important; } .headlines-grid.cols-4.headlines-only .headline-summary-hover{ position:absolute !important; left:14px !important; right:14px !important; top:calc(100% - 1px) !important; bottom:auto !important; margin:0 !important; z-index:260 !important; } .headlines-grid.cols-4.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:focus-within .headline-summary-hover{ transform:none !important; margin:0 !important; } } /* ===== dropdown border blend with active card ===== */ /* Match the dropdown border to the hovered card border and add a subtle seam blend so the hidden description feels like one expanding card in light and dark mode. */ @media (min-width:701px){ .headlines-grid.cols-3.headlines-only .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-summary-hover{ border-left:1px solid var(--text) !important; border-right:1px solid var(--text) !important; border-bottom:1px solid var(--text) !important; border-top:none !important; box-shadow: 0 -1px 0 var(--surface), 0 1px 0 rgba(0,0,0,.10), 0 10px 24px rgba(0,0,0,.18) !important; } html[data-theme="dark"] .headlines-grid.cols-3.headlines-only .headline-summary-hover, html[data-theme="dark"] .headlines-grid.cols-4.headlines-only .headline-summary-hover{ border-left-color:var(--text) !important; border-right-color:var(--text) !important; border-bottom-color:var(--text) !important; box-shadow: 0 -1px 0 var(--surface), 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.45) !important; } } /* ===== premium dropdown slide reveal ===== */ /* Keep the description dropdown as an overlay, but restore transform animation after later rules that may flatten transform to none. No bounce; just smooth slide/fade. */ @media (min-width:360px){ .headlines-grid.cols-3.headlines-only .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-summary-hover{ opacity:0; transform:translateY(-7px) !important; transition: opacity .20s ease-out .08s, transform .30s cubic-bezier(.16,1,.3,1) .08s !important; will-change:opacity, transform; } .headlines-grid.cols-3.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-3.headlines-only .headline-card:focus-within .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:focus-within .headline-summary-hover{ opacity:1 !important; transform:translateY(0) !important; margin:0 !important; } } /* ===== fixed top navigation wrapper with targeted content offset ===== */ /* Header + panel/feed controls stay locked together while scrolling. Uses targeted offsets instead of a large body padding reserve. */ :root{ --hs-fixed-nav-h:126px; } .hs-sticky-nav-wrap{ position:fixed; top:0; left:0; right:0; z-index:780; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.08); } /* Keep fixed header content aligned with the page width. */ .hs-sticky-nav-wrap .topbar, .hs-sticky-nav-wrap .modebar{ max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; background:var(--bg); } /* Cleaner fixed-header formatting. */ .hs-sticky-nav-wrap .topbar{ padding-top:4px; padding-bottom:6px; border-bottom:1px solid var(--border); } .hs-sticky-nav-wrap .modebar{ margin-top:0; margin-bottom:0; padding-top:6px; padding-bottom:8px; border-bottom:0; box-shadow:none; } .hs-sticky-nav-wrap .modebar-row{ margin:0; } /* Offset only the first page content below the fixed nav. */ #topAd{ margin-top:var(--hs-fixed-nav-h) !important; padding-top:6px !important; } #page-message{ scroll-margin-top:calc(var(--hs-fixed-nav-h) + 12px); } #main-panel, #newstv-panel, #unfiltered-panel{ scroll-margin-top:calc(var(--hs-fixed-nav-h) + 14px); } /* Dropdowns need to sit above cards and ads. */ .quicklinks-panel{ z-index:920; } .feedmenu-panel{ z-index:910; } /* NEWS TV remains above site navigation. */ .video-overlay{ z-index:1000; } /* Anchor jumps should land below the fixed nav. */ .dir-category, [id]{ scroll-margin-top:calc(var(--hs-fixed-nav-h) + 18px); } @media (max-width:940px){ :root{ --hs-fixed-nav-h:176px; } } @media (max-width:700px){ :root{ --hs-fixed-nav-h:184px; } .hs-sticky-nav-wrap .topbar, .hs-sticky-nav-wrap .modebar{ padding-left:10px; padding-right:10px; } } @media (max-width:480px){ :root{ --hs-fixed-nav-h:170px; } } /* ===== 3w/4w dropdown full-card width refinement ===== */ /* Make the headlines-only description dropdown continue the full card width. Keeps existing transform/transition timing intact. */ @media (min-width:360px){ .headlines-grid.cols-3.headlines-only .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-summary-hover{ margin-top:-12px !important; left:0 !important; right:0 !important; width:auto !important; border-radius:0 0 16px 16px !important; margin-top:-18px !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; } } /* ===== 3w/4w dropdown true continuity refinement ===== */ /* Make the dropdown feel like the same card: - same active border color/weight on card and dropdown - no doubled inset side borders - hide the card bottom border behind the dropdown while hovered - keep existing transition timing/transform behavior intact */ @media (min-width:360px){ .headlines-grid.cols-3.headlines-only .headline-card:hover, .headlines-grid.cols-3.headlines-only .headline-card:focus-within, .headlines-grid.cols-4.headlines-only .headline-card:hover, .headlines-grid.cols-4.headlines-only .headline-card:focus-within{ border-color:var(--text) !important; border-bottom-color:transparent !important; } .headlines-grid.cols-3.headlines-only .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-summary-hover{ left:0 !important; right:0 !important; width:auto !important; margin:-12px 0 0 0 !important; border-left:1px solid var(--text) !important; border-right:1px solid var(--text) !important; border-bottom:1px solid var(--text) !important; border-top:none !important; border-radius:0 0 16px 16px !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; /* No inset side shadows; those made the dropdown border look thicker. The top -1px surface line covers the seam where the card bottom border was. */ box-shadow: 0 -1px 0 var(--surface), 0 10px 24px rgba(0,0,0,.18) !important; } .headlines-grid.cols-3.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-3.headlines-only .headline-card:focus-within .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.cols-4.headlines-only .headline-card:focus-within .headline-summary-hover{ margin:-12px 0 0 0 !important; border-left-color:var(--text) !important; border-right-color:var(--text) !important; border-bottom-color:var(--text) !important; } html[data-theme="dark"] .headlines-grid.cols-3.headlines-only .headline-summary-hover, html[data-theme="dark"] .headlines-grid.cols-4.headlines-only .headline-summary-hover{ box-shadow: 0 -1px 0 var(--surface), 0 12px 28px rgba(0,0,0,.45) !important; } } /* ===== mobile feature parity cleanup ===== */ /* Older mobile rules suppressed card hover, image effects, and headlines-only description reveal because images used to auto-zoom on hover. Now that zoom is click-controlled, allow mobile/narrow layouts to behave more like desktop. */ /* Restore card polish on mobile-capable browsers that support hover. */ @media (max-width:700px) and (hover:hover) and (pointer:fine){ .headline-card:hover{ border-color:var(--text) !important; background:var(--surface) !important; box-shadow:0 10px 28px rgba(0,0,0,.18) !important; transform:translateY(-3px) scale(1.01) !important; filter:brightness(1.02); } html[data-theme="dark"] .headline-card:hover{ box-shadow:0 12px 34px rgba(0,0,0,.55) !important; } .headline-card:hover .headline-title a{ color:#000 !important; font-weight:700 !important; } html[data-theme="dark"] .headline-card:hover .headline-title a{ color:#fff !important; } .headline-card:hover .headline-image, .headline-image-link:hover .headline-image, .headline-image:hover{ transform:scale(1.05) !important; box-shadow:0 6px 18px rgba(0,0,0,.22) !important; cursor:zoom-in !important; } } /* Restore headlines-only description reveal on mobile/narrow layouts where hover exists. */ @media (max-width:700px) and (hover:hover) and (pointer:fine){ .headlines-grid.headlines-only .headline-summary-hover{ display:block !important; max-height:0 !important; opacity:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important; transform:translateY(-4px) !important; } .headlines-grid.headlines-only .headline-card:hover .headline-summary-hover, .headlines-grid.headlines-only .headline-card:focus-within .headline-summary-hover{ display:block !important; max-height:220px !important; opacity:1 !important; margin:8px 0 6px !important; padding:0 !important; transform:translateY(0) !important; } } /* Remove old tiny mobile image caps; keep user-selected image sizes useful on phones. */ @media (max-width:700px){ .headlines-grid.cols-2 .headline-image.image-small, .headlines-grid.cols-3 .headline-image.image-small, .headlines-grid.cols-4 .headline-image.image-small{ width:min(100%, 120px) !important; max-height:120px !important; } .headlines-grid.cols-2 .headline-image.image-medium, .headlines-grid.cols-3 .headline-image.image-medium, .headlines-grid.cols-4 .headline-image.image-medium{ width:min(100%, 220px) !important; max-height:220px !important; } .headlines-grid.cols-2 .headline-image.image-large, .headlines-grid.cols-3 .headline-image.image-large, .headlines-grid.cols-4 .headline-image.image-large{ width:min(100%, 300px) !important; max-height:300px !important; } } /* Do not shrink selected images further on very small phones. */ @media (max-width:560px){ .headlines-grid.cols-2 .headline-image.image-small, .headlines-grid.cols-3 .headline-image.image-small, .headlines-grid.cols-4 .headline-image.image-small{ width:min(100%, 120px) !important; max-height:120px !important; } .headlines-grid.cols-2 .headline-image.image-medium, .headlines-grid.cols-3 .headline-image.image-medium, .headlines-grid.cols-4 .headline-image.image-medium{ width:min(100%, 220px) !important; max-height:220px !important; } .headlines-grid.cols-2 .headline-image.image-large, .headlines-grid.cols-3 .headline-image.image-large, .headlines-grid.cols-4 .headline-image.image-large{ width:min(100%, 300px) !important; max-height:300px !important; } } /* Preserve full-width image behavior only in true one-column phone layout. */ @media (max-width:360px){ .headlines-grid.cols-1 .headline-image.image-small, .headlines-grid.cols-1 .headline-image.image-medium, .headlines-grid.cols-1 .headline-image.image-large, .headlines-grid.cols-4 .headline-image.image-small, .headlines-grid.cols-4 .headline-image.image-medium, .headlines-grid.cols-4 .headline-image.image-large{ width:100% !important; max-height:none !important; } }