/* ========================================================================== TopStarNetWorth — Homepage stylesheet Loads ONLY on the front page. Mobile-first. Fully scoped to #tsn-home / body.tsn-front so it never affects the rest of the Kadence site. Breakpoints (min-width): 480 · 600 · 680 · 760 · 800 · 860 · 920 ========================================================================== */ /* ---- Design tokens ------------------------------------------------------ */ body.tsn-front{ --paper:#FAF9F6; --paper-2:#F2EFE8; --paper-3:#FFFFFF; --ink:#211E1B; --ink-soft:#5B564D; --ink-faint:#8B8578; --gold:#9C7A3C; --gold-dark:#7A5F2C; --gold-tint:#EFE9DC; --rule:#E4E0D6; --tsn-display:'Playfair Display', Georgia, 'Times New Roman', serif; --tsn-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --tsn-ease:cubic-bezier(.22,.61,.36,1); margin:0; background:var(--paper); color:var(--ink); font-family:var(--tsn-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---- Base primitives (scoped) ------------------------------------------ */ #tsn-home, #tsn-home *{ box-sizing:border-box; } #tsn-home{ font-family:var(--tsn-body); color:var(--ink); } #tsn-home a{ color:inherit; text-decoration:none; } #tsn-home img{ max-width:100%; height:auto; display:block; } #tsn-home h1,#tsn-home h2,#tsn-home h3,#tsn-home h4,#tsn-home h5{ margin:0; } #tsn-home :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .tsn-skip{ position:absolute; left:-9999px; top:0; z-index:100; background:#211E1B; color:#fff; padding:10px 16px; border-radius:0 0 6px 0; font-family:var(--tsn-body,sans-serif); font-size:14px; } .tsn-skip:focus{ left:0; } #tsn-home .tsn-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 18px; } /* ---- Scroll-reveal (only hides when JS is available) -------------------- */ html.tsn-js #tsn-home .tsn-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--tsn-ease), transform .7s var(--tsn-ease); } html.tsn-js #tsn-home .tsn-reveal.tsn-visible{ opacity:1; transform:none; } #tsn-home .tsn-d1{ transition-delay:.08s; } #tsn-home .tsn-d2{ transition-delay:.16s; } #tsn-home .tsn-d3{ transition-delay:.24s; } #tsn-home .tsn-d4{ transition-delay:.32s; } /* ========================================================================== 1 · HEADER (mobile-first: hamburger + drop-down nav) ========================================================================== */ #tsn-home .tsn-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--rule); transition:box-shadow .3s ease, background .3s ease; } #tsn-home .tsn-header.tsn-scrolled{ box-shadow:0 6px 24px -14px rgba(33,30,27,.4); } /* Offset the sticky header only when the admin bar is actually fixed (>782px). On phones the admin bar is not fixed, so no offset is needed. */ @media (min-width:783px){ body.tsn-front.admin-bar #tsn-home .tsn-header{ top:32px; } } #tsn-home .tsn-header .tsn-wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; } #tsn-home .tsn-logo{ display:flex; align-items:baseline; gap:8px; line-height:1; } #tsn-home .tsn-mark{ font-family:var(--tsn-display); font-weight:700; font-size:23px; letter-spacing:.01em; } #tsn-home .tsn-mark b{ color:var(--gold-dark); } #tsn-home .tsn-sub{ font-size:9.5px; font-weight:600; letter-spacing:.16em; color:var(--gold-dark); text-transform:uppercase; } #tsn-home .tsn-logo{ align-items:center; } #tsn-home .tsn-logo-img{ display:block; height:38px; width:auto; max-height:38px; max-width:300px; } /* Nav — mobile drop-down panel */ #tsn-home .tsn-nav{ position:absolute; top:100%; left:0; right:0; z-index:49; background:var(--paper); border-bottom:1px solid var(--rule); max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--tsn-ease), visibility .35s var(--tsn-ease); } #tsn-home .tsn-nav.tsn-open{ max-height:70vh; overflow-y:auto; visibility:visible; } #tsn-home .tsn-nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } #tsn-home .tsn-nav-list a{ display:flex; align-items:center; min-height:44px; padding:14px 18px; border-top:1px solid var(--rule); font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s ease, background .2s ease; } #tsn-home .tsn-nav-list a:hover, #tsn-home .tsn-nav-list a:focus-visible{ color:var(--ink); background:var(--paper-2); } /* Header tools */ #tsn-home .tsn-head-tools{ display:flex; align-items:center; gap:10px; } #tsn-home .tsn-icon-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:border-color .2s ease, color .2s ease, transform .2s ease; } #tsn-home .tsn-icon-btn:hover{ border-color:var(--gold); color:var(--gold-dark); transform:translateY(-1px); } #tsn-home #tsn-search-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; background:#B8923C; color:#fff; border:0; border-radius:8px; font-family:var(--tsn-body); font-size:14.5px; font-weight:600; cursor:pointer; line-height:1; white-space:nowrap; transition:background .2s ease, transform .2s ease; } #tsn-home #tsn-search-btn:hover{ background:#211E1B; transform:translateY(-1px); } #tsn-home #tsn-search-btn span{ color:#fff; } #tsn-home .tsn-menu-btn{ display:flex; } /* Search panel */ #tsn-home .tsn-search-panel{ border-top:1px solid var(--rule); background:var(--paper); } #tsn-home #tsn-search-btn svg{ width:17px; height:17px; stroke:#fff; flex:none; } #tsn-home #tsn-search-btn:hover svg{ stroke:#fff; } #tsn-home .tsn-search-panel .tsn-wrap{ padding-top:14px; padding-bottom:14px; } #tsn-home .tsn-search-panel .tsn-search-row{ display:flex; align-items:stretch; gap:10px; max-width:720px; margin:0 auto; } #tsn-home .tsn-search-panel form{ display:flex; gap:10px; align-items:stretch; flex:1 1 auto; max-width:none; margin:0; } #tsn-home .tsn-search-close{ flex:none; width:50px; border:1px solid var(--rule); border-radius:8px; background:var(--paper-3); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s ease, border-color .2s ease; } #tsn-home .tsn-search-close:hover{ color:#211E1B; border-color:var(--gold); } #tsn-home .tsn-search-close svg{ width:22px; height:22px; } #tsn-home .tsn-search-panel form label{ flex:1 1 auto; display:block; margin:0; min-width:0; } #tsn-home .tsn-search-panel input[type="search"], #tsn-home .tsn-search-panel .search-field{ width:100%; min-width:0; border:1px solid var(--rule); background:var(--paper-3); border-radius:8px; padding:14px 16px; font:inherit; font-size:15px; color:var(--ink); min-height:50px; } #tsn-home .tsn-search-panel input[type="search"]:focus, #tsn-home .tsn-search-panel .search-field:focus{ outline:none; border-color:var(--gold); } #tsn-home .tsn-search-panel button, #tsn-home .tsn-search-panel .search-submit{ flex:0 0 auto; width:auto; white-space:nowrap; background:var(--ink); color:var(--paper); border:0; border-radius:8px; padding:0 24px; min-height:50px; font:inherit; font-weight:500; cursor:pointer; transition:background .2s ease; } #tsn-home .tsn-search-panel button:hover, #tsn-home .tsn-search-panel .search-submit:hover{ background:var(--gold-dark); } /* ========================================================================== 2 · TICKER ========================================================================== */ #tsn-home .tsn-ticker{ background:var(--gold-tint); border-bottom:1px solid var(--rule); overflow:hidden; white-space:nowrap; } #tsn-home .tsn-ticker-track{ display:inline-flex; padding:9px 0; animation:tsn-scroll 65s linear infinite; will-change:transform; } #tsn-home .tsn-ticker:hover .tsn-ticker-track{ animation-play-state:paused; } #tsn-home .tsn-ticker-track span{ font-size:12.5px; font-weight:500; margin-right:36px; color:var(--gold-dark); letter-spacing:.02em; } #tsn-home .tsn-ticker-track span b{ color:var(--ink); font-weight:600; margin-left:6px; } @keyframes tsn-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ========================================================================== 3 · HERO (mobile-first: single column) ========================================================================== */ #tsn-home .tsn-hero{ padding:32px 0 38px; border-bottom:1px solid var(--rule); overflow:hidden; } #tsn-home .tsn-hero .tsn-wrap{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; } #tsn-home .tsn-eyebrow{ font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--gold-dark); text-transform:uppercase; margin-bottom:16px; } #tsn-home .tsn-hero h1{ font-family:var(--tsn-display); font-weight:600; font-size:27px; line-height:1.18; margin:0 0 16px; letter-spacing:-.01em; } #tsn-home .tsn-hero h1 a{ transition:color .2s ease; } #tsn-home .tsn-hero h1 a:hover{ color:var(--gold-dark); } #tsn-home .tsn-lede{ color:var(--ink-soft); font-size:15px; max-width:47ch; margin:0 0 24px; } #tsn-home .tsn-figure-row{ display:flex; align-items:baseline; gap:13px; margin-bottom:26px; flex-wrap:wrap; } #tsn-home .tsn-figure{ font-family:var(--tsn-display); font-weight:600; font-size:38px; letter-spacing:-.01em; color:var(--gold-dark); line-height:1; } #tsn-home .tsn-figure-label{ font-size:13px; color:var(--ink-faint); } #tsn-home .tsn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--ink); color:var(--paper); font-weight:500; font-size:14.5px; padding:14px 24px; border-radius:7px; min-height:48px; transition:background .2s ease, transform .2s ease, gap .2s ease; } #tsn-home .tsn-btn:hover{ background:var(--gold-dark); transform:translateY(-2px); gap:13px; } #tsn-home .tsn-btn svg{ width:15px; height:15px; flex:none; } #tsn-home .tsn-portrait{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--ink); border-radius:14px; aspect-ratio:1200 / 628; width:100%; margin:0; order:-1; /* image first: left on desktop, top on mobile */ } #tsn-home .tsn-portrait::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 70% 15%, rgba(156,122,60,.28), transparent 60%); } #tsn-home .tsn-portrait .tsn-media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #tsn-home .tsn-initials{ font-family:var(--tsn-display); font-size:72px; color:var(--gold); font-weight:600; position:relative; } #tsn-home .tsn-rank-badge{ position:absolute; top:16px; left:16px; z-index:2; background:var(--gold); color:var(--ink); font-weight:600; font-size:12px; padding:6px 13px; border-radius:20px; } /* ========================================================================== 4 · SECTIONS shell ========================================================================== */ #tsn-home .tsn-section{ padding:40px 0; border-bottom:1px solid var(--rule); } #tsn-home .tsn-section.tsn-alt{ background:var(--paper-2); } #tsn-home .tsn-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; } #tsn-home .tsn-section-head h2{ font-family:var(--tsn-display); font-size:23px; font-weight:600; margin:0; display:flex; align-items:center; gap:12px; } #tsn-home .tsn-section-head h2::before{ content:""; width:4px; height:24px; background:var(--gold); border-radius:2px; display:inline-block; flex:none; } #tsn-home .tsn-more{ font-size:13.5px; font-weight:500; color:var(--gold-dark); border-bottom:1px solid var(--gold-dark); padding-bottom:2px; white-space:nowrap; transition:opacity .2s ease; } #tsn-home .tsn-more:hover{ opacity:.65; } /* ---- 4 · WEALTH RANKINGS (mobile-first: 3-col) ------------------------- */ #tsn-home .tsn-rank-list{ list-style:none; margin:0; padding:0; } #tsn-home .tsn-rank-row{ display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:12px; padding:15px 10px; border-bottom:1px solid var(--rule); border-left:3px solid transparent; transition:background .2s ease, border-color .2s ease, transform .2s ease; } #tsn-home .tsn-rank-row:hover{ background:var(--paper-3); border-left-color:var(--gold); transform:translateX(4px); } #tsn-home .tsn-rank-num{ font-family:var(--tsn-display); font-weight:600; color:var(--ink-faint); font-size:15px; } #tsn-home .tsn-rank-name{ font-weight:600; font-size:15px; } #tsn-home .tsn-rank-name a{ transition:color .2s ease; } #tsn-home .tsn-rank-name a:hover{ color:var(--gold-dark); } #tsn-home .tsn-rank-cat{ display:none; font-size:11.5px; color:var(--gold-dark); background:var(--gold-tint); padding:4px 11px; border-radius:20px; white-space:nowrap; } #tsn-home .tsn-rank-updated{ display:none; font-size:11.5px; color:var(--ink-faint); white-space:nowrap; } #tsn-home .tsn-rank-value{ font-weight:600; font-size:15.5px; text-align:right; min-width:42px; color:var(--ink); } /* ---- 5 · CATEGORY CARDS (mobile-first: 2-col) -------------------------- */ #tsn-home .tsn-cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } #tsn-home .tsn-cat-card{ background:var(--paper-3); border:1px solid var(--rule); border-radius:14px; padding:20px 16px; transition:transform .28s var(--tsn-ease), border-color .28s ease, box-shadow .28s ease; } #tsn-home .tsn-cat-card:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 22px 40px -26px rgba(33,30,27,.5); } #tsn-home .tsn-cat-icon{ width:44px; height:44px; border-radius:50%; background:var(--gold-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition:background .28s ease; } #tsn-home .tsn-cat-card:hover .tsn-cat-icon{ background:var(--gold); } #tsn-home .tsn-cat-icon svg{ width:20px; height:20px; stroke:var(--gold-dark); transition:stroke .28s ease; } #tsn-home .tsn-cat-card:hover .tsn-cat-icon svg{ stroke:var(--ink); } #tsn-home .tsn-cat-card h3{ font-family:var(--tsn-display); font-size:18px; font-weight:600; margin:0 0 5px; } #tsn-home .tsn-cat-card p{ font-size:12.5px; color:var(--ink-faint); margin:0; } /* ---- 6 · LATEST PROFILES (mobile-first: 1-col) ------------------------- */ #tsn-home .tsn-story-grid{ display:grid; grid-template-columns:1fr; gap:20px; } #tsn-home .tsn-story-card{ background:var(--paper-3); border:1px solid var(--rule); border-radius:14px; overflow:hidden; transition:transform .28s var(--tsn-ease), box-shadow .28s ease; } #tsn-home .tsn-story-card:hover{ transform:translateY(-6px); box-shadow:0 24px 44px -28px rgba(33,30,27,.5); } #tsn-home .tsn-story-thumb{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:var(--ink); overflow:hidden; } #tsn-home .tsn-story-thumb::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 80% 10%, rgba(156,122,60,.3), transparent 55%); } #tsn-home .tsn-story-thumb .tsn-media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #tsn-home .tsn-story-thumb span{ font-family:var(--tsn-display); font-style:italic; color:var(--gold); font-size:16px; position:relative; } #tsn-home .tsn-story-body{ padding:20px 22px 22px; } #tsn-home .tsn-story-tag{ font-size:10.5px; font-weight:600; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.07em; } #tsn-home .tsn-story-body h3{ font-family:var(--tsn-display); font-size:19px; font-weight:600; margin:9px 0; line-height:1.3; } #tsn-home .tsn-story-body h3 a{ transition:color .2s ease; } #tsn-home .tsn-story-body h3 a:hover{ color:var(--gold-dark); } #tsn-home .tsn-story-body p{ font-size:13px; color:var(--ink-soft); margin:0 0 15px; } #tsn-home .tsn-story-meta{ font-size:11.5px; color:var(--ink-faint); display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--rule); padding-top:13px; } /* ========================================================================== 7 · TRUST / METHODOLOGY (dark) ========================================================================== */ #tsn-home .tsn-trust{ background:var(--ink); color:#E9E6DE; } #tsn-home .tsn-trust .tsn-wrap{ padding-top:40px; padding-bottom:40px; } #tsn-home .tsn-trust-head{ max-width:58ch; margin-bottom:30px; } #tsn-home .tsn-trust-head .tsn-eyebrow{ color:var(--gold); } #tsn-home .tsn-trust-head h2{ font-family:var(--tsn-display); font-size:23px; font-weight:600; margin:0 0 11px; color:#fff; } #tsn-home .tsn-trust-head p{ color:#C9C4B7; font-size:14.5px; margin:0; } #tsn-home .tsn-trust-grid{ display:grid; grid-template-columns:1fr; gap:26px; } #tsn-home .tsn-trust-item{ border-top:1px solid rgba(255,255,255,.16); padding-top:18px; } #tsn-home .tsn-trust-item .tsn-num{ font-family:var(--tsn-display); color:var(--gold); font-size:15px; font-weight:600; margin-bottom:9px; display:block; } #tsn-home .tsn-trust-item h3{ font-family:var(--tsn-body); font-size:15px; font-weight:600; margin:0 0 7px; color:#fff; } #tsn-home .tsn-trust-item p{ font-size:12.5px; color:#C2BDAF; margin:0; line-height:1.6; } /* ========================================================================== 8 · NEWSLETTER ========================================================================== */ #tsn-home .tsn-news{ background:var(--paper-2); } #tsn-home .tsn-news .tsn-wrap{ padding-top:40px; padding-bottom:40px; text-align:center; } #tsn-home .tsn-news h2{ font-family:var(--tsn-display); font-size:24px; font-weight:600; margin:0 0 8px; } #tsn-home .tsn-news p{ font-size:14px; color:var(--ink-soft); margin:0 auto 24px; max-width:44ch; } #tsn-home .tsn-news-form{ display:flex; flex-direction:column; gap:10px; max-width:440px; margin:0 auto; } #tsn-home .tsn-news-form input{ flex:1; border:1px solid var(--rule); background:var(--paper-3); border-radius:8px; padding:14px 16px; font-family:inherit; font-size:14px; color:var(--ink); min-height:48px; transition:border-color .2s ease; } #tsn-home .tsn-news-form input:focus{ outline:none; border-color:var(--gold); } #tsn-home .tsn-news-form button{ background:var(--ink); color:var(--paper); border:none; border-radius:8px; padding:14px 24px; min-height:48px; font-family:inherit; font-weight:500; font-size:14px; cursor:pointer; transition:background .2s ease; } #tsn-home .tsn-news-form button:hover{ background:var(--gold-dark); } /* ========================================================================== 9 · FOOTER (mobile-first: single column) ========================================================================== */ #tsn-home .tsn-footer{ background:var(--ink); color:#C9C4B7; } #tsn-home .tsn-footer .tsn-wrap{ padding:40px 18px 24px; display:grid; grid-template-columns:1fr; gap:30px; } #tsn-home .tsn-foot-brand .tsn-mark{ font-family:var(--tsn-display); font-weight:700; font-size:21px; color:#fff; } #tsn-home .tsn-foot-brand .tsn-mark b{ color:var(--gold); } #tsn-home .tsn-foot-logo{ display:inline-block; line-height:0; } #tsn-home .tsn-logo-img--footer{ height:54px; width:auto; max-height:54px; max-width:320px; } #tsn-home .tsn-foot-brand p{ font-size:12.5px; color:#8B8578; max-width:32ch; margin:14px 0 0; line-height:1.7; } #tsn-home .tsn-foot-col h5{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:#8B8578; margin:0 0 15px; font-weight:600; } #tsn-home .tsn-foot-col ul.tsn-foot-menu{ list-style:none; margin:0; padding:0; } #tsn-home .tsn-foot-col a{ display:block; font-size:13.5px; margin-bottom:10px; color:#C9C4B7; transition:color .2s ease; } #tsn-home .tsn-foot-col a:hover{ color:var(--gold); } #tsn-home .tsn-socials{ display:flex; flex-wrap:wrap; gap:11px; margin-top:2px; } #tsn-home .tsn-socials a{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#C9C4B7; margin:0; transition:border-color .25s ease, color .25s ease, transform .25s ease, background .25s ease; } #tsn-home .tsn-socials a:hover{ border-color:var(--gold); color:var(--ink); background:var(--gold); transform:translateY(-3px); } #tsn-home .tsn-socials svg{ width:17px; height:17px; } #tsn-home .tsn-foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px; display:flex; flex-direction:column; gap:8px; font-size:12px; color:#8B8578; } /* ========================================================================== RESPONSIVE — scale up from mobile ========================================================================== */ @media (min-width:480px){ #tsn-home .tsn-rank-row{ grid-template-columns:28px 1fr auto auto; } #tsn-home .tsn-rank-cat{ display:inline-block; } #tsn-home .tsn-news-form{ flex-direction:row; } #tsn-home .tsn-news-form button{ padding-left:24px; padding-right:24px; } #tsn-home .tsn-footer .tsn-wrap{ grid-template-columns:1fr 1fr; } } @media (min-width:600px){ #tsn-home .tsn-wrap{ padding:0 32px; } #tsn-home .tsn-logo-img{ height:52px; max-height:52px; max-width:300px; } #tsn-home .tsn-hero{ padding:44px 0 48px; } #tsn-home .tsn-hero h1{ font-size:31px; } #tsn-home .tsn-lede{ font-size:16px; } #tsn-home .tsn-figure{ font-size:44px; } #tsn-home .tsn-btn{ width:auto; } #tsn-home .tsn-initials{ font-size:88px; } #tsn-home .tsn-section{ padding:60px 0; } #tsn-home .tsn-section-head{ margin-bottom:30px; } #tsn-home .tsn-section-head h2{ font-size:27px; } #tsn-home .tsn-story-grid{ grid-template-columns:1fr 1fr; gap:24px; } #tsn-home .tsn-trust .tsn-wrap{ padding-top:56px; padding-bottom:56px; } #tsn-home .tsn-trust-head h2{ font-size:27px; } #tsn-home .tsn-news .tsn-wrap{ padding-top:52px; padding-bottom:52px; } #tsn-home .tsn-news h2{ font-size:26px; } #tsn-home .tsn-footer .tsn-wrap{ padding-left:32px; padding-right:32px; } #tsn-home .tsn-foot-bottom{ padding-left:32px; padding-right:32px; } } @media (min-width:680px){ #tsn-home .tsn-rank-row{ grid-template-columns:40px 1fr auto auto auto; gap:18px; padding:16px 12px; } #tsn-home .tsn-rank-updated{ display:inline-block; } #tsn-home .tsn-rank-num{ font-size:16px; } #tsn-home .tsn-rank-name{ font-size:15.5px; } #tsn-home .tsn-rank-value{ font-size:16px; } } @media (min-width:760px){ #tsn-home .tsn-cat-grid{ grid-template-columns:repeat(4,1fr); gap:18px; } #tsn-home .tsn-cat-card{ padding:26px 22px; } } @media (min-width:800px){ #tsn-home .tsn-trust-grid{ grid-template-columns:repeat(3,1fr); } #tsn-home .tsn-footer .tsn-wrap{ grid-template-columns:1.5fr repeat(3,1fr); gap:36px; padding-top:52px; padding-bottom:30px; } #tsn-home .tsn-foot-bottom{ flex-direction:row; justify-content:space-between; flex-wrap:wrap; gap:12px; } } @media (min-width:860px){ /* Header becomes a horizontal bar */ #tsn-home .tsn-header .tsn-wrap{ padding-top:16px; padding-bottom:16px; } #tsn-home .tsn-nav{ position:static; max-height:none; overflow:visible; visibility:visible; background:none; border:0; } #tsn-home .tsn-nav-list{ flex-direction:row; gap:30px; } #tsn-home .tsn-nav-list a{ min-height:0; padding:4px 0; border-top:0; background:none; font-size:14px; position:relative; color:var(--ink-soft); } #tsn-home .tsn-nav-list a:hover, #tsn-home .tsn-nav-list a:focus-visible{ background:none; color:var(--ink); } #tsn-home .tsn-nav-list a::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--tsn-ease); } #tsn-home .tsn-nav-list a:hover::after, #tsn-home .tsn-nav-list a:focus-visible::after{ transform:scaleX(1); } #tsn-home .tsn-menu-btn{ display:none; } #tsn-home .tsn-icon-btn{ width:38px; height:38px; } /* Hero becomes two columns: image left (1.12fr) + content right (.88fr) */ #tsn-home .tsn-hero{ padding:66px 0 70px; } #tsn-home .tsn-hero .tsn-wrap{ grid-template-columns:1.12fr .88fr; gap:56px; } #tsn-home .tsn-hero h1{ font-size:43px; line-height:1.14; } } @media (min-width:920px){ #tsn-home .tsn-story-grid{ grid-template-columns:repeat(3,1fr); } } /* ========================================================================== Reduced motion ========================================================================== */ /* Scroll to top */ .tsn-totop{ position:fixed; right:18px; bottom:18px; z-index:60; width:46px; height:46px; border-radius:50%; border:0; background:#B8923C; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); box-shadow:0 8px 24px -8px rgba(33,30,27,.5); transition:opacity .25s ease, transform .25s ease, background .2s ease; } .tsn-totop.tsn-show{ opacity:1; pointer-events:auto; transform:none; } .tsn-totop:hover{ background:#211E1B; } .tsn-totop:focus-visible{ outline:2px solid #9C7A3C; outline-offset:3px; } .tsn-totop svg{ width:20px; height:20px; } @media (min-width:600px){ .tsn-totop{ right:24px; bottom:24px; width:48px; height:48px; } } @media (prefers-reduced-motion: reduce){ .tsn-totop{ transition:background .2s ease; transform:none; } #tsn-home *{ animation:none !important; } #tsn-home .tsn-ticker-track{ animation:none !important; } #tsn-home .tsn-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } #tsn-home .tsn-nav{ transition:none !important; } }