/* ========================================================================== THEWEALTHORA DESIGN SYSTEM v2.1 — "Editorial authority" Headlines: DM Sans · UI/body: Inter (restrained weights) Brand accent: #1B17FF. Green/red reserved strictly for price movement. ========================================================================== */ :root{ --ink:#0A1428; --ink-2:#101B33; --ink-3:#1D2B44; --paper:#FFFFFF; --soft:#F6F7F9; --soft-2:#EEF0F4; --line:#E5E8EE; --line-2:#D6DBE4; --brand:#1B17FF; --brand-d:#1410C9; --brand-t:#F0F0FF; --up:#0E9F6E; --up-bg:#EAF7F1; --down:#D92626; --down-bg:#FDEEEE; --amber:#D97917; --teal:#0E8C8C; --indigo:#6D28D9; --gold:#B8860B; /* --mut-2 was #8A93A2: 3.10:1 on white and 2.89:1 on --soft, well under the 4.5:1 WCAG AA floor, and it carries the smallest type on the site (bylines, card meta, "min read", footer legal, tool card descriptions). Darkened to clear AA on both white and the soft panels. */ --txt:#161D2B; --mut:#596372; --mut-2:#666F7D; --card:#FFFFFF; --card-2:#F6F7F9; --radius:12px; --radius-s:9px; --shadow:0 1px 2px rgba(10,20,40,.05),0 6px 20px -10px rgba(10,20,40,.08); --shadow-lg:0 2px 4px rgba(10,20,40,.05),0 18px 44px -18px rgba(10,20,40,.16); --ease:cubic-bezier(.22,1,.36,1); /* Headline face. Was Source Serif 4; DM Sans across every heading on Arpit's call, so the masthead, section headers, article H1s and tool titles all speak in one voice. --font-s is referenced by every heading rule, so this one line moves the whole site. */ --font-s:'DM Sans',-apple-system,'Segoe UI',sans-serif; --font-b:'Inter',-apple-system,'Segoe UI',sans-serif; --maxw:1340px; } [data-theme="dark"]{ --ink:#0B0F1A; --ink-2:#0E1524; --ink-3:#1B2740; --paper:#0C111C; --soft:#111828; --soft-2:#162032; --line:#1E2A40; --line-2:#293852; --brand:#7B78FF; --brand-d:#5652E8; --brand-t:#16162E; --up:#34D399; --up-bg:#0C2318; --down:#F87171; --down-bg:#2A1214; /* Same fix on dark: #697488 was 4.00:1 on the page and 3.46:1 on --soft-2. */ --txt:#E7EBF3; --mut:#9AA5B7; --mut-2:#8592A6; --card:#111828; --card-2:#162032; --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px -10px rgba(0,0,0,.5); --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 18px 44px -18px rgba(0,0,0,.65); } /* ---------- Base ---------- */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-b);background:var(--paper);color:var(--txt); font-size:16.5px;line-height:1.68;font-weight:400;margin:0;padding:0; -webkit-font-smoothing:antialiased;transition:background .3s var(--ease),color .3s var(--ease)} /* Defend against stale LiteSpeed Critical CSS from the OLD theme, which injects `body{padding-top:64px}` and leaves an empty band above the ticker tape. The .twr-theme class outranks the bare `body` selector, so this wins regardless of stylesheet order, even before a LiteSpeed purge regenerates the critical CSS. */ body.twr-theme{padding-top:0!important;margin-top:0!important} /* Same defence, for PAINT. LiteSpeed inlines a per-URL Critical CSS blob AFTER the theme stylesheet, and a stale blob still carries hardcoded light-mode paint such as `html,body,main,#main,article{background:#fff}` (measured live on the homepage: computed body background stayed white while data-theme was dark). Light text on a forced-white canvas is exactly the "dark mode makes the article content invisible" report. A class on plus .twr-theme on outranks any bare-element rule, so the theme wins whatever state the cache is in — no purge required. */ html.twr-html{background:var(--paper)!important} html.twr-html body.twr-theme{background:var(--paper)!important;color:var(--txt)!important} body.twr-theme main,body.twr-theme #main,body.twr-theme #twr-content, body.twr-theme article,body.twr-theme .twr-article-main,body.twr-theme .twr-prose{background:transparent} body.twr-theme article.twr-card{background:var(--card)} body.twr-theme .twr-prose,body.twr-theme .twr-prose p,body.twr-theme .twr-prose li, body.twr-theme .twr-prose h2,body.twr-theme .twr-prose h3,body.twr-theme .twr-prose h4, body.twr-theme .twr-prose td,body.twr-theme .twr-prose strong{color:var(--txt)} body.twr-theme .twr-prose blockquote{color:var(--mut)} body.twr-theme .twr-prose a{color:var(--brand)} *,*::before,*::after{box-sizing:border-box} img{max-width:100%;height:auto} a{color:inherit;text-decoration:none} a:hover{color:var(--brand)} h1,h2,h3,h4{font-family:var(--font-s);color:var(--txt);line-height:1.22; letter-spacing:-.01em;margin:0 0 .5em;font-weight:600} h1{font-weight:700} .twr-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .twr-num{font-variant-numeric:tabular-nums} .screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden} ::selection{background:var(--brand);color:#fff} .twr-up{color:var(--up)!important} .twr-down{color:var(--down)!important} .twr-flat{color:var(--mut)!important} .twr-ico{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block} /* Price change flash (whole row/card — fires on real data refresh) */ @keyframes twr-flash-up{0%{background:var(--up-bg)}100%{background:transparent}} @keyframes twr-flash-down{0%{background:var(--down-bg)}100%{background:transparent}} .twr-flash-up{animation:twr-flash-up 1.3s var(--ease)} .twr-flash-down{animation:twr-flash-down 1.3s var(--ease)} /* On the DARK surfaces the same tint was the bug behind "a white box appears, then the number updates": --up-bg is a pale mint (#EAF7F1) meant for white cards, so on the near-black ticker tape and the dark watchlist panel it painted a bright block for 1.3s on every tick. Those surfaces get a translucent tint of the up/down colour instead, which reads as a glow. */ .twr-tape .twr-flash-up,.twr-dock .twr-wl .twr-flash-up{animation:twr-flash-up-dark 1.3s var(--ease)} .twr-tape .twr-flash-down,.twr-dock .twr-wl .twr-flash-down{animation:twr-flash-down-dark 1.3s var(--ease)} @keyframes twr-flash-up-dark{0%{background:rgba(52,211,153,.24)}100%{background:transparent}} @keyframes twr-flash-down-dark{0%{background:rgba(248,113,113,.24)}100%{background:transparent}} /* Give the tape tint a shape rather than a hard-edged rectangle. */ .twr-ti{border-radius:6px;padding:2px 7px;margin:0 -7px} /* Dark surfaces need their own tint. --up-bg is #EAF7F1, a near-WHITE pale green meant for white cards; painting it behind a ticker item on the almost black tape produced a white block that flashed on every price update, then the number changed. Same trap on the dark watchlist panel. Translucent tints read as a glow on dark instead of a hole punched in the bar. */ @keyframes twr-flash-up-dark{0%{background:rgba(52,211,153,.26)}100%{background:transparent}} @keyframes twr-flash-down-dark{0%{background:rgba(248,113,113,.26)}100%{background:transparent}} .twr-tape .twr-flash-up,.twr-dock .twr-wl .twr-flash-up{animation:twr-flash-up-dark 1.3s var(--ease)} .twr-tape .twr-flash-down,.twr-dock .twr-wl .twr-flash-down{animation:twr-flash-down-dark 1.3s var(--ease)} /* Give the tape tint a shape so it looks deliberate, not like a torn rectangle. */ .twr-tape .twr-ti{padding:3px 8px;border-radius:6px;margin:0 -2px} /* Per-price tick: the number itself blips green or red and pops, then settles. Fired ONLY when the feed reports a genuinely different price (flashDiffs in twr-markets.js). The old tick-simulator that drove this every second was removed on purpose and must not come back: it displayed invented prices. */ /* Colour only, no scale or lift. A terminal tick recolours the number and settles; the pop read as a UI toy on a price. */ [data-ps]{transition:color .55s var(--ease)} .twr-tick-up,.twr-tick-down{transition:none!important} .twr-tick-up{color:var(--up)!important} .twr-tick-down{color:var(--down)!important} /* Heartbeat on every completed refresh. Signals "data just arrived", which is true on every poll, without pretending a delayed price moved. */ @keyframes twr-beat{0%{transform:scale(1);opacity:1} 40%{transform:scale(2.1);opacity:.35} 100%{transform:scale(1);opacity:1}} .twr-beat{animation:twr-beat .7s var(--ease)} @media (prefers-reduced-motion:reduce){.twr-beat{animation:none}} /* Scroll reveal */ .twr-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .twr-reveal.twr-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .twr-reveal{opacity:1;transform:none;transition:none} *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---------- ① Ticker tape ---------- */ .twr-tape{background:var(--ink);color:#fff;height:42px;display:flex;align-items:stretch; overflow:hidden;position:relative;z-index:60;border-bottom:1px solid var(--ink-3)} [data-theme="dark"] .twr-tape{background:#070B13} .twr-tape-label{background:var(--brand-d);display:flex;align-items:center;gap:8px;padding:0 15px; font:600 10.5px var(--font-b);letter-spacing:1.4px;white-space:nowrap;z-index:2} .twr-tape-label .twr-pulse{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:twr-pulse 2s infinite} @keyframes twr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}} .twr-tape-viewport{flex:1;overflow:hidden;display:flex;align-items:center} .twr-tape-track{display:flex;gap:36px;padding-left:24px;white-space:nowrap;will-change:transform; animation:twr-marquee 55s linear infinite} .twr-tape:hover .twr-tape-track{animation-play-state:paused} @keyframes twr-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .twr-ti{display:inline-flex;gap:8px;align-items:center;font-size:12.5px} .twr-ti b{font-weight:500;color:#B9C3D4;font-size:12px} .twr-ti .p{color:#fff;font-weight:600} .twr-ti .u{color:#4ADE80;font-weight:600}.twr-ti .d{color:#F87171;font-weight:600} /* Market-closed state: label swaps to "US MARKET CLOSED", pulse goes grey, prices freeze at the close (the tick simulator skips closed markets). */ .twr-tape.twr-closed .twr-tape-label{background:#3A4356} .twr-tape.twr-closed .twr-pulse{background:#94A3B8;animation:none} .twr-attag{font:600 8.5px var(--font-b);letter-spacing:.7px;color:var(--mut-2);background:var(--soft-2); border-radius:4px;padding:2px 5px;margin-left:6px;text-transform:uppercase;vertical-align:1px;white-space:nowrap} /* ---------- Topbar ---------- */ .twr-topbar{display:flex;align-items:center;height:34px;font-size:12px;color:var(--mut); border-bottom:1px solid var(--line);background:var(--soft)} .twr-topbar .twr-wrap{display:flex;align-items:center;justify-content:space-between;width:100%} .twr-weather{display:flex;align-items:center;gap:7px;font-weight:500} .twr-weather .twr-w-icon{font-size:14px} .twr-lang{position:relative} .twr-lang select{appearance:none;background:transparent;border:1px solid var(--line);color:var(--mut); border-radius:7px;font:500 12px var(--font-b);padding:4px 22px 4px 9px;cursor:pointer} .twr-lang::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%); pointer-events:none;font-size:9px;color:var(--mut-2)} #google_translate_element,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame{display:none!important} body{top:0!important;position:static!important} .skiptranslate iframe{display:none!important;visibility:hidden!important} /* Kill the stray blank band that third-party scripts can inject ABOVE the ticker tape (unfilled auto-ads, translate banner wrappers). Filled ads are untouched — only empty/unfilled slots collapse. */ body>.skiptranslate{display:none!important;height:0!important} ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important;height:0!important;min-height:0!important} body>ins.adsbygoogle:first-child:not([data-ad-status="filled"]){display:none!important} .google-auto-placed:empty{display:none!important} /* ---------- ② Nav ---------- */ .twr-nav{position:sticky;top:0;z-index:50;background:var(--paper); border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease)} .twr-nav.twr-scrolled{box-shadow:var(--shadow)} .twr-nav-in{display:flex;align-items:center;gap:34px;height:66px} .twr-logo{display:flex;align-items:center;flex-shrink:0} .twr-logo-img{height:30px;width:auto;display:block} .twr-logo-dark{display:none} [data-theme="dark"] .twr-logo-light{display:none} [data-theme="dark"] .twr-logo-dark{display:block} .twr-menu{display:flex;gap:26px;list-style:none;margin:0;padding:0} .twr-menu>li{position:relative} .twr-menu>li>a{font:500 14.5px var(--font-b);color:var(--txt);padding:22px 0;display:inline-block; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s var(--ease),border-color .2s var(--ease)} .twr-menu>li>a:hover,.twr-menu>li.current-menu-item>a{color:var(--brand);border-bottom-color:var(--brand)} .twr-menu .sub-menu{position:absolute;top:100%;left:-14px;min-width:220px;background:var(--card); border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);list-style:none; padding:7px;opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:70} .twr-menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:none} .twr-menu .sub-menu a{display:block;padding:8px 11px;border-radius:7px;font:400 13.5px var(--font-b);color:var(--txt)} .twr-menu .sub-menu a:hover{background:var(--soft);color:var(--brand)} .twr-nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px} .twr-iconbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:transparent; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mut); transition:border-color .2s,color .2s,transform .2s var(--ease);padding:0} .twr-iconbtn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)} .twr-livebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px; padding:8px 14px;font:600 13px var(--font-b);color:var(--txt);transition:border-color .2s,color .2s} .twr-livebtn i{width:7px;height:7px;border-radius:50%;background:var(--up);animation:twr-pulse 2s infinite;flex-shrink:0} .twr-livebtn:hover{border-color:var(--up);color:var(--up)} .twr-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff!important; font:500 14px var(--font-b);padding:10px 18px;border-radius:9px;border:none;cursor:pointer; transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s} .twr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(27,23,255,.5);background:var(--brand-d)} .twr-btn-ghost{background:transparent;color:var(--txt)!important;border:1px solid var(--line)} .twr-btn-ghost:hover{border-color:var(--brand);color:var(--brand)!important;box-shadow:none} .twr-burger{display:none} .twr-search-pop{position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);padding:16px 0;display:none} .twr-search-pop.open{display:block} .twr-search-pop form{display:flex;gap:10px;max-width:700px;margin:0 auto;padding:0 24px} .twr-search-pop input[type=search]{flex:1;border:1px solid var(--line);border-radius:9px;background:var(--soft); padding:11px 15px;font:400 15px var(--font-b);color:var(--txt);outline:none} .twr-search-pop input[type=search]:focus{border-color:var(--brand)} /* ---------- ③ Breaking ---------- The bar rolls through the newest headlines the same way the News Flash does, so it never sits on one stale story. Each headline is absolutely positioned in its own stage and slides up as it becomes current. */ .twr-breaking{background:#B91C1C;color:#fff;min-height:38px;display:flex;align-items:center;font-size:13px;overflow:hidden} .twr-breaking-tag{background:#7F1D1D;align-self:stretch;display:flex;align-items:center;padding:0 13px; font:700 10.5px var(--font-b);letter-spacing:1.4px;white-space:nowrap} .twr-breaking .dot{width:7px;height:7px;border-radius:50%;background:#fff;margin:0 10px 0 14px;flex-shrink:0;animation:twr-pulse 1.6s infinite} .twr-breaking a{color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .twr-breaking time{margin-left:auto;padding:0 16px;opacity:.85;font-size:11.5px;white-space:nowrap} .twr-breaking-stage{position:relative;flex:1;min-width:0;align-self:stretch;overflow:hidden} .bk-item{position:absolute;inset:0;display:flex;align-items:center;gap:12px;opacity:0; transform:translateY(70%);pointer-events:none; transition:opacity .42s var(--ease),transform .42s var(--ease)} .bk-item.on{opacity:1;transform:none;pointer-events:auto} .bk-item .bk-t{color:#fff;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bk-item time{margin-left:auto;padding:0 16px 0 8px;opacity:.85;font-size:11.5px;white-space:nowrap;flex-shrink:0} /* ---------- Breadcrumbs ---------- */ .twr-crumbs{padding:14px 0 0} .twr-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0; font:500 12.5px var(--font-b);color:var(--mut-2)} .twr-crumbs li{display:flex;align-items:center;gap:6px;min-width:0} .twr-crumbs li+li::before{content:'/';color:var(--line-2);font-weight:400} .twr-crumbs a{color:var(--mut)} .twr-crumbs a:hover{color:var(--brand)} .twr-crumbs .crumb-now{color:var(--txt);font-weight:600;max-width:min(56ch,100%); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- ④ Newsroom hero — 3 columns ---------- left: Finance Wire · center: the big feature · right: snapshot + news flash */ .twr-hero3{display:grid;grid-template-columns:300px minmax(0,1fr) 330px;gap:26px;padding:26px 0 34px;align-items:stretch} /* left · Finance Wire */ .twr-wirecol{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 16px 10px;display:flex;flex-direction:column;min-width:0} .twr-wire-list{flex:1;min-height:0} .twr-wi{display:block;padding:10px 0;border-bottom:1px solid var(--soft-2)} .twr-wi:last-child{border-bottom:none} .wi-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px} .wi-meta time{font:600 10.5px var(--font-b);letter-spacing:.5px;color:var(--brand);text-transform:uppercase;white-space:nowrap} .wi-new{font:700 8.5px var(--font-b);letter-spacing:.9px;background:var(--down);color:#fff;padding:2px 5px;border-radius:4px;animation:twr-pulse 1.6s infinite} .wi-src{font:400 10.5px var(--font-b);color:var(--mut-2);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px} .wi-title{font:500 13.5px/1.42 var(--font-b);color:var(--txt);display:block;transition:color .2s var(--ease)} .twr-wi:hover .wi-title{color:var(--brand)} .twr-wi.fresh .wi-title{font-weight:600} @keyframes twr-wi-in{from{background:var(--brand-t)}to{background:transparent}} .twr-wi-flash{animation:twr-wi-in 2.4s var(--ease)} .twr-wire-empty{font-size:13px;color:var(--mut);line-height:1.55;margin:4px 0} .twr-wire-all{display:block;text-align:center;font:600 12.5px var(--font-b);color:var(--brand);padding:11px 0 5px;border-top:1px solid var(--line);margin-top:8px} /* right · snapshot + news flash stack */ .twr-rightcol{display:flex;flex-direction:column;gap:14px;min-width:0} .twr-newsflash{background:var(--ink);border-radius:12px;padding:15px 16px 0;overflow:hidden;flex:1;display:flex;flex-direction:column;min-height:170px} [data-theme="dark"] .twr-newsflash{background:#0A1020;border:1px solid var(--line)} .nf-head{display:flex;align-items:center;gap:9px;margin-bottom:10px} .nf-head .lbl{font:600 11px var(--font-b);letter-spacing:1.2px;text-transform:uppercase;color:#9FB2C8} .nf-n{margin-left:auto;font:500 10.5px var(--font-b);color:#5F6E84} /* Streaming-rail cards: featured image on top, title below, two per page. Pages crossfade + slide as the flasher rolls. */ .nf-stage{position:relative;flex:1;min-height:340px} .nf-page{position:absolute;inset:0;display:grid;grid-template-rows:1fr 1fr;gap:12px;padding-bottom:14px; opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none} .nf-page.on{opacity:1;transform:none;pointer-events:auto} .nf-card{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:#131C30; border:1px solid rgba(255,255,255,.07);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s var(--ease)} .nf-card:hover{transform:translateY(-2px) scale(1.012);border-color:rgba(123,120,255,.55);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)} .nf-img{display:block;flex:1;min-height:0;background:linear-gradient(135deg,#1D2B44,#14124B);position:relative;overflow:hidden} .nf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)} .nf-card:hover .nf-img img{transform:scale(1.05)} .nf-img::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(10,16,32,.55))} .nf-cbody{display:block;padding:8px 11px 10px} .nf-cbody time{font:600 10px var(--font-b);letter-spacing:.6px;color:#7B78FF;text-transform:uppercase;display:block;margin-bottom:3px} .nf-cbody .t{font:600 13px/1.4 var(--font-b);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nf-card:hover .t{color:#A5B4FC} .nf-bar{height:3px;background:rgba(255,255,255,.12);margin:0 -16px} .nf-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),#7B78FF)} @keyframes twr-nf-bar{from{width:0}to{width:100%}} /* ---------- ④a Featured-story rotator (homepage lead) ---------- */ .twr-leadrot{display:grid;position:relative} /* Identical roll to the News Flash pages: same 14px rise, same .5s, same easing. It used to be 10px over .3s, which is why the two strips read as different animations even though they turn on the same 7s beat. */ .twr-lead-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;pointer-events:none} .twr-lead-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto} /* And the same countdown bar, so you can see it rolling rather than guess. */ .twr-lead-bar{flex:1;height:3px;border-radius:2px;background:var(--soft-2);overflow:hidden;min-width:40px} .twr-lead-bar i{display:block;height:100%;width:0;border-radius:2px; background:linear-gradient(90deg,var(--brand),#7B78FF)} .twr-lead-nav{display:flex;align-items:center;gap:12px;margin-top:14px} .twr-lead-arrow{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card); color:var(--mut);font-size:16px;line-height:1;cursor:pointer;transition:all .2s var(--ease);padding:0} .twr-lead-arrow:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)} .twr-lead-dots{display:flex;gap:7px;align-items:center} .twr-lead-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--line-2);cursor:pointer; padding:0;transition:all .25s var(--ease)} .twr-lead-dot:hover{background:var(--mut-2)} .twr-lead-dot.on{background:var(--brand);width:22px;border-radius:5px} /* ---------- ④ Hero (legacy 2-col, still used on inner pages) ---------- */ .twr-hero{display:grid;grid-template-columns:1fr 350px;gap:30px;padding:28px 0 32px} .twr-lead-media{display:block;height:350px;border-radius:12px;position:relative;overflow:hidden;background:var(--ink-2)} .twr-lead-media>a{display:block;height:100%} .twr-lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .twr-lead-media:hover img{transform:scale(1.03)} .twr-lead-chip{position:absolute;top:14px;left:14px;z-index:2} .twr-lead h1,.twr-lead .twr-lead-title{font-family:var(--font-s);font-size:clamp(26px,2.9vw,38px); line-height:1.15;letter-spacing:-.015em;margin:18px 0 10px;font-weight:700} .twr-lead .twr-lead-title a:hover{color:var(--brand)} .twr-lead-dek{font-size:16.5px;color:var(--mut);line-height:1.6;margin:0} .twr-lead-dek b{color:var(--brand);font-weight:600} .twr-byline{display:flex;gap:11px;font-size:12.5px;color:var(--mut-2);margin-top:12px;align-items:center;flex-wrap:wrap} .twr-byline .twr-ava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--teal));flex-shrink:0;overflow:hidden} .twr-byline .twr-ava img{width:100%;height:100%;object-fit:cover} .twr-byline b{color:var(--txt);font-weight:600} .twr-verified{color:var(--up);font-weight:500} .twr-hero-secs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .twr-sec h3{font-family:var(--font-s);font-size:18px;line-height:1.32;font-weight:600;margin:8px 0 6px} .twr-sec p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0} .twr-chip{font:600 10px var(--font-b);letter-spacing:.8px;padding:4px 9px;border-radius:5px; color:#fff;display:inline-block;text-transform:uppercase;background:var(--brand)} .twr-chip[data-cat*="crypto"]{background:var(--amber)} .twr-chip[data-cat*="invest"]{background:var(--up)} .twr-chip[data-cat*="passive"]{background:var(--teal)} .twr-chip[data-cat*="credit"]{background:var(--indigo)} .twr-chip[data-cat*="news"]{background:var(--ink-3)} .twr-chip[data-cat*="personal"]{background:var(--gold)} /* ---------- ⑤ Snapshot ---------- */ .twr-snap{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start} .twr-h4{font:600 11px var(--font-b);letter-spacing:1.2px;color:var(--mut);margin:0 0 13px; display:flex;align-items:center;gap:8px;text-transform:uppercase} .twr-h4::before{content:'';width:4px;height:13px;background:var(--brand);border-radius:2px;flex-shrink:0} .twr-h4 .lbl{flex:1} .twr-live{color:var(--up);font:600 10px var(--font-b);letter-spacing:.5px;display:inline-flex;align-items:center;gap:5px} .twr-live i{width:6px;height:6px;border-radius:50%;background:var(--up);animation:twr-pulse 2s infinite} .twr-updated{font:500 10.5px var(--font-b);color:var(--mut-2);letter-spacing:0;text-transform:none} .twr-idx{display:grid;grid-template-columns:1fr 1fr;gap:9px} .twr-ic{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .twr-ic:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .twr-ic .n{font-size:11.5px;font-weight:500;color:var(--mut)} .twr-ic .v{font:600 16px var(--font-b);margin:3px 0 1px} .twr-ic .ch{font-size:12px;font-weight:600} .twr-gauge{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-top:11px;padding:15px;text-align:center} .twr-gauge .twr-h4{justify-content:center} .twr-gauge svg{max-width:165px} .twr-gauge .needle{transform-origin:85px 85px;transition:transform 1.4s var(--ease)} .twr-gval{font:700 28px var(--font-b);margin-top:-4px} .twr-gsub{font-size:11px;color:var(--mut-2)} /* Fear & Greed mini — promoted to the top-of-page snapshot box */ .twr-fngmini{margin-top:11px;padding-top:11px;border-top:1px solid var(--line)} .twr-fngmini .fm-top{display:flex;align-items:baseline;gap:8px;margin-bottom:7px} .twr-fngmini .fm-lbl{font:600 10.5px var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--mut)} .twr-fngmini .fm-lab{font:500 11px var(--font-b);color:var(--mut-2)} .twr-fngmini .fm-top b{margin-left:auto;font:700 17px var(--font-b)} .twr-fngmini .fm-bar{position:relative;height:7px;border-radius:4px; background:linear-gradient(90deg,#DC2626 0 25%,#F59E0B 25% 55%,#16A34A 55% 100%);opacity:.92} .twr-fngmini .fm-pin{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%; background:var(--txt);border:2.5px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.35); transform:translate(-50%,-50%);transition:left 1.2s var(--ease)} /* Market Pulse — breadth mini-widget (dock) */ .twr-pulsebox .pulse-nums{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px} .twr-pulsebox .pulse-bar{height:9px;border-radius:5px;background:var(--down-bg);overflow:hidden;position:relative} .twr-pulsebox .pulse-bar::after{content:'';position:absolute;inset:0;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line)} .twr-pulsebox .pulse-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--up),#34D399); border-radius:5px 0 0 5px;transition:width 1.1s var(--ease)} .twr-pulsebox .pulse-cap{font-size:10.5px;color:var(--mut-2);margin:6px 0 4px} .twr-pulse-more{display:block;font:600 12px var(--font-b);color:var(--brand);padding-top:10px;margin-top:8px;border-top:1px solid var(--soft-2)} .twr-pulse-more:hover{text-decoration:underline} /* Day-range position pill (trending / movers rows) — where the price sits in today's low–high band. */ .twr-rng{position:relative;width:42px;height:4px;border-radius:2px;flex-shrink:0; background:linear-gradient(90deg,var(--down),var(--amber) 50%,var(--up));opacity:.85} .twr-rng i{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--txt); border:1.5px solid var(--paper);transform:translate(-50%,-50%)} /* ---------- Section headers ---------- */ .twr-sh{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px;gap:12px} .twr-sh h2{font-family:var(--font-s);font-size:23px;font-weight:600;letter-spacing:-.01em; display:flex;align-items:center;gap:11px;margin:0} .twr-sh h2::before{content:'';width:4px;height:20px;background:var(--brand);border-radius:2px;flex-shrink:0;align-self:center} .twr-sh a{font:500 13px var(--font-b);color:var(--brand);white-space:nowrap} /* ---------- ⑥ Market board ---------- */ .twr-board{padding:6px 0 36px} .twr-tabs{display:flex;gap:7px;margin-bottom:15px;flex-wrap:wrap} .twr-tab{font:500 13px var(--font-b);padding:8px 16px;border-radius:8px;border:1px solid var(--line); color:var(--mut);background:transparent;cursor:pointer;transition:all .2s var(--ease)} .twr-tab:hover{border-color:var(--brand);color:var(--brand)} .twr-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600} [data-theme="dark"] .twr-tab.on{background:var(--brand);border-color:var(--brand)} .twr-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:13px} .twr-mc{border:1px solid var(--line);border-radius:11px;padding:14px 15px;background:var(--card); position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .twr-mc:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .twr-mc .s{font:600 12px var(--font-b);color:var(--mut)} .twr-mc .nm{font-size:11px;color:var(--mut-2);margin-bottom:8px} .twr-mc .pv{font:600 16.5px var(--font-b)} .twr-mc .pc{font-size:12px;font-weight:600;margin-top:2px} .twr-mc svg{margin-top:10px;width:100%;height:28px} .twr-star{position:absolute;top:9px;right:11px;background:none;border:none;cursor:pointer; font-size:14px;color:var(--line-2);transition:color .2s,transform .2s var(--ease);padding:2px;line-height:1} .twr-star:hover{transform:scale(1.2)} .twr-star.on{color:var(--gold)} /* ---------- ⑦⑧ River + Dock ---------- */ .twr-split{display:grid;grid-template-columns:1fr 350px;gap:30px;padding:6px 0 40px;align-items:start} .twr-story{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)} .twr-story:last-of-type{border-bottom:none} .twr-story .twr-thumb{width:158px;height:100px;border-radius:10px;flex-shrink:0;overflow:hidden;background:var(--soft-2);display:block} .twr-story .twr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .twr-story:hover .twr-thumb img{transform:scale(1.05)} .twr-story h3{font-family:var(--font-s);font-size:18px;font-weight:600;line-height:1.32;margin:7px 0 6px} .twr-story h3 a:hover{color:var(--brand)} .twr-story p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0} .twr-smeta{font-size:12px;color:var(--mut-2);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap;font-weight:400} .twr-smeta .tk{color:var(--up);font-weight:500} .twr-loadmore{margin-top:20px;text-align:center} .twr-dock{position:sticky;top:82px} .twr-dock>div{border:1px solid var(--line);border-radius:12px;padding:16px 17px;margin-bottom:15px;background:var(--card)} .twr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0; border-bottom:1px solid var(--soft-2);font-size:13px;gap:8px} .twr-row:last-child{border:none;padding-bottom:0} .twr-row .tk{font-weight:600;min-width:52px} .twr-row .tn{color:var(--mut-2);font-size:11px;display:block;font-weight:400;max-width:110px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .twr-row .pr{font-weight:500;margin-left:auto} /* Inline sparkline in trending/movers rows — shape at a glance, real series only. */ .twr-rspark{width:46px;height:18px;flex:0 0 46px;display:block;opacity:.85} .twr-rspark svg{width:100%;height:100%;display:block;overflow:visible} .twr-row .pct{font-weight:600;font-size:12.5px;min-width:62px;text-align:right} .twr-cal-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--soft-2);font-size:12.5px} .twr-cal-row:last-child{border:none} .twr-cal-t{font-weight:600;min-width:52px} .twr-imp{width:7px;height:7px;border-radius:50%;flex-shrink:0} .twr-dock .twr-wl{background:linear-gradient(135deg,var(--ink) 25%,#14124B);color:#fff;border:none} .twr-dock .twr-wl .twr-h4{color:#9FB2C8} .twr-dock .twr-wl .twr-h4::before{background:#7B78FF} .twr-dock .twr-wl p{font-size:13px;line-height:1.55;color:#C7D2E0;margin:0 0 4px} .twr-dock .twr-wl b{color:#fff;font-weight:600} .twr-dock .twr-wl .twr-row{border-color:rgba(255,255,255,.09);color:#E7EDF5} /* ---------- ⑨ Tools strip ---------- */ .twr-tools-strip{background:var(--soft);padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .twr-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px} .twr-tc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 16px;display:block;position:relative; transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s} .twr-tc-new{position:absolute;top:10px;right:10px;font:700 8.5px var(--font-b);letter-spacing:.9px; background:var(--brand);color:#fff;padding:2.5px 6px;border-radius:4px;animation:twr-pulse 2s infinite} .twr-tc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)} .twr-tc .em{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:19px;margin-bottom:11px;background:var(--brand-t)} .twr-tc h5{font:600 13.5px var(--font-b);margin:0 0 4px;color:var(--txt)} .twr-tc p{font-size:11.5px;color:var(--mut-2);line-height:1.45;margin:0;font-weight:400} /* ---------- ⑩ Heatmap ---------- */ .twr-heat{padding:36px 0} .twr-hgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:52px;gap:4px} .twr-h{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff; border-radius:6px;transition:transform .2s var(--ease),filter .2s;cursor:default;overflow:hidden} .twr-h:hover{transform:scale(1.04);filter:brightness(1.1);z-index:2} .twr-h b{font:600 12.5px var(--font-b)} .twr-h span{font-size:10.5px;font-weight:500;opacity:.92} /* ---------- ⑪ Rails ---------- */ .twr-rails{padding:4px 0 40px} .twr-rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .twr-rail{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card); transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .twr-rail:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .twr-rail .rh{padding:12px 16px;color:#fff;font:600 12px var(--font-b);letter-spacing:.5px; display:flex;justify-content:space-between;align-items:center;text-transform:uppercase} .twr-rail .rh a{color:#fff} .twr-rail .rh span{font:400 11px var(--font-b);opacity:.85;text-transform:none} .twr-rail ul{list-style:none;padding:5px 16px 11px;margin:0} .twr-rail li{font:500 13.5px var(--font-b);line-height:1.42;padding:10px 0;border-bottom:1px solid var(--soft-2)} .twr-rail li:last-child{border:none} .twr-rail li a:hover{color:var(--brand)} .twr-rail li small{display:block;font-size:11px;color:var(--mut-2);font-weight:400;margin-top:3px} /* ---------- ⑬ Footer ---------- */ .twr-footer{background:var(--ink);color:#93A1B5;padding:42px 0 0;margin-top:0} [data-theme="dark"] .twr-footer{background:#070B13} .twr-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px} .twr-fgrid h5{font:600 11.5px var(--font-b);letter-spacing:1.3px;color:#fff;margin:0 0 13px;text-transform:uppercase} .twr-fgrid a{display:block;font:400 13px var(--font-b);padding:4.5px 0;color:#93A1B5} .twr-fgrid a:hover{color:#A5B4FC} .twr-flogo{height:28px;width:auto;display:block} .twr-fgrid .fp{font-size:13px;line-height:1.65;margin-top:12px;max-width:290px;font-weight:400} .twr-legal{border-top:1px solid #1D2B44;padding:16px 0 22px;font-size:11.5px;color:#5F6E84;line-height:1.6} /* ---------- Single article (content + live sidebar) ---------- */ .twr-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--brand),#7B78FF); width:0;z-index:100;transition:width .1s linear} .twr-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start;padding-top:34px;padding-bottom:12px} .twr-article-main{min-width:0} .twr-article-head .twr-chip{margin-bottom:14px} .twr-article-head h1{font-family:var(--font-s);font-size:clamp(28px,3.4vw,40px);line-height:1.16; letter-spacing:-.015em;margin:10px 0 14px;font-weight:700;max-width:850px} .twr-article-head .twr-dek{font-size:18px;color:var(--mut);line-height:1.6;margin:0 0 16px;max-width:800px;font-weight:400} .twr-article-media{margin:24px 0 6px} .twr-article-media img{width:100%;border-radius:12px} .twr-article-media figcaption{font-size:12px;color:var(--mut-2);margin-top:8px} .twr-prose{font-size:17px;line-height:1.75;font-weight:400;max-width:800px} .twr-prose>*{max-width:100%} .twr-prose h2{font-family:var(--font-s);font-size:26px;font-weight:600;margin:1.5em 0 .55em} .twr-prose h3{font-family:var(--font-s);font-size:20.5px;font-weight:600;margin:1.35em 0 .5em} .twr-prose p{margin:0 0 1.25em} .twr-prose strong{font-weight:600} .twr-prose a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(27,23,255,.3);text-underline-offset:3px} .twr-prose a:hover{text-decoration-color:var(--brand)} .twr-prose img{border-radius:10px} .twr-prose blockquote{border-left:3px solid var(--brand);margin:1.5em 0;padding:.35em 0 .35em 1.2em; font-family:var(--font-s);font-size:1.08em;color:var(--mut);font-style:normal} .twr-prose ul,.twr-prose ol{padding-left:1.4em;margin:0 0 1.25em} .twr-prose li{margin-bottom:.45em} .twr-prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0;display:block;overflow-x:auto} .twr-prose th,.twr-prose td{border:1px solid var(--line);padding:9px 13px;text-align:left} .twr-prose th{background:var(--soft);font-weight:600} .twr-prose code{background:var(--soft-2);border-radius:5px;padding:2px 6px;font-size:.88em} /* [highlight]…[/highlight] → yellow marker effect */ .twr-hl,.twr-prose mark{background:linear-gradient(180deg,transparent 42%,#FDE68A 42%);color:inherit; padding:0 3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone} [data-theme="dark"] .twr-hl,[data-theme="dark"] .twr-prose mark{background:linear-gradient(180deg,transparent 42%,rgba(202,138,4,.55) 42%)} .twr-page-prose{max-width:900px;margin:0 auto;padding:8px 24px 46px} .twr-takeaways{background:var(--brand-t);border:1px solid var(--brand);border-left-width:4px;border-radius:11px; padding:18px 20px;margin:0 0 1.5em} .twr-takeaways h2,.twr-takeaways h3{font:600 12px var(--font-b);margin:0 0 9px;letter-spacing:1px;text-transform:uppercase; color:var(--brand);display:flex;align-items:center;gap:7px} .twr-takeaways ul{margin:0;padding-left:1.2em} .twr-takeaways li{font-size:15px;margin-bottom:.5em} .twr-source-credit{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:13px 17px; font-size:13px;color:var(--mut);margin:1.5em 0} .twr-toc{background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:16px 20px;margin:0 0 1.7em;font-size:14px} .twr-toc strong{display:block;font:600 11px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);margin-bottom:9px} .twr-toc ol{margin:0;padding-left:1.3em} .twr-toc li{margin-bottom:.3em} .twr-toc a{color:var(--txt);text-decoration:none;font-weight:400} .twr-toc a:hover{color:var(--brand)} .twr-share{display:flex;gap:9px;align-items:center;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap} .twr-share span{font:600 11px var(--font-b);letter-spacing:1.1px;color:var(--mut);text-transform:uppercase} .twr-share a{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;display:inline-flex; align-items:center;justify-content:center;transition:all .2s var(--ease);color:var(--mut);font-size:13px} .twr-share a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)} .twr-share a svg{width:15px;height:15px} .twr-authorbox{display:flex;gap:15px;background:var(--soft);border:1px solid var(--line);border-radius:12px; padding:18px;margin:26px 0} .twr-authorbox .twr-ava{width:52px;height:52px;border-radius:50%;flex-shrink:0;overflow:hidden; background:linear-gradient(135deg,var(--brand),var(--teal))} .twr-authorbox .twr-ava img{width:100%;height:100%;object-fit:cover} .twr-authorbox h4{font:600 15.5px var(--font-b);margin:0 0 4px} .twr-authorbox p{margin:0;font-size:13px;color:var(--mut);line-height:1.55;font-weight:400} .twr-sidebar{position:sticky;top:82px} .twr-sidebar>div{border:1px solid var(--line);border-radius:12px;padding:16px 17px;margin-bottom:15px;background:var(--card)} .twr-related{padding:8px 0 42px} .twr-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px} .twr-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden; transition:transform .22s var(--ease),box-shadow .22s var(--ease)} .twr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .twr-card .cimg{height:150px;background:var(--soft-2);display:block;overflow:hidden} .twr-card .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .twr-card:hover .cimg img{transform:scale(1.05)} .twr-card .cbody{padding:14px 16px 16px} .twr-card h3{font-family:var(--font-s);font-size:16px;line-height:1.35;margin:8px 0 6px;font-weight:600} .twr-card h3 a:hover{color:var(--brand)} .twr-card .cmeta{font-size:11.5px;color:var(--mut-2);font-weight:400} .twr-rating{margin:24px 0 6px;text-align:center;padding:18px;background:var(--soft);border:1px solid var(--line);border-radius:12px} .twr-rating .lbl{font:600 11.5px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:9px} .twr-rating .stars button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--line-2); transition:color .15s,transform .15s var(--ease);padding:2px 4px;line-height:1} .twr-rating .stars button:hover,.twr-rating .stars button.hot{color:var(--gold);transform:scale(1.12)} .twr-rating .thanks{font-size:13px;color:var(--up);font-weight:500;margin-top:8px} .twr-rating .count{font-size:11.5px;color:var(--mut-2);margin-top:6px} /* ---------- Archive ---------- */ .twr-archive-head{padding:32px 0 6px} .twr-archive-head h1{font-family:var(--font-s);font-size:clamp(26px,3.2vw,34px);font-weight:700; display:flex;align-items:center;gap:13px} .twr-archive-head h1::before{content:'';width:5px;height:28px;background:var(--brand);border-radius:3px} .twr-archive-head p{color:var(--mut);margin:4px 0 0;max-width:640px;font-weight:400} .twr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;padding:24px 0 44px} .twr-pagination{display:flex;gap:7px;justify-content:center;padding:0 0 44px} .twr-pagination .page-numbers{border:1px solid var(--line);border-radius:8px;padding:8px 13px; font:500 13px var(--font-b);color:var(--mut)} .twr-pagination .page-numbers.current,.twr-pagination .page-numbers:hover{background:var(--brand);color:#fff;border-color:var(--brand)} /* ---------- Pages / calculators ---------- */ .twr-page-full{max-width:var(--maxw);margin:0 auto;padding:34px 24px 48px} /* Tool page: product layout, left aligned, calculator first. The old layout put the whole page in a 900px centred column with an intro paragraph above the tool, so the calculator sat low and off-centre against the full-width header. Now the title and the tool start at the same left edge, the tool spans the working width, and the reading matter below keeps a comfortable measure rather than stretching to the full grid. */ .twr-toolwrap{padding:4px 24px 50px} .twr-tool-title{font-family:var(--font-s);font-size:clamp(27px,3.3vw,38px);font-weight:700; line-height:1.16;letter-spacing:-.015em;margin:8px 0 20px} .twr-tool-prose{max-width:none} .twr-tool-prose>*{max-width:880px} .twr-tool-prose>.twr-calc{max-width:1120px;margin:0 0 32px} .twr-tool-prose>.twr-tool-links{max-width:1120px} .twr-tool-prose>h2{margin-top:1.7em} /* First element after the calculator is the intro line: give it a touch more presence, it is the page's dek now that it sits below the tool. */ .twr-tool-prose>.twr-calc+p{font-size:17.5px;color:var(--mut);line-height:1.7} @media (max-width:1080px){ .twr-tool-prose>.twr-calc,.twr-tool-prose>.twr-tool-links{max-width:none} } @media (max-width:760px){ .twr-toolwrap{padding:2px 18px 40px} .twr-tool-title{margin:4px 0 14px} .twr-tool-prose>.twr-calc{margin-bottom:24px} .twr-tool-prose>.twr-calc+p{font-size:16px} } /* Calculator shell: inputs on the left, result + donut + line on the right. */ .twr-calc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); padding:24px;margin:24px 0;display:grid;grid-template-columns:1.02fr 1fr;gap:26px;align-items:start;overflow:hidden} .tw-skel-note{grid-column:1/-1;color:var(--mut-2);font-size:13.5px;padding:18px 2px} .twr-calc.tw-conv,.twr-calc.twr-breadth{display:block} /* Inputs column */ .tw-inputs{display:flex;flex-direction:column;gap:2px} .tw-curbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px; padding-bottom:14px;border-bottom:1px solid var(--line)} .tw-curbar label{font:600 11px var(--font-b);letter-spacing:.6px;text-transform:uppercase;color:var(--mut-2)} .tw-curbar select{border:1px solid var(--line);border-radius:9px;background:var(--soft); padding:8px 12px;font:600 13.5px var(--font-b);color:var(--txt);cursor:pointer;outline:none} .tw-curbar select:focus{border-color:var(--brand)} .tw-field{margin-bottom:20px} .tw-field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px} .tw-field-top label{font:500 13.5px var(--font-b);color:var(--mut);line-height:1.3} /* Editable value box (type OR use the slider) */ .tw-box{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:9px; background:var(--soft);padding:6px 10px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);min-width:96px} .tw-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t)} [data-theme="dark"] .tw-box:focus-within{box-shadow:0 0 0 3px rgba(123,120,255,.18)} .tw-box .tw-pre,.tw-box .tw-post{font:600 14px var(--font-b);color:var(--mut-2);flex:0 0 auto} .tw-num-in{border:0;background:transparent;outline:none;width:100%;min-width:52px;text-align:right; font:700 15.5px var(--font-b);color:var(--txt);font-variant-numeric:tabular-nums} .tw-box.is-cur .tw-num-in{text-align:right} .tw-num-in::-webkit-outer-spin-button,.tw-num-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Slider — draggable, with a brand-filled track */ .tw-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;margin:2px 0 0;cursor:pointer; background:linear-gradient(90deg,var(--brand) 0 var(--fill,50%),var(--soft-2) var(--fill,50%) 100%)} .tw-slider:focus{outline:none} .tw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:#fff;border:3px solid var(--brand);box-shadow:0 1px 4px rgba(10,20,40,.28);cursor:grab;margin-top:-7px;transition:transform .12s var(--ease)} .tw-slider:active::-webkit-slider-thumb{transform:scale(1.14);cursor:grabbing} .tw-slider::-webkit-slider-runnable-track{height:6px;border-radius:6px} .tw-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--brand-t)} .tw-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand); box-shadow:0 1px 4px rgba(10,20,40,.28);cursor:grab} .tw-slider::-moz-range-track{height:6px;border-radius:6px;background:var(--soft-2)} .tw-slider::-moz-range-progress{height:6px;border-radius:6px;background:var(--brand)} /* Result column */ .tw-output{display:flex;flex-direction:column;gap:16px;min-width:0} .tw-result{background:linear-gradient(140deg,var(--ink),#14124B);border-radius:14px;color:#fff;padding:22px 22px 20px;text-align:center} [data-theme="dark"] .tw-result{background:linear-gradient(140deg,#0E1524,#191552);border:1px solid var(--line)} .tw-r-label{font:600 10.5px var(--font-b);letter-spacing:1.4px;color:#9FB2C8;text-transform:uppercase} .tw-r-value{font:700 clamp(27px,3.4vw,40px) var(--font-b);color:#A5B4FC;margin:6px 0 2px;font-variant-numeric:tabular-nums;line-height:1.05;word-break:break-word} .tw-r-value.tw-loading{opacity:.45} .tw-r-sub{font-size:13px;color:#C7D2E0;font-weight:400} @keyframes tw-pop{0%{transform:scale(.965);opacity:.55}100%{transform:scale(1);opacity:1}} .tw-pop{animation:tw-pop .34s var(--ease)} /* Donut */ .tw-visual{display:flex;flex-direction:column;gap:14px} .tw-donutwrap{position:relative;width:150px;height:150px;margin:2px auto 0} .tw-donut{width:150px;height:150px;transform:rotate(-90deg)} .tw-donut circle{fill:none;stroke-width:15} .tw-seg-bg{stroke:var(--soft-2)} .tw-seg{transition:stroke-dasharray .5s var(--ease),stroke-dashoffset .5s var(--ease)} .tw-seg-a{stroke:var(--brand)}.tw-dot-a{background:var(--brand)} .tw-seg-b{stroke:var(--up)}.tw-dot-b{background:var(--up)} .tw-seg-c{stroke:var(--down)}.tw-dot-c{background:var(--down)} .tw-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .tw-donut-c span{font:600 9.5px var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--mut-2)} .tw-donut-c b{font:700 17px var(--font-b);color:var(--txt);font-variant-numeric:tabular-nums;margin-top:2px} .tw-legend{display:flex;flex-direction:column;gap:8px} .tw-leg{display:flex;align-items:center;gap:9px;font-size:13px} .tw-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .tw-leg-k{color:var(--mut);font-weight:500} .tw-leg-v{margin-left:auto;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums} .tw-leg-v em{color:var(--mut-2);font-style:normal;font-weight:500;font-size:11.5px;margin-left:3px} /* Growth line */ .tw-line-wrap{border:1px solid var(--line);border-radius:11px;padding:12px 12px 6px;background:var(--card-2)} .tw-line-lbl{font:600 10.5px var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--mut-2);margin-bottom:4px} .tw-line{width:100%;height:120px;display:block;overflow:visible} /* Breakdown rows */ .tw-rows{display:flex;flex-direction:column} .tw-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--mut); border-top:1px solid var(--line);padding:10px 0;font-weight:400} .tw-row:first-child{border-top:0} .tw-row b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;text-align:right} /* Currency converter */ .tw-conv .tw-conv-in{max-width:560px} .tw-conv .tw-field{margin-bottom:16px} .tw-conv .tw-box{width:100%;padding:11px 14px} .tw-conv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end} .tw-conv-sel select{width:100%;border:1.5px solid var(--line);border-radius:9px;background:var(--soft); padding:12px 12px;font:600 14px var(--font-b);color:var(--txt);outline:none;cursor:pointer} .tw-conv-sel select:focus{border-color:var(--brand)} .tw-swap{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--card); color:var(--brand);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:1px; transition:transform .3s var(--ease),border-color .18s,background .18s;flex:0 0 auto} .tw-swap:hover{border-color:var(--brand);background:var(--brand-t);transform:rotate(180deg)} [data-theme="dark"] .tw-swap:hover{background:rgba(123,120,255,.12)} .tw-swap svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tw-conv-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .tw-chip{border:1px solid var(--line);background:var(--soft);border-radius:20px;padding:6px 13px; font:600 12.5px var(--font-b);color:var(--mut);cursor:pointer;transition:all .16s var(--ease)} .tw-chip:hover{border-color:var(--brand);color:var(--brand)} .tw-conv-note{font-size:12px;color:var(--mut-2);line-height:1.6;margin:16px 0 0;font-weight:400} .tw-conv-result{margin-bottom:14px} .tw-conv-rate{border:1px solid var(--line);border-radius:11px;padding:6px 16px;background:var(--card-2);max-width:560px} .tw-rate-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mut); padding:11px 0;border-bottom:1px solid var(--line)} .tw-rate-row b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums} .tw-rate-date{font-size:11.5px;color:var(--mut-2);padding:8px 0 4px;text-align:right} /* Formula callout on tool pages */ .twr-formula{background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--brand); border-radius:11px;padding:16px 18px;margin:16px 0 20px} .twr-formula code{display:block;font:600 clamp(15px,2.4vw,19px) var(--font-b);color:var(--txt); letter-spacing:.2px;overflow-x:auto;white-space:nowrap;padding-bottom:2px} .twr-formula-keys{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px} .twr-formula-keys li{font-size:13px;color:var(--mut);position:relative;padding-left:14px} .twr-formula-keys li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand)} .twr-tool-disc{font-size:13px;color:var(--mut-2);border-top:1px solid var(--line);padding-top:16px;margin-top:26px} .twr-faq{margin:32px 0} .twr-faq h2{font-family:var(--font-s);font-weight:600} .twr-faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;background:var(--card);overflow:hidden} .twr-faq summary{cursor:pointer;padding:14px 18px;font:500 15px var(--font-b);list-style:none;position:relative} .twr-faq summary::after{content:'+';position:absolute;right:18px;font-size:18px;color:var(--brand);transition:transform .22s var(--ease)} .twr-faq details[open] summary::after{transform:rotate(45deg)} .twr-faq details p{padding:0 18px 15px;margin:0;color:var(--mut);font-size:14.5px;line-height:1.65;font-weight:400} /* ---------- Search & 404 ---------- */ .twr-notfound{text-align:center;padding:76px 24px 86px;max-width:640px;margin:0 auto} .twr-notfound .code{font:700 84px var(--font-s);background:linear-gradient(120deg,var(--brand),#7B78FF); -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .twr-notfound p{color:var(--mut)} /* ---------- Back to top ---------- */ .twr-top{position:fixed;bottom:24px;right:24px;width:42px;height:42px;border-radius:11px;background:var(--ink); color:#fff;border:none;cursor:pointer;font-size:16px;opacity:0;visibility:hidden;transform:translateY(10px); transition:all .3s var(--ease);z-index:80;box-shadow:var(--shadow-lg)} .twr-top.show{opacity:1;visibility:visible;transform:none} .twr-top:hover{background:var(--brand)} /* A calm, honest empty state. Never blame the reader or expose plumbing. */ .twr-softempty{color:var(--mut);font-size:13.5px;line-height:1.6;margin:0;padding:10px 0} /* ---------- Skeleton ---------- */ @keyframes twr-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} .twr-skel{background:linear-gradient(90deg,var(--soft) 25%,var(--soft-2) 37%,var(--soft) 63%); background-size:400px 100%;animation:twr-shimmer 1.4s infinite;border-radius:8px;color:transparent!important} /* Any customizer logo that sneaks in gets constrained hard. */ .twr-logo .custom-logo-link{display:block} .twr-logo .custom-logo{max-height:34px!important;width:auto!important;max-width:220px;object-fit:contain} /* ========================================================================== TOOLS HUB — command-center look ========================================================================== */ /* Clean, light editorial header (replaces the old dark-blue gradient box). */ .twr-hub-hero{background:var(--paper);color:var(--txt);padding:44px 0 30px;border-bottom:1px solid var(--line)} .twr-hub-hero .twr-wrap{position:relative} .twr-hub-hero .hh-kicker{font:600 11px var(--font-b);letter-spacing:2.2px;color:var(--brand);margin:0 0 10px} .twr-hub-hero h1{color:var(--txt);font-size:clamp(28px,3.6vw,44px);max-width:720px;margin:0 0 12px} .twr-hub-hero .hh-sub{color:var(--mut);font-size:15.5px;line-height:1.65;max-width:660px;margin:0 0 22px;font-weight:400} .hh-search{display:flex;align-items:center;gap:10px;background:var(--soft);border:1.5px solid var(--line); border-radius:12px;padding:4px 4px 4px 16px;max-width:540px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} .hh-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t)} [data-theme="dark"] .hh-search:focus-within{box-shadow:0 0 0 3px rgba(123,120,255,.18)} .hh-search .twr-ico{color:var(--mut-2);flex-shrink:0} .hh-search input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font:400 15px var(--font-b);padding:12px 0} .hh-search input::placeholder{color:var(--mut-2)} .hh-badges{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:18px} .hh-badges span{font:500 12.5px var(--font-b);color:var(--mut)} .twr-hub-body{padding-bottom:52px} .twr-hub-chips{display:flex;gap:8px;flex-wrap:wrap;padding:26px 0 20px} .twr-hubchip{font:500 13px var(--font-b);padding:8px 17px;border-radius:99px;border:1px solid var(--line); color:var(--mut);background:var(--card);cursor:pointer;transition:all .22s var(--ease)} .twr-hubchip:hover{border-color:var(--brand);color:var(--brand)} .twr-hubchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .twr-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .twr-hubcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 21px 18px; display:flex;flex-direction:column;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .twr-hubcard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--brand),#7B78FF);opacity:0;transition:opacity .25s} .twr-hubcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)} .twr-hubcard:hover::before{opacity:1} .hc-new{position:absolute;top:14px;right:14px;font:700 9px var(--font-b);letter-spacing:1px; background:var(--brand);color:#fff;padding:3px 8px;border-radius:5px;animation:twr-pulse 2s infinite} .hc-em{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-size:23px;background:var(--brand-t);margin-bottom:13px} .twr-hubcard h3{font:600 17px var(--font-b);margin:0 0 6px;color:var(--txt)} .twr-hubcard p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0 0 10px;font-weight:400} .hc-diff{font-size:12.5px!important;color:var(--mut-2)!important;background:var(--soft);border-radius:8px; padding:8px 11px!important;margin:auto 0 12px!important} .hc-diff b{color:var(--brand);font-weight:600} .hc-cta{font:600 13px var(--font-b);color:var(--brand)} .twr-hub-guide{margin-top:44px} .hg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px} .hg-item{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px} .hg-item h4{font:600 15px var(--font-s);margin:0 0 7px} .hg-item p{font-size:13.5px;color:var(--mut);line-height:1.6;margin:0;font-weight:400} .hg-item a{color:var(--brand);font-weight:500;text-decoration:underline;text-decoration-color:rgba(27,23,255,.3);text-underline-offset:3px} .hg-foot{font-size:13.5px;color:var(--mut);margin-top:16px} .hg-foot a{color:var(--brand);font-weight:500} /* ---------- Index Movers (breadth) tool ---------- */ .twr-breadth{display:block} .twr-breadth .tb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px} .twr-breadth .tb-tabs{margin:0} .twr-breadth .tb-updated{margin-left:auto;font:500 11.5px var(--font-b);color:var(--mut-2)} .tb-score{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px} .tb-n{text-align:center;min-width:86px} .tb-n b{display:block;font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1} .tb-n span{font:600 10.5px var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--mut-2)} .tb-idxname{flex:1;text-align:center;font:600 16px var(--font-b)} .tb-idxname small{display:block;font:400 11.5px var(--font-b);color:var(--mut-2);margin-top:3px} .tb-bar{height:12px;border-radius:7px;background:var(--down-bg);overflow:hidden;position:relative;margin-bottom:10px} .tb-bar::after{content:'';position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line)} .tb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--up),#34D399);border-radius:7px 0 0 7px;transition:width 1.1s var(--ease)} .tb-verdict{font:500 14px var(--font-b);color:var(--mut);text-align:center;margin-bottom:20px} .tb-lists{display:grid;grid-template-columns:1fr 1fr;gap:18px} .tb-col h4{font:600 11px var(--font-b);letter-spacing:1.2px;text-transform:uppercase;margin:0 0 10px;display:flex;align-items:center;gap:7px} .tb-col-up h4{color:var(--up)}.tb-col-up h4::before{content:'▲'} .tb-col-down h4{color:var(--down)}.tb-col-down h4::before{content:'▼'} .tb-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--soft-2);font-size:13px} .tb-row:last-child{border:none} .tb-sym{font-weight:600;min-width:52px} .tb-track{flex:1;height:7px;border-radius:4px;background:var(--soft-2);overflow:hidden} .tb-track i{display:block;height:100%;border-radius:4px;transition:width .9s var(--ease)} .tb-track i.u{background:var(--up)}.tb-track i.d{background:var(--down)} .tb-row b{min-width:64px;text-align:right;font-variant-numeric:tabular-nums} .tb-note{font-size:12px;color:var(--mut-2);line-height:1.6;margin:20px 0 0;font-weight:400} .tb-empty{font-size:13px;color:var(--mut);margin:6px 0} /* ---------- "More free tools" cross-links (every tool page) ---------- */ .twr-tool-links{margin-top:40px;padding-top:8px} .twr-tool-links h2{font-family:var(--font-s);font-weight:600} .twr-tool-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0 18px} .twr-tool-links-grid a{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line); border-radius:11px;padding:13px 15px;text-decoration:none!important;transition:transform .2s var(--ease),border-color .2s} .twr-tool-links-grid a:hover{transform:translateY(-2px);border-color:var(--brand)} .twr-tool-links-grid .em{font-size:20px;flex-shrink:0} .twr-tool-links-grid b{display:block;font:600 14px var(--font-b);color:var(--txt);margin-bottom:2px} .twr-tool-links-grid small{font-size:12px;color:var(--mut-2);line-height:1.45;display:block} .twr-tool-links-foot{font-size:13.5px;color:var(--mut)} .twr-tool-links-foot a{color:var(--brand)} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1200px){ .twr-hero3{grid-template-columns:270px minmax(0,1fr) 300px;gap:20px} } @media (max-width:1080px){ .twr-cards{grid-template-columns:repeat(3,1fr)} .twr-rgrid{grid-template-columns:1fr 1fr} .twr-hero3{grid-template-columns:1fr 1fr;gap:20px} .twr-hero3 .twr-lead{order:-1;grid-column:1/-1} .twr-hub-grid{grid-template-columns:1fr 1fr} .twr-hero{grid-template-columns:1fr} .twr-hero .twr-snap{order:-1} .twr-idx{grid-template-columns:repeat(4,1fr)} .twr-gauge{max-width:360px;margin:11px auto 0} .twr-split{grid-template-columns:1fr} .twr-dock{position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px} .twr-dock>div{margin-bottom:0} .twr-article-grid{grid-template-columns:1fr} .twr-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px} .twr-sidebar>div{margin-bottom:0} .twr-related-grid,.twr-grid{grid-template-columns:1fr 1fr} .twr-fgrid{grid-template-columns:1fr 1fr 1fr} } @media (max-width:760px){ body{font-size:16px} .twr-topbar .twr-date{display:none} .twr-nav-in{height:58px;gap:14px} .twr-logo-img{height:25px} .twr-menu{position:fixed;inset:58px 0 0 auto;width:min(320px,86vw);background:var(--card); flex-direction:column;gap:0;padding:14px;border-left:1px solid var(--line);box-shadow:var(--shadow-lg); transform:translateX(100%);transition:transform .32s var(--ease);z-index:90;overflow-y:auto} .twr-menu.open{transform:none} .twr-menu>li>a{padding:13px 10px;display:block;border-bottom:none;font-size:16px} .twr-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none; border:none;padding:0 0 6px 18px;display:none} .twr-menu li.open>.sub-menu{display:block} /* The open menu is z-index 90 and the nav is 50, so the panel covered the burger and there was no way to close it again. Lift the whole actions cluster above the panel, and dim the page behind it so a tap outside also closes. */ .twr-burger{display:inline-flex;position:relative;z-index:95} .twr-nav-actions{position:relative;z-index:95} /* .twr-nav is sticky with z-index 50, which creates its own stacking context: a z-index of 95 on the burger INSIDE it still cannot rise above the scrim. The whole bar has to be lifted while the panel is open, otherwise the close button sits under the dim layer and cannot be tapped. */ body.twr-menu-open .twr-nav{z-index:96} .twr-menu-scrim{position:fixed;inset:0;background:rgba(6,10,20,.5);z-index:88; opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s} body.twr-menu-open .twr-menu-scrim{opacity:1;visibility:visible} body.twr-menu-open{overflow:hidden} .twr-livebtn{display:none} .twr-hero,.twr-hero3{padding:18px 0 24px} .twr-hero3{grid-template-columns:1fr;gap:16px} .twr-hero3 .twr-wirecol{order:1} .twr-lead-media{height:220px} .twr-hero-secs{grid-template-columns:1fr} .twr-idx{grid-template-columns:1fr 1fr} .twr-cards{grid-template-columns:repeat(2,1fr)} .twr-rgrid{grid-template-columns:1fr} .twr-dock,.twr-sidebar{grid-template-columns:1fr} .twr-story .twr-thumb{width:106px;height:76px} .twr-story h3{font-size:15.5px} .wi-src{display:none} .twr-hgrid{grid-template-columns:repeat(6,1fr);grid-auto-rows:46px} .twr-fgrid{grid-template-columns:1fr 1fr} .twr-related-grid,.twr-grid{grid-template-columns:1fr} .twr-calc{grid-template-columns:1fr;gap:22px;padding:20px} .tw-conv-row{grid-template-columns:1fr auto 1fr} .tw-donutwrap,.tw-donut{width:140px;height:140px} .twr-tape{height:38px} .twr-tape-label{padding:0 10px;font-size:9.5px} .twr-breaking time,.bk-item time{display:none} .twr-breaking-tag{padding:0 10px;font-size:9.5px} .twr-breaking .dot{margin:0 8px 0 10px} .bk-item .bk-t{font-size:12.5px;padding-right:12px} /* Breadcrumbs: one swipeable line rather than a wrapped block on a phone. */ .twr-crumbs{padding-top:10px} .twr-crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12px} .twr-crumbs ol::-webkit-scrollbar{display:none} .twr-crumbs li{white-space:nowrap} .twr-crumbs .crumb-now{max-width:22ch} /* News flash: two cards side-by-side on phones (stacked feels endless) */ .nf-stage{min-height:230px} .nf-page{grid-template-rows:1fr;grid-template-columns:1fr 1fr} .nf-img{min-height:92px} .nf-cbody .t{font-size:12px} .twr-lead-nav{justify-content:center} .twr-hub-hero{padding:38px 0 32px} .twr-hub-grid{grid-template-columns:1fr} .hg-grid{grid-template-columns:1fr} .twr-tool-links-grid{grid-template-columns:1fr} .tb-lists{grid-template-columns:1fr} .tb-n{min-width:64px} .twr-rng{display:none} } @media (max-width:400px){ .twr-cards,.twr-tgrid{grid-template-columns:1fr 1fr} } @media print{ .twr-tape,.twr-topbar,.twr-nav,.twr-breaking,.twr-dock,.twr-sidebar,.twr-footer,.twr-top,.twr-share{display:none!important} }