/* ============================================================ BLOCKTICKER · NEWS LAYER Mega-menu · news hero · feed list · most-read · breaking calendar · sources directory · landing modules Drives one page accent via --acc (set on ). ============================================================ */ :root{ --fx:#56b6ff; /* forex blue */ --reg:#8aa0c8; /* regulation slate */ --acc:var(--btc); /* default page accent */ --acc-soft:var(--btc-soft); } /* ===== NEWS MEGA-MENU ===== */ .nav__item{position:relative;display:flex;align-items:center} .nav__item--mega:hover .mega,.nav__item--mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)} .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);width:680px; background:rgba(11,13,17,.97);backdrop-filter:blur(24px);border:1px solid var(--line-2);border-radius:16px; padding:24px 26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02); opacity:0;visibility:hidden;transition:.18s ease;z-index:60} .mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} /* right-most mega item: anchor to the right so the panel never clips the viewport */ .nav__links .nav__item--mega:last-of-type .mega{left:auto;right:0;transform:translate(0,8px)} .nav__links .nav__item--mega:last-of-type:hover .mega, .nav__links .nav__item--mega:last-of-type:focus-within .mega{transform:translate(0,0)} /* first mega (Markets): left-align so the wide panel never clips the left edge */ .nav__links .nav__item--mega:first-of-type .mega{left:0;right:auto;transform:translate(0,8px)} .nav__links .nav__item--mega:first-of-type:hover .mega, .nav__links .nav__item--mega:first-of-type:focus-within .mega{transform:translate(0,0)} .mega__grid{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:10px 26px} .mega__col-h{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3); padding:0 0 10px;margin-bottom:4px;border-bottom:1px solid var(--line)} .mega__col-h.sub{margin-top:16px} .mega a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--txt-2); transition:.13s;letter-spacing:-.005em} .mega a:hover{background:rgba(255,255,255,.045);color:var(--txt)} .mega__ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex-shrink:0; background:var(--bg-2);border:1px solid var(--line);color:var(--txt-3)} .mega a:hover .mega__ico{color:var(--acc);border-color:var(--line-2)} .mega__ico--dot{color:var(--neon)} .mega__ico--fx{color:var(--fx)} .mega__ico--w3{color:var(--purple)} .mega__ico--macro{color:var(--warn)} .mega__ico--brk{color:var(--down)} .mega__ico--earn{color:var(--up)} .mega__ico--reg{color:var(--reg)} .mega__ico--head{color:var(--neon)} .mega__ico--read{color:var(--btc)} .mega__ico--sent{color:var(--warn)} .mega__ico--cal{color:var(--fx)} .mega__ico--desk{color:var(--purple)} .mega__more{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--font-mono); font-size:11px;letter-spacing:.06em;color:var(--acc)!important} .mega__more:hover{background:transparent!important;color:var(--acc-soft)!important} .mega a small{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:var(--txt-4);letter-spacing:.04em} /* ===== ACCENTED PAGE HEADER (news) ===== */ .news .phead::before{background:radial-gradient(1100px 700px at 88% -10%, color-mix(in oklch,var(--acc) 16%, transparent), transparent 55%),radial-gradient(800px 500px at 0% 95%, rgba(255,255,255,.03), transparent 60%)} .news .phead__eyebrow{border-color:color-mix(in oklch,var(--acc) 32%,transparent);background:color-mix(in oklch,var(--acc) 7%,transparent);color:var(--acc)} .news .phead__eyebrow .pill{background:var(--acc);color:#07080a} .news .phead h1 em{color:var(--acc-soft)} .news .crumb__dot{background:var(--acc);box-shadow:0 0 6px var(--acc)} .news .sec-tag{color:var(--acc)} .news .sec-tag::before{background:var(--acc)} .news .sec-head h2 em{color:var(--acc-soft)} .news .subnav a.active::before{background:var(--acc);box-shadow:0 0 8px var(--acc)} /* ===== PAGE STATS STRIP (shared across news pages) ===== */ .pstats{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .pstats .hs{padding:18px 22px 16px 0;border-right:1px dashed var(--line)} .pstats .hs:last-child{border-right:0;padding-right:0} .pstats dt{font-family:var(--font-mono);font-size:10px;color:var(--txt-3);letter-spacing:.14em;text-transform:uppercase} .pstats dd{font-family:var(--font-mono);font-size:26px;font-weight:500;letter-spacing:-.025em;margin-top:8px;color:var(--txt);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .pstats dd small{font-size:11px;color:var(--txt-3);font-weight:400} .pstats dd.pos{color:var(--up)} .pstats dd.neg{color:var(--down)} .pstats dd.neon{color:var(--neon)} .pstats dd.warn{color:var(--warn)} .pstats dd.acc{color:var(--acc)} /* ===== NEWS FEED LIST (compact, dense) ===== */ .nfeed{display:flex;flex-direction:column;border-top:1px solid var(--line)} .nrow{display:grid;grid-template-columns:56px 1fr auto;gap:20px;padding:18px 0;border-bottom:1px solid var(--line); align-items:start;transition:.14s;position:relative} .nrow:hover{background:rgba(255,255,255,.014)} .nrow__rank{font-family:var(--font-mono);font-size:12px;color:var(--txt-4);letter-spacing:.04em;padding-top:3px} .nrow__rank b{display:block;font-size:20px;color:var(--acc);font-weight:600;letter-spacing:-.02em;line-height:1} .nrow__main .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px; color:var(--txt-3);letter-spacing:.05em;margin-bottom:8px} .nrow__main .src{color:var(--acc);font-weight:600} .nrow__main .meta .at{padding:2px 7px;border-radius:4px;background:var(--bg-1);border:1px solid var(--line);color:var(--txt-2)} .nrow__main .meta .live{color:var(--down)} .nrow__main h3{font-size:17px;font-weight:500;letter-spacing:-.017em;line-height:1.3;color:var(--txt);text-wrap:pretty} .nrow:hover .nrow__main h3{color:#fff} .nrow__main h3 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--acc-soft)} .nrow__main p{margin-top:7px;font-size:13px;color:var(--txt-3);line-height:1.55;max-width:64ch; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nrow__r{text-align:right;font-family:var(--font-mono);font-size:10px;color:var(--txt-3);white-space:nowrap; display:flex;flex-direction:column;gap:7px;align-items:flex-end;min-width:96px} .nrow__px b{font-weight:600} .nrow__px b.up{color:var(--up)} .nrow__px b.dn{color:var(--down)} .nrow__spark{width:90px;height:26px;display:block} .nrow__tag{font-size:9px;padding:2px 7px;border-radius:4px;letter-spacing:.06em} .sent-pill{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.07em;padding:3px 8px; border-radius:5px;text-transform:uppercase;align-self:flex-start;white-space:nowrap} .sent-pill.bull{color:var(--up);background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.28)} .sent-pill.bear{color:var(--down);background:rgba(234,57,67,.1);border:1px solid rgba(234,57,67,.28)} .sent-pill.neu{color:var(--txt-2);background:rgba(255,255,255,.04);border:1px solid var(--line-2)} /* ===== LEAD STORY (landing) ===== */ .lead{display:grid;grid-template-columns:1.35fr 1fr;gap:0;background:var(--panel);border:1px solid var(--line); border-radius:18px;overflow:hidden} .lead__media{position:relative;background: repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,transparent 2px 11px), radial-gradient(120% 120% at 20% 0%, color-mix(in oklch,var(--acc) 14%,transparent), transparent 60%),var(--bg-1); min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;border-right:1px solid var(--line)} .lead__ph{position:absolute;top:18px;left:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em; color:var(--txt-4);text-transform:uppercase} .lead__media .badge{align-self:flex-start;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em; padding:5px 11px;border-radius:6px;background:var(--acc);color:#07080a;text-transform:uppercase} .lead__body{padding:30px 32px;display:flex;flex-direction:column;gap:14px} .lead__body .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px; color:var(--txt-3);letter-spacing:.05em} .lead__body .meta .src{color:var(--acc);font-weight:600} .lead__body h2{font-size:clamp(26px,2.5vw,34px);font-weight:500;letter-spacing:-.025em;line-height:1.12;text-wrap:balance} .lead__body h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--acc-soft)} .lead__body p{font-size:14.5px;color:var(--txt-2);line-height:1.6;max-width:52ch} .lead__foot{margin-top:auto;display:flex;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--font-mono);font-size:11px;color:var(--txt-3)} /* ===== CARD GRID (landing secondary stories) ===== */ .ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ncard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex; flex-direction:column;gap:11px;transition:.15s} .ncard:hover{border-color:var(--line-2);background:var(--panel-2)} .ncard .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:9.5px; color:var(--txt-3);letter-spacing:.05em} .ncard .meta .src{color:var(--acc);font-weight:600} .ncard h3{font-size:15.5px;font-weight:500;letter-spacing:-.012em;line-height:1.32;color:var(--txt);text-wrap:pretty} .ncard:hover h3{color:#fff} .ncard p{font-size:12.5px;color:var(--txt-3);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ncard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono); font-size:10px;color:var(--txt-4)} /* ===== STREAM COLUMNS (landing by-market) ===== */ .streams{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px; overflow:hidden;background:var(--panel)} .stream{padding:20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px} .stream:last-child{border-right:0} .stream__hd{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line)} .stream__hd .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .stream__hd h4{font-size:13px;font-weight:600;letter-spacing:-.01em} .stream__hd a{margin-left:auto;font-family:var(--font-mono);font-size:13px;color:var(--txt-4)} .stream__hd a:hover{color:var(--txt-2)} .stream li{list-style:none;padding:11px 0;border-bottom:1px solid var(--line)} .stream li:last-child{border-bottom:0;padding-bottom:0} .stream li .t{font-family:var(--font-mono);font-size:9px;color:var(--txt-4);letter-spacing:.05em;display:flex; justify-content:space-between;margin-bottom:5px} .stream li a{font-size:13px;line-height:1.4;color:var(--txt-2);letter-spacing:-.008em;display:block} .stream li a:hover{color:var(--txt)} /* ===== MOST-READ RANKED ===== */ .mr{display:flex;flex-direction:column;border-top:1px solid var(--line)} .mr__row{display:grid;grid-template-columns:46px 1fr auto;gap:18px;padding:16px 0;border-bottom:1px solid var(--line); align-items:center;transition:.14s} .mr__row:hover{background:rgba(255,255,255,.014)} .mr__n{font-family:var(--font-serif);font-style:italic;font-size:30px;color:var(--acc);line-height:1;text-align:center} .mr__row:nth-child(n+4) .mr__n{color:var(--txt-4)} .mr__t h3{font-size:15.5px;font-weight:500;letter-spacing:-.012em;line-height:1.32} .mr__t .meta{font-family:var(--font-mono);font-size:10px;color:var(--txt-3);margin-top:5px;letter-spacing:.04em} .mr__t .meta .src{color:var(--acc)} .mr__v{text-align:right;font-family:var(--font-mono);white-space:nowrap} .mr__v b{font-size:16px;color:var(--txt);font-weight:600;letter-spacing:-.01em} .mr__v span{display:block;font-size:9px;color:var(--txt-4);letter-spacing:.08em;margin-top:3px} .mr__bar{height:3px;width:64px;background:var(--bg-2);border-radius:2px;margin-top:6px;margin-left:auto;overflow:hidden} .mr__bar i{display:block;height:100%;background:var(--acc);border-radius:2px} /* ===== BREAKING TIMELINE ===== */ .tl{position:relative;padding-left:30px} .tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--acc),transparent)} .tl__item{position:relative;padding:0 0 26px} .tl__item:last-child{padding-bottom:0} .tl__dot{position:absolute;left:-30px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--bg-1); border:2px solid var(--line-2);display:grid;place-items:center} .tl__item.hot .tl__dot{border-color:var(--acc);box-shadow:0 0 12px color-mix(in oklch,var(--acc) 60%,transparent)} .tl__item.hot .tl__dot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)} .tl__time{font-family:var(--font-mono);font-size:11px;color:var(--acc);letter-spacing:.04em;margin-bottom:6px; display:flex;align-items:center;gap:9px} .tl__time .flash{font-size:9px;padding:2px 7px;border-radius:4px;background:rgba(234,57,67,.12); border:1px solid rgba(234,57,67,.32);color:var(--down);font-weight:600;letter-spacing:.08em} .tl__item h3{font-size:16.5px;font-weight:500;letter-spacing:-.015em;line-height:1.3} .tl__item h3 em{font-family:var(--font-serif);font-style:italic;color:var(--acc-soft)} .tl__item p{margin-top:7px;font-size:13px;color:var(--txt-3);line-height:1.55;max-width:66ch} .tl__item .meta{margin-top:9px;font-family:var(--font-mono);font-size:10px;color:var(--txt-4);letter-spacing:.05em; display:flex;gap:10px;align-items:center;flex-wrap:wrap} .tl__item .meta .src{color:var(--txt-2)} /* ===== ECONOMIC CALENDAR ===== */ .cal-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px} .cal-bar .nav-day{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:2px} .cal-bar .nav-day button{padding:7px 14px;border-radius:7px;font-family:var(--font-mono);font-size:11px;color:var(--txt-3);letter-spacing:.04em} .cal-bar .nav-day button.on{background:var(--bg-1);color:var(--txt)} .cal-bar .cal-right{margin-left:auto;display:flex;gap:14px;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--txt-3)} .cal{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)} .cal__day{display:flex;align-items:baseline;gap:12px;padding:13px 22px;background:var(--bg-1);border-bottom:1px solid var(--line); border-top:1px solid var(--line)} .cal__day:first-child{border-top:0} .cal__day h4{font-size:14px;font-weight:600;letter-spacing:-.01em} .cal__day span{font-family:var(--font-mono);font-size:10px;color:var(--txt-3);letter-spacing:.06em} .cal__day .cnt{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--txt-4)} .cevt{display:grid;grid-template-columns:74px 30px 1fr 92px 92px 92px;gap:16px;align-items:center;padding:13px 22px; border-bottom:1px solid var(--line);transition:.14s} .cevt:hover{background:rgba(255,255,255,.014)} .cevt:last-child{border-bottom:0} .cevt__time{font-family:var(--font-mono);font-size:12px;color:var(--txt-2);letter-spacing:.02em} .cevt__time small{display:block;color:var(--txt-4);font-size:9px;letter-spacing:.08em;margin-top:2px} .cevt__flag{width:26px;height:18px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line); font-family:var(--font-mono);font-size:8px;color:var(--txt-2);display:grid;place-items:center;letter-spacing:.02em} .cevt__name{font-size:14px;font-weight:500;letter-spacing:-.01em} .cevt__name .imp{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle} .cevt__name .imp i{width:5px;height:11px;border-radius:1px;background:var(--txt-4);display:inline-block} .cevt__name .imp.h3 i{background:var(--down)} .cevt__name .imp.h2 i:nth-child(-n+2){background:var(--warn)} .cevt__name .imp.h1 i:first-child{background:var(--up)} .cevt__col{font-family:var(--font-mono);font-size:12.5px;text-align:right} .cevt__col small{display:block;font-size:8.5px;color:var(--txt-4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;text-align:right} .cevt__col b{font-weight:600;color:var(--txt)} .cevt__col b.up{color:var(--up)} .cevt__col b.dn{color:var(--down)} .cevt__col.muted b{color:var(--txt-3);font-weight:400} /* ===== SOURCES DIRECTORY ===== */ .src-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .srccard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex; flex-direction:column;gap:13px;transition:.15s} .srccard:hover{border-color:var(--line-2);background:var(--panel-2)} .srccard__top{display:flex;align-items:center;gap:12px} .srccard__mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:15px; flex-shrink:0;background:var(--bg-2);border:1px solid var(--line);color:var(--txt)} .srccard__top h4{font-size:15px;font-weight:600;letter-spacing:-.01em} .srccard__top .cat{font-family:var(--font-mono);font-size:9.5px;color:var(--txt-3);letter-spacing:.06em;margin-top:2px} .srccard__rel{margin-left:auto;text-align:right} .srccard__rel b{font-family:var(--font-mono);font-size:15px;color:var(--acc);font-weight:600} .srccard__rel span{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--txt-4);letter-spacing:.08em} .srccard p{font-size:12.5px;color:var(--txt-3);line-height:1.5} .srccard__foot{margin-top:auto;display:flex;gap:14px;padding-top:13px;border-top:1px solid var(--line); font-family:var(--font-mono);font-size:10px;color:var(--txt-4);letter-spacing:.04em} .srccard__foot b{color:var(--txt-2);font-weight:500} .src-letter{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--txt-3);text-transform:uppercase; margin:36px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)} .src-letter:first-of-type{margin-top:0} /* ===== SIDEBAR PANES (shared) ===== */ .nlayout{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start} .nside{display:grid;gap:16px;position:sticky;top:124px} .npane{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px} .npane__hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:14px} .npane__hd h4{font-size:13px;font-weight:600;letter-spacing:-.01em} .npane__hd span{font-family:var(--font-mono);font-size:9.5px;color:var(--txt-3);letter-spacing:.06em} .minirow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)} .minirow:last-child{border-bottom:0;padding-bottom:0} .minirow .n{font-family:var(--font-mono);font-size:11px;color:var(--txt-4);padding-top:2px} .minirow a{font-size:13px;line-height:1.4;color:var(--txt-2);letter-spacing:-.008em} .minirow a:hover{color:var(--txt)} .minirow .meta{font-family:var(--font-mono);font-size:9px;color:var(--txt-4);margin-top:4px;letter-spacing:.05em} .tagcloud{display:flex;flex-wrap:wrap;gap:7px} .tagcloud a{font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:7px;background:var(--bg-1); border:1px solid var(--line);color:var(--txt-2);letter-spacing:.02em;transition:.13s} .tagcloud a:hover{border-color:var(--acc);color:var(--acc)} .npane .wire{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line); font-family:var(--font-mono);font-size:11px} .npane .wire:last-child{border-bottom:0} .npane .wire span{color:var(--txt-2)} .npane .wire b{color:var(--up);font-weight:500} .npane .wire .off{color:var(--txt-4)} /* feed page filter bar reuse */ .filt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px} .filt__group{display:flex;align-items:center;gap:8px} .filt__lbl{font-family:var(--font-mono);font-size:10px;color:var(--txt-3);letter-spacing:.12em;text-transform:uppercase} .filt__right{margin-left:auto;display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--txt-3)} /* ===== RESPONSIVE ===== */ @media (max-width:1080px){ .nlayout{grid-template-columns:1fr}.nside{position:static;grid-template-columns:repeat(2,1fr);display:grid} .ngrid{grid-template-columns:repeat(2,1fr)}.streams{grid-template-columns:1fr 1fr} .src-grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .lead{grid-template-columns:1fr}.ngrid,.streams,.src-grid{grid-template-columns:1fr} .nside{grid-template-columns:1fr}.lead__media{min-height:200px} .cevt{grid-template-columns:64px 1fr;gap:8px}.cevt__flag,.cevt__col:nth-child(n+4){display:none} .nrow{grid-template-columns:40px 1fr}.nrow__r{display:none} .pstats{grid-template-columns:1fr 1fr}.pstats dd{font-size:22px} .pstats .hs:nth-child(2n){border-right:0} }