/* ============================================ ARTICLE PAGE v2 Hero card (image left / title right) over a navy band, two-column body with a sticky sidebar (table of contents + loan CTA), author box, "Our Top Blogs" row. Body-content typography carried over from article.css (still used by the CMS editor). ============================================ */ :root { --art-navy: #050B26; --art-blue: #075DED; --art-blue-dark: #0540b3; --art-ink: #111827; --art-body: #374151; --art-muted: #64748b; --art-line: #e5e7eb; --art-soft: #f3f5f9; --art-card-shadow: 0 8px 30px rgba(5, 11, 38, 0.08); --art-radius: 16px; } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #ffffff; color: var(--art-body); line-height: 1.6; margin: 0; padding: 0; /* header.ejs sets overflow-x:hidden on html AND body; a body scroll container breaks position:sticky. html alone still clips horizontal overflow, so body can stay visible here. !important beats the inline style attr on . */ overflow-x: visible !important; } /* ---------- Page frame ---------- */ .article-page-wrapper { position: relative; width: 100%; background: #ffffff; padding: 0 20px 64px; } .article-hero-band { position: absolute; top: 0; left: 0; right: 0; height: 300px; background: var(--art-navy); z-index: 0; } .article-main-content-container { position: relative; z-index: 1; max-width: 1140px; /* card is 1140 wide on a 1440 screen */ margin: 0 auto; padding-top: 120px; } /* ---------- Hero card ---------- */ .article-hero-card { display: grid; grid-template-columns: minmax(0, 510px) minmax(0, 1fr); gap: 0; height: 340px; background: linear-gradient(180deg, #F1F5FD 0%, #F1F5FE 100%); border-radius: 20px; padding: 0; overflow: hidden; } .article-hero-media { min-height: 0; height: 100%; } .article-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--art-soft); } .article-hero-body { display: flex; flex-direction: column; min-width: 0; padding: 32px 48px 32px 40px; /* 40px gap between image and text */ } .article-hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; } .article-tags { display: flex; flex-wrap: wrap; gap: 8px; } .article-tag { display: inline-block; padding: 5px 12px; border-radius: 6px; background: #E0E3EA; color: #434343; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; } .article-actions { display: flex; gap: 8px; flex-shrink: 0; } .action-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #8A8F99; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .action-icon-btn:hover { background: #e4e9f5; } /* Native share only makes sense where a share sheet exists; desktop shows just the copy-link button (as in the design) */ @media (min-width: 901px) { #share-btn { display: none; } } .action-icon-img { width: 16px; height: 16px; display: block; } .article-main-heading { font-family: 'Geist', 'Inter', sans-serif; font-weight: 400; font-size: 32px; line-height: 46px; color: var(--art-ink); margin: 0 0 24px; letter-spacing: -0.01em; overflow-wrap: break-word; } /* bottom row: meta on the left, social icons on the right */ .article-hero-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .article-social-share { display: flex; gap: 22px; } .article-social-share a { width: 34px; height: 34px; border-radius: 50%; background: #E4E9F5; color: var(--art-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .article-social-share a:hover { background: #d6ddee; } .article-social-share img { display: block; width: 18px; height: auto; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; font-family: 'Geist', sans-serif; color: #8A8F99; /* reading time + date: light grey */ font-size: 13px; } .article-meta-author { color: #434343; font-weight: 500; } /* author: dark grey */ .article-meta-sep { color: #B6BDC9; } /* ---------- Two-column layout ---------- */ .article-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; /* sidebar = calculator .toc-card width */ gap: 40px; /* no align-items:start — the aside must stretch to the row height for position:sticky to have room */ margin-top: 40px; } .article-main-column { min-width: 0; } .article-sidebar-right { min-width: 0; } /* Sticky TOC. Its height is capped so the card ends above the fixed "Need Cash?" bar at the bottom (--bottom-bar is measured at runtime in article.ejs; 150px fallback). Long lists scroll inside the card. */ .article-sidebar-sticky { --bottom-bar: 150px; position: sticky; top: 96px; display: flex; flex-direction: column; max-height: calc(100vh - 96px - var(--bottom-bar) - 16px); } /* Table of contents — same treatment as .toc-card on the calculator pages */ .sidebar-toc-card { background: #F8F8F8; border: 1px solid #D5DEEE; border-radius: 24px; padding: 24px; width: 420px; max-width: 100%; box-sizing: border-box; font-family: 'Geist', sans-serif; display: flex; flex-direction: column; min-height: 0; } .sidebar-toc-title { position: relative; font-size: 20px; font-weight: 800; color: #14223f; margin: 0 0 16px; line-height: 1.1; font-family: 'Geist', sans-serif; } .sidebar-toc-title::before { content: ''; position: absolute; left: -25px; /* card padding (24) + border (1) → reaches the card's outer edge */ top: 50%; transform: translateY(-50%); width: 8px; height: 30px; background: #065FEC; border-radius: 0 10px 10px 0; z-index: 2; } .sidebar-toc-list { list-style: none; margin: 0; padding: 0 6px 0 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #c9d0dd transparent; } .sidebar-toc-list::-webkit-scrollbar { width: 6px; } .sidebar-toc-list::-webkit-scrollbar-thumb { background: #c9d0dd; border-radius: 3px; } .sidebar-toc-item { margin: 0 0 18px; } .sidebar-toc-item:last-child { margin-bottom: 0; } .sidebar-toc-h3 { padding-left: 14px; } .sidebar-toc-item a { color: #6B707B; font-size: 14px; line-height: 1.4; font-family: 'Geist', sans-serif; text-decoration: none; display: block; transition: color 0.25s ease; } .sidebar-toc-item a:hover, .sidebar-toc-item a.is-active { color: #2156e5; } /* ---------- Author box ---------- */ .article-author-box { margin-top: 56px; padding-top: 0; font-family: 'Geist', 'Inter', sans-serif; /* name + bio */ } .article-author-label { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--art-ink); margin-bottom: 28px; } .article-author-row { display: flex; gap: 28px; align-items: center; } .article-author-avatar { width: 140px; height: 140px; border-radius: 50%; background: #E1F1FD; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .article-author-avatar img { width: 49px; height: 80px; display: block; } .article-author-text { min-width: 0; } .article-author-name { font-weight: 600; color: var(--art-ink); font-size: 14px; margin-bottom: 8px; } .article-author-bio { margin: 0; font-size: 14px; line-height: 1.8; color: #6B707B; } /* ---------- Body content (carried over) ---------- */ .article-body-content { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--art-body); max-width: 100%; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; overflow-x: hidden; } .article-body-content * { max-width: 100% !important; box-sizing: border-box; } .article-body-content img, .article-body-content video, .article-body-content iframe, .article-body-content embed, .article-body-content object { max-width: 100% !important; height: auto !important; } .article-body-content p { margin: 0 0 1.4rem; line-height: 1.75; } .article-body-content p:first-child { margin-top: 0; } .article-body-content p:last-child { margin-bottom: 0; } .article-body-content h1, .article-body-content h2, .article-body-content h3, .article-body-content h4, .article-body-content h5, .article-body-content h6 { font-family: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; color: var(--art-ink); line-height: 1.3; margin: 2.4rem 0 0.9rem; scroll-margin-top: 110px; } .article-body-content h1 { font-size: 1.75rem; } .article-body-content h2 { font-size: 1.5rem; } .article-body-content h3 { font-size: 1.25rem; } .article-body-content h4 { font-size: 1.125rem; } .article-body-content h5, .article-body-content h6 { font-size: 1rem; } .article-body-content strong, .article-body-content b { font-weight: 600; color: var(--art-ink); } .article-body-content em, .article-body-content i { font-style: italic; } .article-body-content a { color: var(--art-blue); text-decoration: underline; transition: color 0.2s ease; word-break: break-all; } .article-body-content a:hover { color: var(--art-blue-dark); } .article-body-content ul, .article-body-content ol { margin: 1.4rem 0 !important; padding-left: 2rem !important; list-style-position: outside !important; } .article-body-content ul { list-style-type: disc !important; } .article-body-content ol { list-style-type: decimal !important; } .article-body-content ul ul { list-style-type: circle !important; margin: 0.5rem 0 !important; } .article-body-content ul ul ul { list-style-type: square !important; } .article-body-content ol ol { list-style-type: lower-alpha !important; margin: 0.5rem 0 !important; } .article-body-content ul li, .article-body-content ol li { display: list-item !important; list-style: inherit !important; margin-bottom: 0.55rem; line-height: 1.7; padding-left: 0.3rem; color: var(--art-body); } .article-body-content ul > li { list-style-type: disc !important; } .article-body-content ol > li { list-style-type: decimal !important; } .article-body-content ul ul > li { list-style-type: circle !important; } .article-body-content ul ul ul > li { list-style-type: square !important; } .article-body-content ol ol > li { list-style-type: lower-alpha !important; } .article-body-content ul li::marker, .article-body-content ol li::marker { color: var(--art-body); font-weight: 600; } .article-body-content li > p { margin: 0 0 0.5rem 0; } .article-body-content li:last-child { margin-bottom: 0; } .article-body-content li > span, .article-body-content li > a, .article-body-content li > strong, .article-body-content li > em { display: inline; } .article-body-content img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.75rem 0; background: var(--art-soft); } .article-body-content blockquote { border-left: 4px solid var(--art-blue); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--art-soft); border-radius: 0 12px 12px 0; font-style: italic; color: var(--art-muted); overflow-wrap: break-word; } .article-body-content pre { background: var(--art-soft); border: 1px solid var(--art-line); border-radius: 12px; padding: 1.25rem; margin: 2rem 0; overflow-x: auto; max-width: 100% !important; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.875rem; line-height: 1.5; } .article-body-content code { background: var(--art-soft); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', 'Fira Code', monospace; } .article-body-content pre code { background: none; padding: 0; } .article-body-content table { width: 100%; max-width: 100% !important; border-collapse: collapse; margin: 2rem 0; font-size: 0.9375rem; display: block; overflow-x: auto; } .article-body-content table th, .article-body-content table td { padding: 12px 16px; text-align: left; border: 1px solid var(--art-line); } .article-body-content table th { background: var(--art-soft); font-weight: 600; color: var(--art-ink); } .article-body-content table tr:nth-child(even) td { background: #fafbfd; } .article-body-content hr { border: none; border-top: 1px solid var(--art-line); margin: 2.5rem 0; } /* ---------- Top blogs ---------- */ .related-articles-section { position: relative; z-index: 1; max-width: 1240px; margin: 72px auto 0; } .related-articles-title { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.2; color: var(--art-ink); margin-bottom: 24px; } .related-articles-title-part2 { color: var(--art-blue); } .related-articles-carousel-wrapper { position: relative; } .related-articles-carousel { overflow: hidden; } .related-articles-track { display: flex; gap: 30px; /* must match getGap() in article.ejs */ transition: transform 0.4s ease; will-change: transform; } .related-article-card { flex: 0 0 calc((100% - 60px) / 3); display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--art-line); border-radius: var(--art-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .related-article-card:hover { transform: translateY(-3px); box-shadow: var(--art-card-shadow); } .related-article-image { aspect-ratio: 380 / 220; background: var(--art-soft); } .related-article-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .related-article-content { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .related-article-date { margin: 0; font-size: 12px; color: var(--art-muted); } .related-article-title { margin: 0; font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--art-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .related-article-description { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--art-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .related-article-read-more { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--art-blue); } .carousel-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--art-blue); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(7, 93, 237, 0.3); z-index: 2; transition: opacity 0.2s ease, background 0.15s ease; } .carousel-nav-btn:hover { background: var(--art-blue-dark); } .carousel-nav-btn:disabled, .carousel-nav-btn.is-hidden { opacity: 0; pointer-events: none; } .carousel-prev-btn { left: -20px; } .carousel-next-btn { right: -20px; } /* ---------- Responsive ---------- */ /* Large tablets / small laptops: keep the side-by-side card but let it size to its content, with a wider image column so the illustration is not cropped to a sliver. */ @media (max-width: 1100px) { .article-content-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } .article-hero-card { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); height: auto; min-height: 400px; } .article-hero-media img { min-height: 400px; } .article-hero-body { padding: 32px 32px 28px; } .article-main-heading { font-size: 28px; line-height: 40px; margin-bottom: 24px; } } @media (max-width: 1024px) { .related-articles-track { gap: 24px; } .related-article-card { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 768px) { .related-articles-track { gap: 20px; } .related-article-card { flex-basis: 100%; } } @media (max-width: 900px) { .article-content-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .article-sidebar-sticky { position: static; max-height: none; } .sidebar-toc-card { display: none; } .article-hero-card { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; } .article-hero-media { height: auto; } .article-hero-media img { height: 320px; min-height: 0; } .article-hero-body { padding: 24px 28px 26px; } .article-main-heading { font-size: 26px; line-height: 36px; margin-bottom: 20px; } } @media (max-width: 600px) { .article-page-wrapper { padding: 0 14px 48px; } .article-hero-band { height: 220px; } .article-main-content-container { padding-top: 96px; } .article-hero-media img { height: 210px; } .article-hero-body { padding: 20px 18px 22px; } .article-social-share { gap: 14px; } .article-hero-footer { flex-direction: column; align-items: flex-start; gap: 14px; } .article-hero-topline { margin-bottom: 18px; } .article-main-heading { font-size: 22px; line-height: 30px; margin-bottom: 18px; } .article-meta { font-size: 12px; } .article-body-content { font-size: 16px; } .article-body-content h2 { font-size: 1.3rem; } .article-body-content h3 { font-size: 1.125rem; } .related-articles-section { margin-top: 48px; } .article-author-box { margin-top: 40px; } .article-author-label { font-size: 22px; margin-bottom: 20px; } .article-author-row { gap: 18px; align-items: flex-start; } .article-author-avatar { width: 88px; height: 88px; } .article-author-avatar img { width: 31px; height: 50px; } .article-author-name { font-size: 14px; } .article-author-bio { font-size: 14px; line-height: 1.7; } .related-articles-title { font-size: 26px; } .related-articles-track { gap: 16px; } .related-article-card { flex-basis: 100%; } .carousel-prev-btn { left: 8px; } .carousel-next-btn { right: 8px; } }