/* ===== Blog detail — Categories chips ===== */ .blog-cats__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } /* scoped under .blog-cats so it outranks the global .post_div a { } color */ .blog-cats .blog-cats__chip { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 1; color: #2d2d43; background: #f4f6fc; border: 1px solid #e5e9f4; border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: all .18s ease; } /* higher specificity than the global .post_div a:hover (which turns text blue and would make it invisible on the blue chip background) */ .blog-cats .blog-cats__chip:hover { background: #1431cf; border-color: #1431cf; color: #fff; transform: translateY(-1px); } /* ===== Blog detail — Sidebar enquiry form ===== */ .sidebar-enquiry { background: #fff; border: 1px solid #e5e9f4; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px -22px rgba(20, 28, 46, .45); } .sidebar-enquiry__head { background: linear-gradient(135deg, #1431cf, #2977f1); color: #fff; padding: 20px; } .sidebar-enquiry__head h3 { color: #fff; font-weight: 700; font-size: 20px; margin: 0 0 6px; } .sidebar-enquiry__head p { color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.5; margin: 0; } /* keep head text white on hover (global .post_div p:hover turns it blue) */ .sidebar-enquiry__head h3:hover, .sidebar-enquiry__head p:hover { color: #fff; } .sidebar-enquiry__form { padding: 18px; } .sidebar-enquiry__form .form-control { border-radius: 8px; padding: 10px 13px; font-size: 14px; background: #f8fafc; border: 1px solid #e5e9f4; margin-bottom: 10px; width: 100%; } .sidebar-enquiry__form .form-control:focus { border-color: #1431cf; box-shadow: none; background: #fff; outline: none; } .sidebar-enquiry__form textarea.form-control { height: 80px; resize: none; } .sidebar-enquiry__btn { width: 100%; background: #1431cf; border: none; color: #fff; font-weight: 600; font-size: 15px; padding: 12px; border-radius: 8px; margin-top: 4px; transition: background .18s ease; } .sidebar-enquiry__btn:hover { background: #0f249e; } .sidebar-enquiry .error { color: #e23636; font-size: 12.5px; font-weight: 500; margin: -6px 0 9px; display: block; } .sidebar-enquiry .g-recaptcha { margin-bottom: 12px; } /* keep the 304px reCAPTCHA inside the narrow sidebar column */ @media (min-width: 992px) and (max-width: 1120px) { .sidebar-enquiry .g-recaptcha { transform: scale(.9); transform-origin: 0 0; } } /* ===== Keep the sticky sidebar from jumping when a Bootstrap modal opens ===== Bootstrap's .modal-open forces `overflow: hidden` on , which breaks position: sticky (and drops the scrollbar). `overflow: clip` still locks the background scroll but does NOT break sticky — matching how the page already uses overflow-x: clip for the sticky sidebar. Bootstrap's own padding-right compensation still prevents the horizontal shift. */ @media (min-width: 992px) { body.modal-open { overflow: clip !important; } } /* ===== Blog content lists: restore bullets / numbers ===== style.css sets `.list_blog ol, .list_blog ul { padding-left: 0 }`, which leaves no room for the list markers — so bulleted/numbered lists added in the blog editor render as plain text with no visible bullets. Loaded after style.css, so these win without !important. */ .list_blog ul, .list_blog ol { padding-left: 1.5rem; margin-bottom: 1rem; } .list_blog ul { list-style: disc; } .list_blog ol { list-style: decimal; } .list_blog li { list-style: inherit; } /* ===== Table of Contents (auto-generated from H2/H3 headings) ===== */ .blog-toc { padding: 0 10px 25px; background-color: #fbfcfd; border: 1px solid rgba(112, 112, 112, .05); border-radius: 15px; max-height: 380px; overflow: auto; margin: 0 0 28px; } .blog-toc__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .blog-toc__title { font-size: 18px; font-weight: 700; color: #2563eb; } .blog-toc__toggle { background: transparent; border: 0; cursor: pointer; color: #374151; font-size: 15px; line-height: 1; padding: 4px 6px; } .blog-toc__list { list-style: none; margin: 14px 0 0; padding: 0; } .blog-toc__list li { margin: 7px 0; line-height: 1.4; } .blog-toc__list a { display: block; color: #374151; text-decoration: none; padding: 4px 8px; border-left: 2px solid transparent; border-radius: 4px; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .blog-toc__list a:hover { color: #1e40af; background: #eef2ff; } /* active heading (ScrollSpy) */ .blog-toc__list a.is-active { color: #1d4ed8; font-weight: 600; background: #eef2ff; border-left-color: #2563eb; } .blog-toc__list .toc-h2>a { font-weight: 600; } .blog-toc__list .toc-h3 { padding-left: 14px; font-size: .95em; } .blog-toc__list .toc-h4 { padding-left: 28px; font-size: .9em; } /* ===== Desktop: sticky, self-scrolling TOC sidebar (≥992px) ===== */ @media (min-width: 992px) { .blog-toc-col .blog-toc { position: sticky; top: 90px; max-height: 380px; overflow: auto; margin-bottom: 0; scrollbar-width: thin; scrollbar-color: #cbd3e3 transparent; } .blog-toc-col .blog-toc::-webkit-scrollbar { width: 6px; } .blog-toc-col .blog-toc::-webkit-scrollbar-thumb { background: #cbd3e3; border-radius: 6px; } .blog-toc-col .blog-toc::-webkit-scrollbar-track { background: transparent; } /* always expanded on desktop — collapse is a mobile/tablet affordance */ .blog-toc__toggle { display: none; } } /* ===== Tablet & mobile: collapsible accordion with smooth animation ===== */ @media (max-width: 991.98px) { .blog-toc__list { overflow: hidden; max-height: 2000px; opacity: 1; transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease; } .blog-toc.is-collapsed .blog-toc__list { max-height: 0; opacity: 0; margin-top: 0; } .blog-toc__toggle { transition: transform .3s ease; } } /* ===== Blog content headings ===== */ /* keep headings clear of any fixed header when jumping to an anchor */ .list_blog h2, .list_blog h3, .list_blog h4 { scroll-margin-top: 90px; } /* differentiate h2 vs h3 in blog content */ .list_blog h2 { font-size: 30px; font-weight: 700; line-height: 1.3; margin-top: 36px; margin-bottom: 16px; color: #0b1b3a; } .list_blog h3 { font-size: 22px; font-weight: 600; line-height: 1.35; margin-top: 28px; margin-bottom: 12px; color: #2a3550; } @media (max-width: 767px) { .list_blog h2 { font-size: 24px; } .list_blog h3 { font-size: 19px; } } /* ===== Blockquotes inside blog content ===== */ .list_blog blockquote { border-left: 4px solid var(--c_primary, #1431cf); background: #f8f9fa; padding: 16px 24px; margin: 24px 0; font-style: italic; color: #444; border-radius: 4px; } .list_blog blockquote p:last-child { margin-bottom: 0; } .list_blog blockquote a { color: #1431cf; } @media (max-width: 767px) { .list_blog blockquote { padding: 14px 18px; margin: 18px 0; } } /* ===== Quick Summary card ===== */ .quick-summary { background: #e8f1fe; border: 1px solid #d4e4fb; border-left: 6px solid var(--c_primary); border-radius: 18px; padding: 32px 36px; margin: 24px 0 36px; } .quick-summary__title { font-size: 26px; font-weight: 700; color: #0b1b3a; margin: 0 0 20px; } .quick-summary__list { list-style: none; margin: 0; padding: 0; } .quick-summary__item { position: relative; padding-left: 20px; margin-bottom: 18px; font-size: 16px; line-height: 1.6; color: #2a3550; } .quick-summary__item:last-child { margin-bottom: 0; } .quick-summary__item::before { content: "•"; position: absolute; left: 2px; top: 0; color: #2a3550; font-weight: 700; } .quick-summary__label { font-weight: 700; color: #0b1b3a; } .quick-summary__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 24px; background: #1a73e8; color: #fff; font-weight: 600; font-size: 15px; border-radius: 30px; text-decoration: none; transition: background .2s ease; } .quick-summary__cta:hover { background: #1558b8; color: #fff; } .quick-summary__cta i { font-size: 12px; } @media (max-width: 767px) { .quick-summary { padding: 22px 20px; border-radius: 12px; } .quick-summary__title { font-size: 21px; } .quick-summary__item { font-size: 15px; } } /* ========================================================================== Comparison / content tables Mirrors the TinyMCE editor content_style (see public/js/blog-editor-table.js) so a table looks identical in the editor preview and on the frontend. ========================================================================== */ /* horizontal-scroll wrapper (added around tables by JS) for small screens */ .list_blog .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; } .list_blog table.comparison-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; /* so columns keep their width and the wrapper scrolls instead of squishing */ min-width: 520px; } /* when wrapped, the wrapper owns the vertical spacing */ .list_blog .table-scroll table.comparison-table { margin: 0; } .list_blog table.comparison-table th, .list_blog table.comparison-table td { border: 1px solid #000; padding: 12px 16px; text-align: left; vertical-align: top; line-height: 1.5; } /* dark-green header row */ .list_blog table.comparison-table thead th { background: #6aaa7a; color: #14331f; font-weight: 700; } /* light-green first column (row headers) */ .list_blog table.comparison-table tbody th { background: #cfe9d5; color: #14331f; font-weight: 600; } /* light-green body cells */ .list_blog table.comparison-table tbody td { background: #e7f5ea; color: #1f2937; }