/* * NestTidy Article MVP 2.0.0 — frontend * v1.2.0 keeps the accepted v1.1.2 visual system. The importer does not * require new public-facing styles. */ :root { --nt-article-blue: var(--global-palette1, #7593a6); --nt-article-blue-dark: var(--global-palette2, #58778a); --nt-article-heading: var(--global-palette3, #1f2930); --nt-article-text: var(--global-palette4, #35424a); --nt-article-muted: var(--global-palette5, #5f6c73); --nt-article-border: var(--global-palette7, #e8eff2); --nt-article-soft: var(--global-palette8, #f5f8f9); --nt-article-white: var(--global-palette9, #ffffff); --nt-article-warm: #f8f5ef; --nt-article-warm-border: #ebe1d1; --nt-article-warning: #fff8ed; --nt-article-warning-border: #eed8b6; } body.single-post { overflow-x: clip; } .nt-editor-only { display: none !important; } body.single-post .site-main article.single-entry, body.single-post .site-main article.entry:not(.loop-entry), body.single-post .site-main article.post:not(.loop-entry) { box-sizing: border-box; width: 100% !important; max-width: 820px !important; margin-right: auto !important; margin-left: auto !important; } body.single-post .site-main article:not(.loop-entry) > .entry-content-wrap, body.single-post .site-main article:not(.loop-entry) .entry-header, body.single-post .site-main article:not(.loop-entry) .entry-content, body.single-post .site-main article:not(.loop-entry) .post-thumbnail { box-sizing: border-box; width: 100%; max-width: 820px; margin-right: auto; margin-left: auto; } body.single-post .site-main article:not(.loop-entry) .entry-content > .alignwide:not(.nt-comparison-wrap), body.single-post .site-main article:not(.loop-entry) .entry-content > .alignfull:not(.nt-comparison-wrap) { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; } body.single-post .site-main article:not(.loop-entry) .nt-comparison-wrap { position: relative; left: 50%; box-sizing: border-box; width: min(1100px, calc(100vw - 3rem)); max-width: none; margin-right: 0; margin-left: 0; transform: translateX(-50%); } body.single-post .entry-content { color: var(--nt-article-text); } body.single-post .entry-content > p { line-height: 1.75; } body.single-post .site-main article:not(.loop-entry) .entry-content > h2 { margin-top: 2.8rem; margin-bottom: 1rem; } body.single-post .site-main article:not(.loop-entry) .entry-content > h3 { margin-top: 2rem; margin-bottom: 0.75rem; } .nt-article-lead { margin-bottom: 1.75rem !important; color: var(--nt-article-text); font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.75; } .nt-takeaways, .nt-toc, .nt-tip, .nt-checklist, .nt-warning, .nt-before-buy, .nt-disclosure, .nt-product-box, .nt-cta { box-sizing: border-box; margin-block: 1.75rem; padding: clamp(1.2rem, 3vw, 1.65rem); border: 1px solid var(--nt-article-border); border-radius: 16px; } .nt-takeaways { border-color: var(--nt-article-warm-border); background: var(--nt-article-warm); } .nt-toc, .nt-checklist, .nt-before-buy { background: var(--nt-article-soft); } .nt-tip { border-left: 4px solid var(--nt-article-blue); background: var(--nt-article-white); box-shadow: 0 12px 28px rgba(31, 41, 48, 0.05); } .nt-warning { border-color: var(--nt-article-warning-border); background: var(--nt-article-warning); } .nt-disclosure { padding-block: 1rem; background: var(--nt-article-soft); color: var(--nt-article-muted); font-size: 0.92rem; } .nt-product-box { border-color: rgba(117, 147, 166, 0.35); background: linear-gradient(145deg, rgba(117, 147, 166, 0.08), var(--nt-article-white)); } .nt-product-label { margin-bottom: 0.55rem !important; color: var(--nt-article-blue-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .nt-link-reminder { padding: 0.75rem 0.9rem; border-radius: 8px; background: var(--nt-article-warning); color: var(--nt-article-text); font-size: 0.9rem; } .nt-cta { margin-block: 2.25rem; padding: clamp(1.5rem, 4vw, 2.2rem); border-color: rgba(117, 147, 166, 0.28); background: #eef5f7; } .nt-takeaways > :first-child, .nt-toc > :first-child, .nt-tip > :first-child, .nt-checklist > :first-child, .nt-warning > :first-child, .nt-before-buy > :first-child, .nt-disclosure > :first-child, .nt-product-box > :first-child, .nt-cta > :first-child { margin-top: 0; } .nt-takeaways > :last-child, .nt-toc > :last-child, .nt-tip > :last-child, .nt-checklist > :last-child, .nt-warning > :last-child, .nt-before-buy > :last-child, .nt-disclosure > :last-child, .nt-product-box > :last-child, .nt-cta > :last-child { margin-bottom: 0; } .nt-takeaways h2, .nt-toc h2, .nt-cta h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); } .nt-tip h3, .nt-checklist h3, .nt-warning h3, .nt-before-buy h3, .nt-product-box h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } .nt-takeaways li, .nt-toc li, .nt-checklist li, .nt-warning li, .nt-before-buy li, .nt-product-box li { margin-bottom: 0.5rem; } .nt-takeaways li:last-child, .nt-toc li:last-child, .nt-checklist li:last-child, .nt-warning li:last-child, .nt-before-buy li:last-child, .nt-product-box li:last-child { margin-bottom: 0; } .nt-toc a { color: var(--nt-article-blue-dark); text-decoration-thickness: 1px; text-underline-offset: 0.17em; } .nt-toc a:hover { color: var(--nt-article-heading); } .nt-faq { margin-block: 1.5rem 2rem; } .nt-faq .wp-block-details { margin: 0 0 0.75rem; overflow: hidden; border: 1px solid var(--nt-article-border); border-radius: 12px; background: var(--nt-article-white); } .nt-faq .wp-block-details summary { padding: 1rem 1.1rem; color: var(--nt-article-heading); font-weight: 700; cursor: pointer; } .nt-faq .wp-block-details[open] summary { border-bottom: 1px solid var(--nt-article-border); background: var(--nt-article-soft); } .nt-faq .wp-block-details > p { padding: 0 1.1rem 1rem; margin: 1rem 0 0; } .nt-comparison-wrap { margin-block: 1.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .nt-comparison-table { min-width: 680px; } .nt-comparison-table table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .nt-comparison-table th, .nt-comparison-table td { padding: 0.85rem; border: 1px solid var(--nt-article-border); text-align: left; vertical-align: top; } .nt-comparison-table th { background: var(--nt-article-soft); color: var(--nt-article-heading); font-weight: 700; } .nt-comparison-table tbody tr:nth-child(even) { background: rgba(245, 248, 249, 0.55); } .nt-cta .wp-block-buttons { margin-top: 1.2rem; } .nt-cta-button .wp-block-button__link { border-radius: 7px; background: var(--nt-article-blue); color: #fff; font-size: 0.92rem; font-weight: 700; text-decoration: none; } .nt-cta-button .wp-block-button__link:not([href]) { display: none !important; } .nt-cta-button .wp-block-button__link[href]:hover { background: var(--nt-article-blue-dark); color: #fff; } body.single-post .entry-content a:focus-visible, body.single-post .entry-content button:focus-visible, body.single-post .entry-content summary:focus-visible, .nt-cta-button .wp-block-button__link:focus-visible { outline: 3px solid var(--nt-article-blue-dark); outline-offset: 3px; border-radius: 4px; } body.single-post .entry-related.alignfull { position: relative; left: auto !important; right: auto !important; box-sizing: border-box; width: 100% !important; max-width: none !important; margin: clamp(3.5rem, 6vw, 5.5rem) 0 0 !important; padding: clamp(3rem, 5vw, 4.5rem) 0 !important; overflow: hidden; background: var(--nt-article-soft); transform: none !important; } body.single-post .entry-related .entry-related-inner.content-container.site-container { box-sizing: border-box; width: min(1240px, calc(100% - 3rem)) !important; max-width: 1240px !important; margin-right: auto !important; margin-left: auto !important; padding-right: 0 !important; padding-left: 0 !important; } body.single-post .entry-related .entry-related-inner-content.alignwide { box-sizing: border-box; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.single-post .entry-related .entry-related-title { width: 100%; margin: 0 0 2rem !important; color: var(--nt-article-heading); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; } body.single-post .entry-related .entry-related-carousel, body.single-post .entry-related .splide__track { width: 100%; max-width: 100%; } body.single-post .entry-related .kadence-posts-list { margin: 0 !important; padding: 0 !important; } body.single-post .entry-related .entry-list-item { box-sizing: border-box; height: auto !important; } body.single-post .entry-related article.loop-entry { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--nt-article-border); border-radius: 14px; background: var(--nt-article-white); box-shadow: 0 14px 34px rgba(31, 41, 48, 0.05); } body.single-post .entry-related .post-thumbnail { display: block; width: 100%; aspect-ratio: 16 / 9 !important; overflow: hidden; background: #eaf0f3; } body.single-post .entry-related .post-thumbnail-inner { width: 100%; height: 100%; } body.single-post .entry-related .post-thumbnail img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } body.single-post .entry-related article.loop-entry:not(.has-post-thumbnail)::before { content: "NestTidy"; display: grid; width: 100%; aspect-ratio: 16 / 9; place-items: center; background: linear-gradient(145deg, rgba(117,147,166,.14), rgba(245,248,249,.96)); color: var(--nt-article-blue-dark); font-size: clamp(1.15rem, 2.5vw, 1.65rem); font-weight: 700; letter-spacing: -0.025em; } body.single-post .entry-related article.loop-entry .entry-content-wrap { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 1.25rem !important; } body.single-post .entry-related article.loop-entry .entry-header { width: 100%; max-width: none; margin: 0; } body.single-post .entry-related article.loop-entry .entry-title { margin: 0 !important; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.3; letter-spacing: -0.015em; } body.single-post .entry-related article.loop-entry .entry-title a { color: var(--nt-article-heading); } body.single-post .entry-related article.loop-entry .entry-title a:hover { color: var(--nt-article-blue-dark); } body.single-post .entry-related article.loop-entry .entry-taxonomies, body.single-post .entry-related article.loop-entry .entry-meta, body.single-post .entry-related article.loop-entry .entry-summary, body.single-post .entry-related article.loop-entry .entry-footer { display: none !important; } @media (max-width: 820px) { body.single-post .site-main article.single-entry, body.single-post .site-main article.entry:not(.loop-entry), body.single-post .site-main article.post:not(.loop-entry) { max-width: 100% !important; } body.single-post .entry-related .entry-related-inner.content-container.site-container { width: min(100% - 2.5rem, 760px) !important; } } @media (max-width: 600px) { body.single-post { overflow-x: hidden; } body.single-post .site-main article:not(.loop-entry) .nt-comparison-wrap { width: calc(100vw - 2rem); } .nt-takeaways, .nt-toc, .nt-tip, .nt-checklist, .nt-warning, .nt-before-buy, .nt-disclosure, .nt-product-box, .nt-cta { padding: 1.1rem; border-radius: 12px; } .nt-article-lead { font-size: 1.05rem; } .nt-comparison-table { min-width: 620px; } body.single-post .entry-related.alignfull { margin-top: 3.5rem !important; padding: 2.75rem 0 !important; } body.single-post .entry-related .entry-related-inner.content-container.site-container { width: calc(100% - 2rem) !important; } body.single-post .entry-related .entry-related-title { margin-bottom: 1.5rem !important; font-size: clamp(1.8rem, 9vw, 2.35rem); } body.single-post .entry-related article.loop-entry .entry-content-wrap { padding: 1rem !important; } } @media (prefers-reduced-motion: reduce) { .nt-faq *, .nt-cta-button *, body.single-post .entry-related * { scroll-behavior: auto !important; transition: none !important; } } /* ------------------------------------------------------------------------- * Step-by-Step Guide 2.0 — v2.2.0 TEST * All new presentation rules are strictly scoped under .nt-step-guide-v2. * ---------------------------------------------------------------------- */ body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2 { box-sizing: border-box; width: min(1180px, calc(100vw - 3rem)); max-width: 1180px; margin-right: auto; margin-left: 50%; transform: translateX(-50%); } .nt-step-guide-v2 { --nt-step-card: #F5F8F9; --nt-step-blue-soft: #E8EFF2; --nt-step-blue: #7593A6; --nt-step-blue-dark: #58778A; --nt-step-warm: #C7A66A; --nt-step-dark: #1F2930; --nt-step-text: #35424A; --nt-step-muted: #5F6C73; --nt-step-border: #DCE6EA; --nt-step-white: #FFFFFF; color: var(--nt-step-text); } .nt-step-guide-v2 .nt-step-guide-lead { max-width: 820px; margin-right: auto; margin-left: auto; } .nt-step-guide-v2 .nt-step-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; max-width: 980px; margin: 1.5rem auto 2.5rem; } .nt-step-guide-v2 .nt-step-info-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--nt-step-border); border-radius: 14px; background: var(--nt-step-card); } .nt-step-guide-v2 .nt-step-info-label { margin: 0 0 0.25rem !important; color: var(--nt-step-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .nt-step-guide-v2 .nt-step-info-value { margin: 0 !important; color: var(--nt-step-dark); font-size: 1.05rem; font-weight: 750; } .nt-step-guide-v2 .nt-step-guide-shell { display: grid; grid-template-columns: 230px minmax(0, 800px); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; justify-content: center; } .nt-step-guide-v2 .nt-step-guide-sidebar { position: sticky; top: 6.5rem; padding: 1rem 1rem 1.1rem; border: 1px solid var(--nt-step-border); border-radius: 14px; background: rgba(255,255,255,0.96); box-shadow: 0 10px 28px rgba(31,41,48,0.045); } .nt-step-guide-v2 .nt-step-guide-sidebar > h3 { margin: 0 0 0.75rem; color: var(--nt-step-dark); font-size: 0.95rem; } .nt-step-guide-v2 .nt-step-guide-nav-list nav { display: grid; gap: 0.1rem; } .nt-step-guide-v2 .nt-step-guide-nav-link { display: block; padding: 0.45rem 0.55rem; border-radius: 7px; color: var(--nt-step-muted); font-size: 0.88rem; line-height: 1.35; text-decoration: none; } .nt-step-guide-v2 .nt-step-guide-nav-link:hover, .nt-step-guide-v2 .nt-step-guide-nav-link.is-active { background: var(--nt-step-blue-soft); color: var(--nt-step-blue-dark); } .nt-step-guide-v2 .nt-step-guide-nav-link.is-active { font-weight: 700; } .nt-step-guide-v2 .nt-step-guide-main { min-width: 0; } .nt-step-guide-v2 .nt-step-guide-section { scroll-margin-top: 6.5rem; } .nt-step-guide-v2 .nt-quick-answer { margin: 0 0 2rem; padding: clamp(1.25rem, 3vw, 1.7rem); border: 1px solid rgba(117,147,166,0.28); border-radius: 16px; background: var(--nt-step-blue-soft); } .nt-step-guide-v2 .nt-quick-answer > :first-child, .nt-step-guide-v2 .nt-before-start > :first-child, .nt-step-guide-v2 .nt-step > :first-child, .nt-step-guide-v2 .nt-done-when > :first-child, .nt-step-guide-v2 .nt-step-callout > :first-child { margin-top: 0; } .nt-step-guide-v2 .nt-quick-answer > :last-child, .nt-step-guide-v2 .nt-before-start > :last-child, .nt-step-guide-v2 .nt-step > :last-child, .nt-step-guide-v2 .nt-done-when > :last-child, .nt-step-guide-v2 .nt-step-callout > :last-child { margin-bottom: 0; } .nt-step-guide-v2 .nt-before-start { margin: 0 0 2.2rem; padding: clamp(1.25rem, 3vw, 1.65rem); border: 1px solid var(--nt-step-border); border-radius: 16px; background: var(--nt-step-card); } .nt-step-guide-v2 .nt-step-prep-list { list-style: none; padding-left: 0; } .nt-step-guide-v2 .nt-step-prep-list li { position: relative; margin-bottom: 0.6rem; padding-left: 1.75rem; } .nt-step-guide-v2 .nt-step-prep-list li::before { position: absolute; top: 0; left: 0; color: var(--nt-step-blue-dark); content: "✓"; font-weight: 800; } .nt-step-guide-v2 .nt-step { margin: 0 0 2.5rem; padding: 0 0 2.3rem; border-bottom: 1px solid var(--nt-step-border); } .nt-step-guide-v2 .nt-step-number { margin: 0 0 0.35rem !important; color: var(--nt-step-blue-soft); font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; } .nt-step-guide-v2 .nt-step h2 { margin-top: 0.2rem !important; margin-bottom: 0.55rem !important; color: var(--nt-step-dark); font-size: clamp(1.8rem, 3.2vw, 2.65rem); letter-spacing: -0.03em; line-height: 1.08; } .nt-step-guide-v2 .nt-step-subtitle { margin-top: 0 !important; color: var(--nt-step-blue-dark); font-size: 1.08rem; font-weight: 650; } .nt-step-guide-v2 .nt-step .wp-block-image { margin: 1.4rem 0; } .nt-step-guide-v2 .nt-step .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 16px; } .nt-step-guide-v2 .nt-done-when { margin-top: 1.25rem; padding: 0.9rem 1rem; border-radius: 11px; background: var(--nt-step-card); } .nt-step-guide-v2 .nt-done-when strong { color: var(--nt-step-dark); } .nt-step-guide-v2 .nt-step-tip, .nt-step-guide-v2 .nt-step-callout { margin: -0.5rem 0 2.5rem; padding: 1.15rem 1.25rem; border: 1px solid var(--nt-step-border); border-left: 4px solid var(--nt-step-blue); border-radius: 14px; background: var(--nt-step-white); } .nt-step-guide-v2 .nt-step-callout-label { margin: 0 0 0.35rem !important; color: var(--nt-step-blue-dark); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .nt-step-guide-v2 .nt-budget-option { border-left-color: var(--nt-step-warm); background: #FAF7F1; } .nt-step-guide-v2 .nt-renter-friendly { border-left-color: var(--nt-step-blue-dark); background: var(--nt-step-blue-soft); } .nt-step-guide-v2 .nt-step-mistakes { margin: 0 0 2.5rem; } .nt-step-guide-v2 .nt-step-guide-cta { margin-top: 2.8rem; } .nt-step-guide-v2 .nt-step-mobile-tools { display: none; } .nt-step-guide-v2 .nt-step-progress { padding: 0.8rem 0 0.2rem; } .nt-step-guide-v2 .nt-step-progress-label { margin-bottom: 0.45rem; color: var(--nt-step-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .nt-step-guide-v2 .nt-step-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--nt-step-blue-soft); } .nt-step-guide-v2 .nt-step-progress-bar { height: 100%; border-radius: inherit; background: var(--nt-step-blue-dark); transition: width 180ms ease; } .nt-step-guide-v2 .nt-step-mobile-toc { overflow: hidden; border: 1px solid var(--nt-step-border); border-radius: 12px; background: var(--nt-step-white); } .nt-step-guide-v2 .nt-step-mobile-toc summary { padding: 0.85rem 1rem; color: var(--nt-step-dark); font-weight: 750; cursor: pointer; } .nt-step-guide-v2 .nt-step-mobile-toc nav { display: grid; padding: 0 0.55rem 0.7rem; } @media (max-width: 920px) { body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2 { width: min(100% - 2rem, 820px); margin-left: auto; margin-right: auto; transform: none; } .nt-step-guide-v2 .nt-step-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nt-step-guide-v2 .nt-step-guide-shell { display: block; } .nt-step-guide-v2 .nt-step-guide-sidebar { display: none; } .nt-step-guide-v2 .nt-step-mobile-tools { display: grid; position: sticky; z-index: 20; top: 0; gap: 0.55rem; margin: 0 -0.35rem 1.5rem; padding: 0.55rem 0.35rem 0.75rem; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); } } @media (max-width: 600px) { body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2 { width: calc(100% - 1rem); } .nt-step-guide-v2 .nt-step-info-grid { gap: 0.5rem; margin-bottom: 1.7rem; } .nt-step-guide-v2 .nt-step-info-card { padding: 0.85rem 0.9rem; border-radius: 11px; } .nt-step-guide-v2 .nt-quick-answer, .nt-step-guide-v2 .nt-before-start { padding: 1.1rem; border-radius: 13px; } .nt-step-guide-v2 .nt-step-number { font-size: 3.2rem; } .nt-step-guide-v2 .nt-step h2 { font-size: clamp(1.65rem, 8vw, 2.1rem); } .nt-step-guide-v2 .nt-step .wp-block-image img { border-radius: 12px; } } @media (prefers-reduced-motion: reduce) { .nt-step-guide-v2 .nt-step-progress-bar { transition: none; } } /* ------------------------------------------------------------------------- * v2.2.1 TEST — Desktop two-column hardening for WordPress/Kadence * * WordPress global block layout rules may apply max-width / auto margins to * nested wp-block-group elements. These rules force the Step Guide shell and * its two direct columns to remain independent on desktop. * ---------------------------------------------------------------------- */ @media (min-width: 921px) { body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 100% !important; max-width: 980px !important; margin-right: auto !important; margin-left: auto !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid > .nt-step-info-card { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-shell { display: grid !important; grid-template-columns: 240px minmax(0, 820px) !important; column-gap: clamp(2.25rem, 4vw, 3.75rem) !important; align-items: start !important; justify-content: center !important; width: 100% !important; max-width: 1120px !important; margin: 2.25rem auto 0 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-shell > .nt-step-guide-sidebar { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; margin: 0 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-shell > .nt-step-guide-main { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 820px !important; margin: 0 !important; } /* * Neutralize WordPress/Kadence nested constrained-layout margins inside * the right content column. Each article section owns the full 820px column. */ body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main > .wp-block-group, body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main > .wp-block-image, body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main > .wp-block-paragraph, body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main > .wp-block-heading { width: 100% !important; max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-sidebar { position: sticky !important; top: 7rem !important; z-index: 5 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-sidebar, body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main { float: none !important; clear: none !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-tools { display: none !important; } } /* * Tablet/mobile stays single-column. Sidebar is fully removed from layout, * so it can never overlap the article body. */ @media (max-width: 920px) { body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-shell { display: block !important; width: 100% !important; max-width: 820px !important; margin-right: auto !important; margin-left: auto !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-sidebar { display: none !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-main { width: 100% !important; max-width: none !important; margin: 0 !important; } } /* ------------------------------------------------------------------------- * v2.2.2 TEST — Project Info grid hardening * Desktop: 4 cards in one row * Tablet/mobile: 2 x 2 * ---------------------------------------------------------------------- */ body.single-post .entry-content .nt-step-guide-v2 > .nt-step-info-grid, body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid { display: grid !important; width: 100% !important; max-width: 1120px !important; margin: 1.35rem auto 2.35rem !important; padding: 0 !important; gap: 12px !important; box-sizing: border-box !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid > .nt-step-info-card { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 14px 16px !important; box-sizing: border-box !important; min-height: 78px !important; } @media (min-width: 921px) { body.single-post .entry-content .nt-step-guide-v2 > .nt-step-info-grid, body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 601px) and (max-width: 920px) { body.single-post .entry-content .nt-step-guide-v2 > .nt-step-info-grid, body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 760px !important; } } @media (max-width: 600px) { body.single-post .entry-content .nt-step-guide-v2 > .nt-step-info-grid, body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 1.6rem !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-info-grid > .nt-step-info-card { min-height: 70px !important; padding: 11px 12px !important; } } /* v2.2.3 TEST — native Gutenberg Columns structural layout */ .nt-step-guide-v2.wp-block-group.alignwide { width: min(1180px, calc(100vw - 2rem)) !important; max-width: 1180px !important; margin-right: auto !important; margin-left: auto !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; max-width: 1120px !important; margin: 1.35rem auto 2.35rem !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid > .wp-block-column.nt-step-info-card { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: clamp(2.25rem, 4vw, 3.75rem) !important; width: 100% !important; max-width: 1120px !important; margin: 2.25rem auto 0 !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .wp-block-column.nt-step-guide-sidebar { flex: 0 0 240px !important; width: 240px !important; min-width: 240px !important; max-width: 240px !important; margin: 0 !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .wp-block-column.nt-step-guide-main { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 820px !important; margin: 0 !important; } @media (min-width: 921px) { .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .nt-step-guide-sidebar { display: block !important; position: sticky !important; top: 7rem !important; align-self: flex-start !important; } } @media (max-width: 920px) { .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell { display: block !important; max-width: 820px !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .nt-step-guide-sidebar { display: none !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .nt-step-guide-main { width: 100% !important; max-width: none !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid { flex-wrap: wrap !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid > .wp-block-column.nt-step-info-card { flex: 0 0 calc(50% - 6px) !important; } } @media (max-width: 600px) { .nt-step-guide-v2.wp-block-group.alignwide { width: calc(100% - 1rem) !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid { gap: 8px !important; } .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid > .wp-block-column.nt-step-info-card { flex-basis: calc(50% - 4px) !important; } } /* ------------------------------------------------------------------------- * v2.2.4 TEST — Centered Step Guide container * * Overrides the older breakout transform used by the first Step Guide test. * The new structural Columns layout must be centered in the viewport and keep * a safe horizontal gutter on both sides. * ---------------------------------------------------------------------- */ body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2, body.single-post .entry-content > .nt-step-guide-v2.wp-block-group.alignwide, body.single-post .entry-content .nt-step-guide-v2.wp-block-group.alignwide { position: relative !important; left: auto !important; right: auto !important; width: min(1120px, calc(100vw - 64px)) !important; max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; box-sizing: border-box !important; } body.single-post .entry-content .nt-step-guide-v2 .wp-block-columns.nt-step-info-grid, body.single-post .entry-content .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Desktop shell: keep the sidebar/content pair centered inside the safe area. */ @media (min-width: 921px) { body.single-post .entry-content .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell { justify-content: center !important; } body.single-post .entry-content .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .nt-step-guide-sidebar { flex: 0 0 220px !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; } body.single-post .entry-content .nt-step-guide-v2 .wp-block-columns.nt-step-guide-shell > .nt-step-guide-main { flex: 1 1 0 !important; max-width: 820px !important; } } /* Give narrower screens a smaller but still visible safety gutter. */ @media (max-width: 920px) { body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2, body.single-post .entry-content > .nt-step-guide-v2.wp-block-group.alignwide, body.single-post .entry-content .nt-step-guide-v2.wp-block-group.alignwide { width: min(820px, calc(100vw - 32px)) !important; max-width: 820px !important; } } @media (max-width: 600px) { body.single-post .site-main article:not(.loop-entry) .entry-content > .nt-step-guide-v2, body.single-post .entry-content > .nt-step-guide-v2.wp-block-group.alignwide, body.single-post .entry-content .nt-step-guide-v2.wp-block-group.alignwide { width: calc(100vw - 24px) !important; max-width: none !important; } } /* ------------------------------------------------------------------------- * v2.2.5 TEST — Mobile TOC / scroll behavior * * The whole mobile tools area must stay in normal document flow. * Expanded TOC must never become a tall sticky overlay. * ---------------------------------------------------------------------- */ @media (max-width: 920px) { body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-tools { display: grid !important; position: static !important; top: auto !important; z-index: auto !important; width: 100% !important; max-width: none !important; margin: 0 0 1.75rem !important; padding: 0 !important; gap: 1rem !important; background: transparent !important; backdrop-filter: none !important; overflow: visible !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-toc { display: block !important; position: static !important; width: 100% !important; max-width: none !important; overflow: visible !important; margin: 0 !important; background: #FFFFFF !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-toc summary { display: list-item !important; padding: 0.95rem 1rem !important; font-size: 1rem !important; line-height: 1.3 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-toc nav { display: grid !important; position: static !important; width: 100% !important; max-height: none !important; overflow: visible !important; padding: 0 0.65rem 0.85rem !important; box-sizing: border-box !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-toc .nt-step-guide-nav-link { display: block !important; width: 100% !important; padding: 0.7rem 0.75rem !important; box-sizing: border-box !important; font-size: 0.95rem !important; line-height: 1.35 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-progress { position: static !important; width: 100% !important; margin: 0 !important; padding: 0.2rem 0 0 !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-guide-section { scroll-margin-top: 1.25rem !important; } } /* ------------------------------------------------------------------------- * v2.2.6 TEST — Mobile sticky mini-nav + bottom sheet * ---------------------------------------------------------------------- */ .nt-step-sheet-backdrop, .nt-step-bottom-sheet { display: none; } @media (max-width: 920px) { body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-tools { display: block !important; position: sticky !important; top: var(--nt-step-sticky-top, 0px) !important; z-index: 90 !important; width: 100% !important; max-width: none !important; margin: 0 0 1.6rem !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } .nt-step-guide-v2 .nt-step-mobile-bar { width: 100%; padding: 0.7rem 0.85rem 0.6rem; border: 1px solid var(--nt-step-border); border-radius: 14px; background: rgba(255,255,255,0.97); box-shadow: 0 8px 24px rgba(31,41,48,0.08); backdrop-filter: blur(12px); box-sizing: border-box; } .nt-step-guide-v2 .nt-step-mobile-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-width: 0; } .nt-step-guide-v2 .nt-step-mobile-bar-copy { flex: 1 1 auto; min-width: 0; } .nt-step-guide-v2 .nt-step-mobile-bar-step { margin-bottom: 0.18rem; color: var(--nt-step-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .nt-step-guide-v2 .nt-step-mobile-bar-current { overflow: hidden; color: var(--nt-step-dark); font-size: 0.95rem; font-weight: 760; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .nt-step-guide-v2 .nt-step-mobile-bar-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.55rem 0.7rem; border: 0; border-radius: 10px; background: var(--nt-step-blue-soft); color: var(--nt-step-blue-dark); font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; } .nt-step-guide-v2 .nt-step-mobile-bar-chevron { font-size: 1rem; line-height: 1; } .nt-step-guide-v2 .nt-step-mobile-bar .nt-step-progress-track { height: 4px; margin-top: 0.6rem; } .nt-step-guide-v2 .nt-step-guide-section { scroll-margin-top: calc(var(--nt-step-sticky-top, 0px) + 92px) !important; } .nt-step-sheet-backdrop { display: block; position: fixed; z-index: 9980; inset: 0; background: rgba(31,41,48,0.36); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms ease; } .nt-step-sheet-backdrop.is-open { opacity: 1; visibility: visible; } .nt-step-bottom-sheet { display: flex; position: fixed; z-index: 9990; right: 0; bottom: 0; left: 0; flex-direction: column; width: 100%; max-height: min(78vh, 720px); padding: 0.45rem 1rem max(1rem, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #FFFFFF; box-shadow: 0 -16px 50px rgba(31,41,48,0.18); transform: translateY(105%); visibility: hidden; transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 220ms ease; box-sizing: border-box; } .nt-step-bottom-sheet.is-open { transform: translateY(0); visibility: visible; } .nt-step-sheet-handle { width: 42px; height: 4px; margin: 0.1rem auto 0.8rem; border-radius: 999px; background: #D7E0E4; } .nt-step-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0 0.15rem 0.8rem; border-bottom: 1px solid var(--nt-step-border); } .nt-step-sheet-eyebrow { margin-bottom: 0.15rem; color: var(--nt-step-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .nt-step-sheet-title { margin: 0 !important; color: var(--nt-step-dark); font-size: 1.65rem !important; line-height: 1.1 !important; } .nt-step-sheet-close { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid var(--nt-step-border); border-radius: 50%; background: #FFFFFF; color: var(--nt-step-dark); font-size: 1.7rem; line-height: 1; cursor: pointer; } .nt-step-sheet-nav { overflow-y: auto; overscroll-behavior: contain; padding: 0.65rem 0 0.25rem; -webkit-overflow-scrolling: touch; } .nt-step-sheet-link { display: flex; position: relative; align-items: center; min-height: 46px; padding: 0.7rem 0.8rem 0.7rem 2.8rem; border-radius: 11px; color: var(--nt-step-text); font-size: 0.98rem; line-height: 1.3; text-decoration: none; box-sizing: border-box; } .nt-step-sheet-link[data-step-number]::before { position: absolute; left: 0.75rem; color: var(--nt-step-blue); content: attr(data-step-number); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.05em; } .nt-step-sheet-link:hover, .nt-step-sheet-link:focus-visible, .nt-step-sheet-link.is-active { background: var(--nt-step-blue-soft); color: var(--nt-step-blue-dark); outline: none; } .nt-step-sheet-link.is-active { font-weight: 800; } html.nt-step-sheet-open, body.nt-step-sheet-open { overflow: hidden !important; overscroll-behavior: none; } } @media (max-width: 480px) { .nt-step-guide-v2 .nt-step-mobile-bar { padding: 0.62rem 0.7rem 0.55rem; border-radius: 12px; } .nt-step-guide-v2 .nt-step-mobile-bar-button span:first-child { display: none; } .nt-step-guide-v2 .nt-step-mobile-bar-button { min-width: 42px; padding-right: 0.6rem; padding-left: 0.6rem; } .nt-step-bottom-sheet { max-height: 82vh; padding-right: 0.8rem; padding-left: 0.8rem; } } @media (prefers-reduced-motion: reduce) { .nt-step-sheet-backdrop, .nt-step-bottom-sheet { transition: none; } } /* ------------------------------------------------------------------------- * v2.2.7 TEST — Mobile sticky header offset hardening * ---------------------------------------------------------------------- */ @media (max-width: 920px) { body.single-post .entry-content .nt-step-guide-v2 { overflow: visible !important; } body.single-post .entry-content .nt-step-guide-v2 .nt-step-mobile-tools { /* * JS sets this to the actual visible bottom of the stacked * WordPress/Kadence header area. Fallback keeps the bar usable if JS * has not run yet. */ top: var(--nt-step-sticky-top, 0px) !important; z-index: 500 !important; } } /* ------------------------------------------------------------------------- * v2.2.8 TEST — Step-by-Step Guide visual polish * No structural/layout changes. Presentation only. * ---------------------------------------------------------------------- */ body.nt-step-guide-page { --nt-v2-white: #FFFFFF; --nt-v2-soft: #F5F8F9; --nt-v2-blue-soft: #E8EFF2; --nt-v2-blue: #7593A6; --nt-v2-blue-dark: #58778A; --nt-v2-warm: #C7A66A; --nt-v2-dark: #1F2930; --nt-v2-text: #35424A; --nt-v2-muted: #5F6C73; --nt-v2-border: #D8E3E8; } /* Article title area, only on posts that actually contain Step Guide 2.0. */ body.nt-step-guide-page .entry-title, body.nt-step-guide-page .entry-header .entry-title { max-width: 920px; color: var(--nt-v2-dark); letter-spacing: -0.035em; line-height: 1.04; } body.nt-step-guide-page .entry-meta { color: var(--nt-v2-muted); } .nt-step-guide-v2 { color: var(--nt-v2-text); font-size: 1rem; line-height: 1.72; } /* Lead */ .nt-step-guide-v2 .nt-step-guide-lead { max-width: 880px !important; margin-top: 1.1rem !important; margin-bottom: 1.55rem !important; color: var(--nt-v2-text); font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.7; } /* Project Info */ .nt-step-guide-v2 .nt-step-info-card { min-height: 74px !important; padding: 13px 16px !important; border: 1px solid var(--nt-v2-border) !important; border-radius: 14px !important; background: linear-gradient(180deg, #F8FAFB 0%, #F3F7F8 100%) !important; box-shadow: 0 1px 0 rgba(31,41,48,0.02); } .nt-step-guide-v2 .nt-step-info-label { margin: 0 0 0.24rem !important; color: var(--nt-v2-muted) !important; font-size: 0.68rem !important; font-weight: 800 !important; letter-spacing: 0.09em !important; } .nt-step-guide-v2 .nt-step-info-value { margin: 0 !important; color: var(--nt-v2-dark) !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.25 !important; } /* Desktop TOC */ .nt-step-guide-v2 .nt-step-guide-sidebar { padding: 1rem !important; border: 1px solid var(--nt-v2-border) !important; border-radius: 14px !important; background: rgba(255,255,255,0.97) !important; box-shadow: 0 10px 30px rgba(31,41,48,0.055) !important; } .nt-step-guide-v2 .nt-step-guide-sidebar > h3 { margin-bottom: 0.65rem !important; color: var(--nt-v2-dark) !important; font-size: 1rem !important; font-weight: 800 !important; } .nt-step-guide-v2 .nt-step-guide-nav-link { padding: 0.48rem 0.58rem !important; border-radius: 8px !important; color: var(--nt-v2-muted) !important; font-size: 0.86rem !important; transition: background 120ms ease, color 120ms ease; } .nt-step-guide-v2 .nt-step-guide-nav-link:hover, .nt-step-guide-v2 .nt-step-guide-nav-link.is-active { background: var(--nt-v2-blue-soft) !important; color: var(--nt-v2-blue-dark) !important; } .nt-step-guide-v2 .nt-step-guide-nav-link.is-active { font-weight: 800 !important; } /* Section rhythm */ .nt-step-guide-v2 .nt-step-guide-main > * + * { margin-top: 1.7rem; } .nt-step-guide-v2 .nt-step-guide-section { scroll-margin-top: 7.5rem; } /* Quick Answer */ .nt-step-guide-v2 .nt-quick-answer { margin-bottom: 1.8rem !important; padding: clamp(1.35rem, 2.5vw, 1.8rem) !important; border: 1px solid rgba(117,147,166,0.30) !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(232,239,242,0.95), rgba(245,248,249,0.92)) !important; box-shadow: inset 4px 0 0 rgba(117,147,166,0.62); } .nt-step-guide-v2 .nt-quick-answer h2 { margin: 0 0 0.55rem !important; color: var(--nt-v2-dark) !important; font-size: clamp(1.75rem, 3vw, 2.25rem) !important; letter-spacing: -0.03em; } .nt-step-guide-v2 .nt-quick-answer p { margin-bottom: 0 !important; } /* Before You Start */ .nt-step-guide-v2 .nt-before-start { margin-bottom: 2.2rem !important; padding: clamp(1.35rem, 2.5vw, 1.75rem) !important; border: 1px solid var(--nt-v2-border) !important; border-radius: 16px !important; background: var(--nt-v2-soft) !important; } .nt-step-guide-v2 .nt-before-start h2 { margin: 0 0 0.85rem !important; color: var(--nt-v2-dark) !important; font-size: clamp(1.65rem, 2.7vw, 2.05rem) !important; letter-spacing: -0.025em; } .nt-step-guide-v2 .nt-step-prep-list { margin-bottom: 0 !important; } .nt-step-guide-v2 .nt-step-prep-list li { margin-bottom: 0.62rem !important; padding-left: 1.8rem !important; } .nt-step-guide-v2 .nt-step-prep-list li:last-child { margin-bottom: 0 !important; } .nt-step-guide-v2 .nt-step-prep-list li::before { color: var(--nt-v2-blue-dark) !important; font-size: 1.05rem; } /* Steps */ .nt-step-guide-v2 .nt-step { position: relative; margin-bottom: 2.8rem !important; padding-bottom: 2.6rem !important; border-bottom: 1px solid var(--nt-v2-border) !important; } .nt-step-guide-v2 .nt-step-number { margin: 0 0 0.15rem !important; color: #DCE6EA !important; font-size: clamp(3.6rem, 8vw, 5.6rem) !important; font-weight: 850 !important; letter-spacing: -0.07em !important; line-height: 0.88 !important; } .nt-step-guide-v2 .nt-step h2 { margin: 0.35rem 0 0.5rem !important; color: var(--nt-v2-dark) !important; font-size: clamp(1.85rem, 3vw, 2.4rem) !important; letter-spacing: -0.035em !important; line-height: 1.08 !important; } .nt-step-guide-v2 .nt-step-subtitle { margin: 0 0 1.05rem !important; color: var(--nt-v2-blue-dark) !important; font-size: 1rem !important; font-weight: 750 !important; } .nt-step-guide-v2 .nt-step .wp-block-image { margin: 1.4rem 0 1.15rem !important; } .nt-step-guide-v2 .nt-step .wp-block-image img { display: block; width: 100%; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(31,41,48,0.06); } /* Done When */ .nt-step-guide-v2 .nt-done-when { margin-top: 1rem !important; padding: 0.95rem 1.05rem !important; border: 1px solid var(--nt-v2-border) !important; border-radius: 11px !important; background: #F7FAFB !important; } .nt-step-guide-v2 .nt-done-when p { margin: 0 !important; color: var(--nt-v2-text); font-size: 0.94rem; } .nt-step-guide-v2 .nt-done-when strong { color: var(--nt-v2-dark) !important; } /* NestTidy Tip and custom callouts */ .nt-step-guide-v2 .nt-step-tip, .nt-step-guide-v2 .nt-step-callout { margin: 0 0 2.4rem !important; padding: 1.15rem 1.25rem !important; border: 1px solid var(--nt-v2-border) !important; border-left: 4px solid var(--nt-v2-blue) !important; border-radius: 14px !important; background: var(--nt-v2-white) !important; box-shadow: 0 6px 18px rgba(31,41,48,0.035); } .nt-step-guide-v2 .nt-step-callout-label { margin-bottom: 0.3rem !important; color: var(--nt-v2-blue-dark) !important; font-size: 0.7rem !important; font-weight: 850 !important; letter-spacing: 0.11em !important; } .nt-step-guide-v2 .nt-budget-option { border-left-color: var(--nt-v2-warm) !important; background: #FBF8F2 !important; } .nt-step-guide-v2 .nt-renter-friendly { border-left-color: var(--nt-v2-blue-dark) !important; background: var(--nt-v2-blue-soft) !important; } /* Mistakes */ .nt-step-guide-v2 .nt-step-mistakes { padding: clamp(1.35rem, 2.5vw, 1.7rem) !important; border: 1px solid rgba(199,166,106,0.48) !important; border-radius: 16px !important; background: #FCF8F1 !important; } .nt-step-guide-v2 .nt-step-mistakes h2 { margin: 0 0 0.7rem !important; color: var(--nt-v2-dark) !important; } /* FAQ */ .nt-step-guide-v2 .nt-faq { margin-top: 2.4rem !important; } .nt-step-guide-v2 .nt-faq > h2 { margin-bottom: 1rem !important; color: var(--nt-v2-dark) !important; } .nt-step-guide-v2 .nt-faq .wp-block-details { margin: 0 0 0.65rem !important; overflow: hidden; border: 1px solid var(--nt-v2-border) !important; border-radius: 12px !important; background: var(--nt-v2-white) !important; } .nt-step-guide-v2 .nt-faq .wp-block-details summary { padding: 0.95rem 1rem !important; color: var(--nt-v2-dark); font-weight: 750; cursor: pointer; } .nt-step-guide-v2 .nt-faq .wp-block-details > p { padding: 0 1rem 1rem !important; } /* CTA */ .nt-step-guide-v2 .nt-step-guide-cta { margin-top: 2.5rem !important; padding: clamp(1.4rem, 3vw, 1.9rem) !important; border: 1px solid rgba(117,147,166,0.30) !important; border-radius: 16px !important; background: linear-gradient(135deg, #EAF1F3 0%, #F5F8F9 100%) !important; } .nt-step-guide-v2 .nt-step-guide-cta h2 { margin: 0 0 0.55rem !important; color: var(--nt-v2-dark) !important; } .nt-step-guide-v2 .nt-cta-button .wp-block-button__link { border-radius: 10px !important; background: var(--nt-v2-blue-dark) !important; color: #FFFFFF !important; font-weight: 800 !important; } /* Mobile polish */ @media (max-width: 920px) { .nt-step-guide-v2 { line-height: 1.65; } .nt-step-guide-v2 .nt-step-guide-lead { font-size: 1.05rem !important; } .nt-step-guide-v2 .nt-step-info-card { min-height: 76px !important; padding: 12px 14px !important; } .nt-step-guide-v2 .nt-quick-answer, .nt-step-guide-v2 .nt-before-start, .nt-step-guide-v2 .nt-step-mistakes, .nt-step-guide-v2 .nt-step-guide-cta { border-radius: 14px !important; } .nt-step-guide-v2 .nt-step { margin-bottom: 2.2rem !important; padding-bottom: 2rem !important; } .nt-step-guide-v2 .nt-step-number { font-size: 4rem !important; } .nt-step-guide-v2 .nt-step h2 { font-size: clamp(1.75rem, 7.5vw, 2.1rem) !important; } .nt-step-guide-v2 .nt-step .wp-block-image img { border-radius: 13px !important; } } @media (max-width: 600px) { .nt-step-guide-v2 .nt-step-info-grid { margin-top: 1.1rem !important; margin-bottom: 1.5rem !important; } .nt-step-guide-v2 .nt-step-info-label { font-size: 0.65rem !important; } .nt-step-guide-v2 .nt-step-info-value { font-size: 0.98rem !important; } .nt-step-guide-v2 .nt-quick-answer { box-shadow: inset 3px 0 0 rgba(117,147,166,0.62); } }