with its own margin-bottom via !important, which would offset the flex centering. */ margin: 0 !important; font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1; letter-spacing: -0.01em; color: var(--tnb-pc-accent, #0f172a); } .tnb-block.tnb-pros-cons .tnb-pc__list { list-style: disc; margin: 0; padding: 0 0 0 1.25rem; } .tnb-block.tnb-pros-cons .tnb-pc__list li { margin: 0; padding: 0.3rem 0; font-size: 16px !important; color: var(--text-strong, #0f172a); } .tnb-block.tnb-pros-cons .tnb-pc__list li::marker { color: var(--tnb-pc-accent, #1d9e75); } @media (min-width: 641px) { .tnb-block.tnb-pros-cons .tnb-pc { grid-template-columns: 1fr 1fr; } } /* ----------------------------------------------------------------------- * * Lead magnet * ----------------------------------------------------------------------- */ /* Background-image CTA card (mirrors the theme .cta-section look). The bg image is set inline in PHP; a dark overlay keeps text readable. */ .tnb-block.tnb-lead-magnet { position: relative; overflow: hidden; padding: 40px 30px; border-radius: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--navy, #0c2340); } .tnb-block.tnb-lead-magnet::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .tnb-block.tnb-lead-magnet .tnb-lm__card { position: relative; z-index: 1; text-align: center; } .tnb-block.tnb-lead-magnet .tnb-lm__content { max-width: 640px; margin: 0 auto; } .tnb-block.tnb-lead-magnet .tnb-lm__btn { margin-left: auto; margin-right: auto; } .tnb-block.tnb-lead-magnet .tnb-lm__heading { margin: 0 0 0.3rem; font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: #fff; } .tnb-block.tnb-lead-magnet .tnb-lm__desc { margin: 0 0 1rem; color: #fff; } .tnb-block.tnb-lead-magnet .tnb-lm__btn { margin-top: 0.25rem; } /* ----------------------------------------------------------------------- * * CTA banner * ----------------------------------------------------------------------- */ .tnb-block.tnb-cta { position: relative; overflow: hidden; padding: 80px 48px; border-radius: 16px; background-color: #0a0a0b; /* Mirrors the homepage ".nxt" hero glow. An editor-set bg image overrides this via the inline style, and .tnb-cta--has-bg adds a dark overlay. */ background-image: radial-gradient(70% 80% at 20% 50%, rgba(204, 31, 31, 0.30) 0%, transparent 60%), radial-gradient(60% 80% at 80% 50%, rgba(24, 95, 165, 0.18) 0%, transparent 65%), radial-gradient(40% 60% at 50% 100%, rgba(46, 181, 130, 0.10) 0%, transparent 60%); background-size: cover; background-position: center; background-repeat: no-repeat; text-align: center; color: #fff; } .tnb-block.tnb-cta.tnb-cta--has-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .tnb-block.tnb-cta .tnb-cta__content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .tnb-block.tnb-cta .tnb-cta__heading { margin: 0 0 16px; font-family: "Outfit", system-ui, sans-serif; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: #fff; } .tnb-block.tnb-cta .tnb-cta__text { margin: 0 auto 28px; max-width: 600px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); } .tnb-block.tnb-cta .tnb-cta__btn { margin-top: 0; } @media (max-width: 640px) { .tnb-block.tnb-cta { padding: 56px 24px; } } /* ----------------------------------------------------------------------- * * Lead-magnet email modal (appended to
, so prefixed not nested) * ----------------------------------------------------------------------- */ .tnb-cb-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, 0.6); } .tnb-cb-modal[hidden] { display: none; } .tnb-cb-modal__box { position: relative; width: 100%; max-width: 560px; background: #fff; border-radius: 14px; padding: 2.5rem 2.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); font-family: inherit; color: var(--text, #4a5568); text-align: center; } .tnb-cb-modal__title { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 700; color: var(--text-strong, #0f172a); } /* Match the theme's .new-form fields. Label kept for screen readers only. */ .tnb-cb-modal__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tnb-cb-modal__input { width: 100%; height: 45px; padding: 12px !important; box-sizing: border-box; border: 1px solid #e1e4ed; border-radius: 5px; font-size: 14px; font-family: "Outfit", system-ui, sans-serif; color: var(--text-strong, #0f172a); box-shadow: none; outline: none; transition: border-color 0.2s; } .tnb-cb-modal__input::placeholder { color: #b0b8c1; } .tnb-cb-modal__input:focus { border-color: #ed2a32; } .tnb-cb-modal__error { margin: 0.5rem 0 0; font-size: 0.85rem; color: #dc2626; } .tnb-cb-modal__error[hidden] { display: none; } .tnb-cb-modal__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; align-items: center; justify-content: center; } /* Match the theme's .tnb-popup-close (red circle, top-right corner). */ .tnb-cb-modal__close { position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background-color: #ed2a32; border: 2px solid #fff; border-radius: 50%; padding: 8px; color: #fff; cursor: pointer; box-shadow: 0 0 20px rgba(0, 0, 0, 0.51); outline: none; transition: background-color 0.3s; } .tnb-cb-modal__close svg { width: 20px; height: 20px; pointer-events: none; } .tnb-cb-modal__close:hover { background-color: #000; } @media (max-width: 640px) { .tnb-cb-modal__close { top: 5px; right: 5px; } } .tnb-cb-modal__submit { flex: 0 0 auto; } .tnb-cb-modal__submit[disabled] { opacity: 0.6; cursor: not-allowed; } @media (prefers-reduced-motion: no-preference) { .tnb-cb-modal__box { animation: tnb-cb-pop 0.18s ease-out; } @keyframes tnb-cb-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } /* ----------------------------------------------------------------------- * * Blog content-area overrides * * Blocks render inside `.sec-post.det-post .det`, whose rule * `.det p { font-size:18px; color:#666; line-height:1.6; margin-bottom:15px }` * (specificity 0,3,1) outranks the component heading rules above and would * flatten every blockheading to body-text size/colour. !important is the * minimal reliable way to reclaim the intended typography across all the * theme's responsive breakpoint variants of that rule. * ----------------------------------------------------------------------- */ /* Block body paragraphs = 16px (overrides theme `.det p` 18px). Heading rules below use higher-specificity class selectors, so they keep their 20/18px. */ .tnb-block p { font-size: 16px !important; } /* All block headings — 20px desktop / 18px mobile. */ .tnb-block .tnb-cta__heading, .tnb-block .tnb-callout__heading, .tnb-block .tnb-lm__heading, .tnb-block .tnb-pc__title, .tnb-block.tnb-featured-quote .tnb-fq__body, .tnb-block.tnb-featured-quote .tnb-fq__body p { font-size: 20px !important; line-height: 1.3 !important; } @media (max-width: 640px) { .tnb-block .tnb-cta__heading, .tnb-block .tnb-callout__heading, .tnb-block .tnb-lm__heading, .tnb-block .tnb-pc__title, .tnb-block.tnb-featured-quote .tnb-fq__body, .tnb-block.tnb-featured-quote .tnb-fq__body p { font-size: 18px !important; } } /* Per-heading colours / margins (size handled above). */ .tnb-block .tnb-cta__heading { font-size: 24px !important; font-weight: 400 !important; color: #fff !important; margin: 0 0 12px !important; } .tnb-block .tnb-callout__heading { font-size: 18px !important; color: var(--tnb-accent) !important; margin: 0 0 0.25rem !important; } .tnb-block .tnb-lm__heading { font-size: 1.5rem !important; font-weight: 600; color: #fff !important; margin: 0 0 0.3rem !important; } .tnb-block .tnb-lm__desc { color: #fff !important; } .tnb-block .tnb-pc__title { color: var(--tnb-pc-accent, #0f172a) !important; } .tnb-block.tnb-featured-quote .tnb-fq__body, .tnb-block.tnb-featured-quote .tnb-fq__body p { color: var(--text-strong, #0f172a) !important; } /* CTA sub-text: theme body size (no font-size set), just colour + spacing. */ .tnb-block .tnb-cta__text { color: rgba(255, 255, 255, 0.72) !important; margin: 0 auto 28px !important; } /* Ranking List ----------------------------------------------------------- */ /* Values copied 1:1 from the reference design (.bp-rank); the number badge is a real occupying the exact box the reference drew via ::before. */ .tnb-block.tnb-rank { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .tnb-block.tnb-rank li { position: relative; padding: 16px 20px 16px 62px; margin: 0; border: 1px solid #e7e8ec; border-radius: 12px; font-size: 15.5px; line-height: 1.55; color: #3a3f4a; list-style: none; } .tnb-block.tnb-rank .tnb-rank__num { position: absolute; left: 16px; top: 15px; width: 32px; height: 32px; border-radius: 9px; background: #1a1a1c; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; } .tnb-block.tnb-rank li:first-child .tnb-rank__num { background: #ec1c24; } .tnb-block.tnb-rank b { color: #1a1a1c; font-weight: 700; } .tnb-block.tnb-rank .tnb-rank__score { color: #ec1c24; font-weight: 700; font-variant-numeric: tabular-nums; } /* Stats Grid -------------------------------------------------------------- */ /* Values copied 1:1 from the reference design (.bp-stats / .bp-stat). */ .tnb-block.tnb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: clamp(30px, 3.6vw, 42px) 0; border: 1px solid #e7e8ec; border-radius: 16px; overflow: hidden; } .tnb-block.tnb-stats .tnb-stat { padding: 26px 24px; border-right: 1px solid #e7e8ec; } .tnb-block.tnb-stats .tnb-stat:last-child { border-right: none; } .tnb-block.tnb-stats .tnb-stat__v { font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; color: #1a1a1c; line-height: 1; } .tnb-block.tnb-stats .tnb-stat__v .tnb-stat__u { color: #ec1c24; } .tnb-block.tnb-stats .tnb-stat__l { margin-top: 10px; font-size: 14px; font-weight: 500; color: #5a6478; line-height: 1.4; } @media (max-width: 820px) { .tnb-block.tnb-stats { grid-template-columns: 1fr; } .tnb-block.tnb-stats .tnb-stat { border-right: none; border-bottom: 1px solid #e7e8ec; } .tnb-block.tnb-stats .tnb-stat:last-child { border-bottom: none; } }