/* Connectivity callout box — matches the site's existing pros/cons callout pattern (tinted background, colored left border, soft shadow, hover lift) */ .hns-connectivity-box { background-color: #fff4ec; border-left: 5px solid #f35e0a; border-radius: 8px; padding: 20px 24px; margin: 20px 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease; } .hns-connectivity-box:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .hns-connectivity-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; color: #222; } .hns-connectivity-box h3 svg { flex-shrink: 0; } .hns-connectivity-box p { margin: 0; line-height: 1.6; color: #444; } .hns-connectivity-box p strong { color: #f35e0a; } /* Start of Pros and Cons Styling */ ul.no_bull { list-style-type: none; padding: 0; margin: 0; max-width: 800px; /* Constrain width for better readability */ margin: 20px auto; /* Center the list within its container */ /* Integrated body styles for typography */ font-family: Arial, sans-serif; /* Fallback font */ line-height: 1.6; color: #333; } /* Base styling for all list items */ .no_bull li { padding: 15px 20px 15px 60px; /* Top, Right, Bottom, Left (for icon space) */ margin-bottom: 12px; /* Space between items */ border-radius: 8px; background-repeat: no-repeat; background-position: 18px center; /* Icon position: 18px from left, vertically centered */ background-size: 32px 32px; /* Ensure icon size consistency */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */ transition: all 0.3s ease; /* Smooth transition for hover effects */ min-height: 32px; /* Ensure minimum height to accommodate icon */ font-size: 1.05rem; /* Slightly larger text */ } /* Hover effect for all list items */ .no_bull li:hover { transform: translateY(-3px); /* Lift slightly on hover */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Enhance shadow on hover */ } /* PROS specific styling */ li.pro { background-image: url('https://www.homznspace.com/wp-content/uploads/2019/01/checked-pro.png'); background-color: #e8ffe8; /* Light green background */ border-left: 5px solid #4CAF50; /* Green border for visual emphasis */ } /* CONS specific styling */ li.con { background-image: url('https://www.homznspace.com/wp-content/uploads/2019/01/warning-con.png'); background-color: #ffe8e8; /* Light red background */ border-left: 5px solid #FF5722; /* Orange-red border for visual emphasis */ } /* Responsive adjustments */ @media (max-width: 768px) { .no_bull { padding: 0 15px; /* Add some side padding on smaller screens */ } .no_bull li { padding: 12px 15px 12px 55px; /* Adjust padding for smaller screens */ background-position: 12px center; font-size: 1rem; } } @media (max-width: 480px) { .no_bull li { padding: 10px 10px 10px 50px; background-position: 10px center; font-size: 0.95rem; } } /* End of Pros and Cons Styling */ /* ========================================================================== HNS POST TAIL - star rating, author box, comments, sticky author comment Added 2026-08-13 by the Other Sections Makeover project. WHY THIS LIVES IN THE CHILD THEME, NOT A mu-plugin: everything below is rendered OUTSIDE the_content - by the tagDiv theme (author box), the AIOSRS schema plugin (star rating) and wpDiscuz (comments). No content filter can reach it, so it is styled here instead. Scoped to single posts via .single-post so archive/listing pages are untouched. Verified before writing: custom-css.css contained ZERO existing rules for .author-box-wrap, .wpd-comment, #wpdcom, .aiosrs* or .wpd-sticky, so nothing here overrides earlier work. Tokens are redeclared locally: the mu-plugin sections define theirs on .hns-sec, which only exists inside the post content, and these elements sit outside it. ========================================================================== */ .single-post .aiosrs-rating-wrap, .single-post .author-box-wrap, .single-post #wpdcom{ --hns-o:#ff7a1f; --hns-o-dark:#e2650c; --hns-o-wash:#fff8f2; --hns-o-line:#ffe0c7; --hns-gold:#e0a106; --hns-ink:#1c1917; --hns-body:#413c37; --hns-muted:#6f6a64; --hns-line:#e7e2db; --hns-surface:#ffffff; --hns-s2:.5rem; --hns-s3:.75rem; --hns-s4:1rem; --hns-s5:1.25rem; --hns-s6:1.75rem; --hns-radius:14px; --hns-shadow:0px 1px 1.2px rgba(28,25,23,.035),0px 2.7px 3px rgba(28,25,23,.05),0px 6.4px 7.2px rgba(28,25,23,.063),0px 13.2px 14.8px rgba(28,25,23,.075),0px 24.3px 27.3px rgba(28,25,23,.089),0px 44px 49.5px rgba(28,25,23,.11); --hns-shadow-sm:0px .5px .6px rgba(28,25,23,.025),0px 1.6px 1.8px rgba(28,25,23,.035),0px 3.5px 4px rgba(28,25,23,.045); /* Theme's locally hosted face first, matching the post sections exactly. Didact Gothic is a single 400 weight - no bold cut - so hierarchy comes from size and ink. */ --hns-font:'DidactGothic-Regular','Didact Gothic',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; } /* -------------------------------------------------------------------------- 1. STAR RATING (AIOSRS schema plugin) Markup: .aiosrs-rating-wrap > .aiosrs-star-rating-wrap > span.dashicons-star-* The plugin ships small grey dashicons that read as disabled rather than as a score. -------------------------------------------------------------------------- */ .single-post .aiosrs-rating-wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--hns-s3); padding:var(--hns-s3) var(--hns-s4); background:var(--hns-o-wash); border:1px solid var(--hns-o-line); border-radius:999px; width:-moz-fit-content; width:fit-content; font-family:var(--hns-font); } .single-post .aiosrs-star-rating-wrap{display:inline-flex; align-items:center; gap:1px; line-height:1} /* Gold, not orange: a rating star reads as gold almost universally, and it keeps the score distinct from the warm accent the rest of the page uses for navigation. */ .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating{ color:var(--hns-gold); font-size:20px; width:20px; height:20px; line-height:20px; } .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating.dashicons-star-empty{color:#d9d2c7} /* The numeric value the plugin prints alongside the stars. */ .single-post .aiosrs-rating-wrap .aiosrs-rating-average, .single-post .aiosrs-rating-wrap strong{ font-family:var(--hns-font); font-size:1rem; color:var(--hns-ink); } .single-post .aiosrs-rating-wrap p{margin:0; font-family:var(--hns-font); font-size:.9rem; color:var(--hns-muted)} /* -------------------------------------------------------------------------- 2. AUTHOR BOX (tagDiv theme) Markup: .author-box-wrap > a > img.avatar + .desc > .td-author-name > .fn > a -------------------------------------------------------------------------- */ .single-post .author-box-wrap{ display:flex; align-items:flex-start; gap:var(--hns-s5); padding:var(--hns-s5); background:var(--hns-surface); border:1px solid var(--hns-line); border-radius:var(--hns-radius); box-shadow:var(--hns-shadow); font-family:var(--hns-font); margin-bottom:var(--hns-s6); } .single-post .author-box-wrap > a{flex:none; line-height:0} .single-post .author-box-wrap img.avatar{ width:72px; height:72px; border-radius:50%; border:3px solid var(--hns-surface); box-shadow:var(--hns-shadow-sm); margin:0; display:block; } .single-post .author-box-wrap .desc{min-width:0; flex:1} .single-post .author-box-wrap .td-author-name{ margin:0 0 var(--hns-s2); font-family:var(--hns-font); font-size:1.15rem; font-weight:600; line-height:1.3; color:var(--hns-ink); } .single-post .author-box-wrap .td-author-name a{color:var(--hns-ink); text-decoration:none} /* Underline on hover only - the name is already identifiable by size and ink, so a permanent underline would compete with the real links in the bio. */ @media (hover:hover) and (pointer:fine){ .single-post .author-box-wrap .td-author-name a:hover{text-decoration:underline; text-underline-offset:2px} } .single-post .author-box-wrap .td-author-description, .single-post .author-box-wrap .desc p{ margin:0 0 var(--hns-s2); font-family:var(--hns-font); font-size:.97rem; font-weight:400; line-height:1.6; color:var(--hns-body); /* Keep the bio inside a comfortable measure rather than running the full content width. */ max-width:68ch; } .single-post .author-box-wrap .td-author-url a, .single-post .author-box-wrap .desc a:not(.td-author-name a){ color:var(--hns-o-dark); text-decoration:underline; text-underline-offset:2px; } .single-post .author-box-wrap .td-social-icon-wrap a{color:var(--hns-muted)} @media (max-width:600px){ .single-post .author-box-wrap{flex-direction:column; align-items:center; text-align:center; gap:var(--hns-s3); padding:var(--hns-s4)} .single-post .author-box-wrap .td-author-description, .single-post .author-box-wrap .desc p{text-align:center} } /* ===================== END HNS POST TAIL ===================== */ /* ========================================================================== HNS NATIVE COMMENTS Core WordPress comments preserve existing records while removing wpDiscuz's client runtime. The social-login bridge is optional and appears only once providers have been configured in Nextend Social Login. ========================================================================== */ .single-post .hns-native-comments{ --hns-comment-ink:#1c1917; --hns-comment-body:#413c37; --hns-comment-muted:#6f6a64; --hns-comment-line:#e7e2db; --hns-comment-surface:#fff; --hns-comment-wash:#fff8f2; --hns-comment-accent:#e2650c; margin-top:clamp(2.5rem,6vw,4.5rem); font-family:var(--hns-font); color:var(--hns-comment-body); } .single-post .hns-native-comments *, .single-post .hns-native-comments input, .single-post .hns-native-comments textarea, .single-post .hns-native-comments button{font-family:var(--hns-font)} .single-post .hns-native-comments__heading{ margin:0 0 1.25rem; font-size:clamp(1.7rem,3vw,2.35rem); font-weight:400; line-height:1.15; letter-spacing:-.025em; color:var(--hns-comment-ink); } .single-post .hns-native-comments .comment-respond, .single-post .hns-native-comments .comment-body{ background:var(--hns-comment-surface); border:1px solid var(--hns-comment-line); border-radius:14px; box-shadow:0 3px 9px rgba(28,25,23,.06),0 16px 30px -22px rgba(28,25,23,.24); } .single-post .hns-native-comments .comment-respond{padding:clamp(1.1rem,3vw,1.75rem);margin-bottom:1.25rem} .single-post .hns-native-comments .comment-reply-title{ margin:0 0 .35rem; font-size:1.35rem; font-weight:400; line-height:1.2; color:var(--hns-comment-ink); } .single-post .hns-native-comments .comment-notes, .single-post .hns-native-comments .logged-in-as, .single-post .hns-native-comments .comment-form-cookies-consent, .single-post .hns-native-comments .form-submit{margin:.7rem 0 0;color:var(--hns-comment-muted);font-size:.93rem;line-height:1.55} .single-post .hns-native-comments .comment-form-comment, .single-post .hns-native-comments .comment-form-author, .single-post .hns-native-comments .comment-form-email, .single-post .hns-native-comments .comment-form-url{margin:1rem 0 0} .single-post .hns-native-comments label{display:block;margin:0 0 .42rem;font-size:.93rem;color:var(--hns-comment-ink)} .single-post .hns-native-comments textarea, .single-post .hns-native-comments input[type="text"], .single-post .hns-native-comments input[type="email"], .single-post .hns-native-comments input[type="url"]{ box-sizing:border-box;width:100%;min-height:46px;padding:.75rem .9rem; border:1px solid #cfc7bd;border-radius:9px;background:#fff;color:var(--hns-comment-ink); font-size:1rem;line-height:1.45; } .single-post .hns-native-comments textarea{min-height:8rem;resize:vertical} .single-post .hns-native-comments textarea:focus, .single-post .hns-native-comments input:focus{outline:3px solid rgba(226,101,12,.34);outline-offset:1px;border-color:var(--hns-comment-accent)} .single-post .hns-native-comments .submit{ min-height:44px;padding:.72rem 1.35rem;border:0;border-radius:999px; background:var(--hns-comment-accent);color:#fff;cursor:pointer;font-size:1rem; box-shadow:0 5px 12px rgba(226,101,12,.2);transition:background .2s ease,transform .2s ease; } @media (hover:hover) and (pointer:fine){.single-post .hns-native-comments .submit:hover{background:#bd530b;transform:translateY(-1px)}} .single-post .hns-native-comments .submit:focus-visible{outline:3px solid var(--hns-comment-ink);outline-offset:3px} .single-post .hns-native-comments__social-login:empty{display:none} .single-post .hns-native-comments__social-login{margin:.85rem 0 0} .single-post .hns-native-comments .comments-title{margin:2.25rem 0 1rem;font-size:1.35rem;font-weight:400;color:var(--hns-comment-ink)} .single-post .hns-native-comments .comment-list,.single-post .hns-native-comments .children{list-style:none;margin:0;padding:0} .single-post .hns-native-comments .comment-list{display:grid;gap:1rem} .single-post .hns-native-comments .children{margin:1rem 0 0 clamp(1rem,5vw,3.75rem);display:grid;gap:1rem} .single-post .hns-native-comments .comment-body{position:relative;padding:1.15rem} .single-post .hns-native-comments .comment-meta{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 .85rem} .single-post .hns-native-comments .comment-author img{border-radius:50%;width:42px;height:42px;margin:0 .65rem 0 0;vertical-align:middle} .single-post .hns-native-comments .comment-author .fn,.single-post .hns-native-comments .comment-author a{font-style:normal;font-size:1rem;color:var(--hns-comment-ink);text-decoration:none} .single-post .hns-native-comments .comment-metadata{font-size:.84rem;color:var(--hns-comment-muted)} .single-post .hns-native-comments .comment-metadata a,.single-post .hns-native-comments .comment-reply-link{color:var(--hns-comment-accent);text-underline-offset:2px} .single-post .hns-native-comments .comment-content{max-width:72ch;font-size:1rem;line-height:1.65;color:var(--hns-comment-body)} .single-post .hns-native-comments .comment-content > :last-child{margin-bottom:0} .single-post .hns-native-comments .reply{margin-top:.8rem;font-size:.9rem} .single-post .hns-native-comments .no-comments{padding:1rem 1.15rem;background:var(--hns-comment-wash);border:1px solid #ffe0c7;border-radius:10px;color:var(--hns-comment-body)} @media (max-width:600px){ .single-post .hns-native-comments .children{margin-left:1rem} .single-post .hns-native-comments .comment-body{padding:1rem} .single-post .hns-native-comments .comment-meta{display:block} .single-post .hns-native-comments .comment-metadata{display:block;margin:.35rem 0 0 3.3rem} } @media (prefers-reduced-motion:reduce){.single-post .hns-native-comments .submit{transition:none}} /* ========================================================================== HNS POST TAIL v2 - star rating + author box refinement Appended 2026-08-13. Overrides the v1 block above for these two components. ========================================================================== */ /* -------------------------------------------------------------------------- 1. STAR RATING - rebuilt from the site's earlier gradient design Markup (AIOSRS, cannot be changed - CSS only): .aiosrs-rating-wrap .aiosrs-star-rating-wrap > 5x span.dashicons-star-filled|half|empty .aiosrs-rating-summary-wrap > span.aiosrs-rating "3.9/5" + span.aiosrs-rating-count "(41 Reviews)" The previous design in the theme options was: background-image: linear-gradient(225deg,#FF3CAC 0%,#784BA0 50%,#2B86C5 100%); border-radius:10px; padding:15px 15px 15px 42%; Keeping its character - a vivid diagonal gradient panel with white type - and fixing what was wrong with it: - `padding-left:42%` was positioning by guesswork; replaced with a real flex layout that holds at any width. - white text on #FF3CAC measured about 3.0:1 and on #2B86C5 about 3.6:1, both under AA for body text. Every stop is deepened here so white clears 4.5:1 across the whole sweep, with no visible loss of vibrance. - the score was the same size as the caption; now it leads. -------------------------------------------------------------------------- */ .single-post .aiosrs-rating-wrap{ display:flex; align-items:center; gap:var(--hns-s5); width:auto; max-width:26rem; padding:var(--hns-s4) var(--hns-s5); border:0; border-radius:16px; /* Deepened stops of the original 225deg sweep - same journey, AA-safe on white. */ background-color:#8a3f9e; background-image:linear-gradient(225deg,#d81f8c 0%,#6d3f9e 52%,#1e6ca8 100%); /* Inset top highlight reads as a lit edge; the outer layers give real falloff rather than one flat blur. */ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(28,25,23,.18), 0 7px 13px -3px rgba(28,25,23,.24), 0 18px 28px -12px rgba(28,25,23,.3); font-family:var(--hns-font); color:#fff; } /* Score first, then a hairline, then the stars. */ .single-post .aiosrs-rating-wrap .aiosrs-rating-summary-wrap{ order:-1; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; font-weight:400; color:#fff; padding-right:var(--hns-s5); border-right:1px solid rgba(255,255,255,.28); } .single-post .aiosrs-rating-wrap .aiosrs-rating{ display:block; font-family:var(--hns-font); font-size:2.1rem; line-height:1; letter-spacing:-.01em; color:#fff; white-space:nowrap; } .single-post .aiosrs-rating-wrap .aiosrs-rating-count{ display:block; font-size:.86rem; line-height:1.3; color:rgba(255,255,255,.88); white-space:nowrap; } .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap{ display:inline-flex; align-items:center; gap:2px; line-height:1; } /* Gold on the gradient, with a soft dark edge so the stars keep their shape over the lightest part of the sweep. Empty stars stay white-translucent rather than grey - grey would read as a rendering fault on a colored panel. */ .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating{ color:#ffd15c; font-size:24px; width:24px; height:24px; line-height:24px; text-shadow:0 1px 2px rgba(28,25,23,.28); } .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating.dashicons-star-empty{ color:rgba(255,255,255,.42); text-shadow:none; } @media (max-width:600px){ .single-post .aiosrs-rating-wrap{max-width:none; gap:var(--hns-s4); padding:var(--hns-s4)} .single-post .aiosrs-rating-wrap .aiosrs-rating{font-size:1.8rem} .single-post .aiosrs-rating-wrap .aiosrs-rating-summary-wrap{padding-right:var(--hns-s4)} .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating{ font-size:20px; width:20px; height:20px; line-height:20px; } } /* -------------------------------------------------------------------------- 2. AUTHOR BOX - refinement Markup: .author-box-wrap > a > img.avatar + .desc > .td-author-name.vcard > .fn > a + .td-author-description + .td-author-social The v1 pass made it a card; it still read as an avatar next to a wall of text. This adds the hierarchy that was missing: a labelled role for the block, a name that leads, and a bio set at a comfortable measure and rhythm. -------------------------------------------------------------------------- */ .single-post .author-box-wrap{ position:relative; overflow:hidden; gap:var(--hns-s6); padding:var(--hns-s6) var(--hns-s5) var(--hns-s5); } /* Warm rail, matching the section components inside the post. */ .single-post .author-box-wrap::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--hns-o) 0%,var(--hns-gold) 100%); } .single-post .author-box-wrap img.avatar{ width:88px; height:88px; border:3px solid var(--hns-surface); box-shadow:0 0 0 2px var(--hns-o-line), var(--hns-shadow-sm); } /* "Written by" names what the block is. The theme prints only the author's name, so without it the card opens on a bare proper noun with no context. Generated content, so it is decorative to assistive tech - the name itself is still the real heading. */ .single-post .author-box-wrap .td-author-name::before{ content:"Written by"; display:block; margin-bottom:.15rem; font-family:var(--hns-font); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--hns-o-dark); font-weight:400; } .single-post .author-box-wrap .td-author-name{ margin:0 0 var(--hns-s3); font-size:1.4rem; line-height:1.25; } .single-post .author-box-wrap .td-author-description{ margin:0; font-size:1rem; line-height:1.7; color:var(--hns-body); max-width:66ch; } .single-post .author-box-wrap .td-author-social{margin-top:var(--hns-s3)} @media (max-width:600px){ .single-post .author-box-wrap{padding:var(--hns-s5) var(--hns-s4) var(--hns-s4)} .single-post .author-box-wrap img.avatar{width:76px; height:76px} .single-post .author-box-wrap .td-author-name{font-size:1.25rem} .single-post .author-box-wrap .td-author-name::before{text-align:center} } /* ===================== END HNS POST TAIL v2 ===================== */ /* ========================================================================== HNS POST TAIL v3 - author box layout, full-width rating banner Appended 2026-08-13. Overrides the v1/v2 blocks above for these two. ========================================================================== */ /* -------------------------------------------------------------------------- 1. AUTHOR BOX - kill the dead column The v2 layout was a two-column flex row: avatar in column one, everything else in column two. Because the avatar is ~88px tall and the bio runs 15+ lines, column one was mostly empty - a tall blank strip down the left of the card. Fixed by promoting the avatar and the NAME onto a shared top row and letting the bio span the full width beneath both. The theme's markup nests name/bio/social inside a single `.desc` div, so `display:contents` dissolves that wrapper and lets its children be placed individually on the grid. Nothing in the markup changes. -------------------------------------------------------------------------- */ .single-post .author-box-wrap{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas: "avatar name" "bio bio" "social social"; column-gap:var(--hns-s5); row-gap:var(--hns-s4); align-items:center; padding:var(--hns-s6) var(--hns-s5) var(--hns-s5); } .single-post .author-box-wrap > a{grid-area:avatar; align-self:center} /* Dissolve the wrapper so name, bio and social become grid items in their own right. */ .single-post .author-box-wrap .desc{display:contents} .single-post .author-box-wrap .td-author-name{grid-area:name; align-self:center; margin:0} .single-post .author-box-wrap .td-author-description{grid-area:bio; margin:0; max-width:72ch} .single-post .author-box-wrap .td-author-social{grid-area:social; margin:0} /* A float-clearing div has no job inside a grid and would otherwise claim its own row. */ .single-post .author-box-wrap .clearfix{display:none} /* Bigger now that it shares a row with the name instead of anchoring a column. */ .single-post .author-box-wrap img.avatar{width:104px; height:104px; max-width:none; object-fit:cover} @media (max-width:600px){ /* Single column: at 375px an avatar plus a name on one row leaves the name about 12 characters wide. */ .single-post .author-box-wrap{ grid-template-columns:minmax(0,1fr); grid-template-areas:"avatar" "name" "bio" "social"; justify-items:center; text-align:center; row-gap:var(--hns-s3); } .single-post .author-box-wrap img.avatar{width:84px; height:84px; max-width:none} .single-post .author-box-wrap .td-author-description{text-align:left} } /* -------------------------------------------------------------------------- 2. RATING - full-width banner v2 capped this at 26rem, which left it as a small chip floating in a wide column. Full width turns it into a proper section banner. The content stays left-grouped rather than stretched apart: a score and five stars pushed to opposite ends of a 700px panel would read as two unrelated objects. -------------------------------------------------------------------------- */ .single-post .aiosrs-rating-wrap{ display:flex; width:100%; max-width:none; align-items:center; gap:var(--hns-s5); padding:var(--hns-s5) var(--hns-s6); margin:0 0 var(--hns-s5); border-radius:16px; } .single-post .aiosrs-rating-wrap .aiosrs-rating{font-size:2.4rem} .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating{ font-size:28px; width:28px; height:28px; line-height:28px; } @media (max-width:600px){ .single-post .aiosrs-rating-wrap{ padding:var(--hns-s4); gap:var(--hns-s4); border-radius:14px; } .single-post .aiosrs-rating-wrap .aiosrs-rating{font-size:1.8rem} .single-post .aiosrs-rating-wrap .aiosrs-star-rating-wrap .aiosrs-star-rating{ font-size:20px; width:20px; height:20px; line-height:20px; } } /* ===================== END HNS POST TAIL v3 ===================== */ /* ========================================================================== HNS POST TAIL v4 - author box label wording - rating banner content centred - section separators reworked - sticky sidebar fix (the rail was dying after the post content) Appended 2026-08-13. Overrides earlier blocks where they conflict. ========================================================================== */ /* -------------------------------------------------------------------------- 1. AUTHOR BOX - label wording -------------------------------------------------------------------------- */ .single-post .author-box-wrap .td-author-name::before{ content:"Real Estate Expert"; } /* -------------------------------------------------------------------------- 2. RATING BANNER - centre the score and stars Now that the panel is full width, left-grouped content left a long empty tail. Centring makes the banner read as one deliberate unit at any width. -------------------------------------------------------------------------- */ .single-post .aiosrs-rating-wrap{justify-content:center} .single-post .aiosrs-rating-wrap .aiosrs-rating-summary-wrap{align-items:center; text-align:center} /* -------------------------------------------------------------------------- 3. SECTION SEPARATORS Source markup (WPBakery + tagDiv, cannot be changed here): div.vc_separator.td_separator_shadow > span[style="color:orange;width:100%"] > span[style="box-shadow:0 10px 10px 3px"] The stock version is a hairline with a heavy blurred drop shadow under it, which at normal zoom reads as a smudge rather than a divider - and there are 10 of them on a project post, so the smudge repeats down the whole page. Replaced with a tapered rule: solid in the middle where the eye lands, fading out at both ends so it separates without drawing a hard box across the column. A small centred diamond gives it a deliberate midpoint. Inline styles have to be beaten with !important because they sit on the elements themselves. -------------------------------------------------------------------------- */ /* REVISED 2026-08-14: the v4 version (3px, solid full-saturation orange) read as too bold and heavy once seen repeated ~10 times down a full project page - a hard bar rather than a quiet divider. Dropped to a 1px near-invisible ink hairline - which then read as too plain, effectively gone (2026-08-15 feedback). REVISED 2026-08-15 (v2): brand-orange gradient line + small ring-and-diamond emblem - still read as not visible enough. REVISED 2026-08-15 (v3): rebuilt on the classic "soft shadow arc + floating circular badge" divider pattern (ref: codepen.io/fenixmedia/pen/myZbXd). The line itself is now a soft, blurred, gently tapered shadow rather than a hard-edged rule - it reads as depth, not a bar - and a white circular badge floats on top of its centre carrying the one solid mark. The badge is what a scanning eye catches; it's a deliberate landmark rather than a decoration, which is what the flat line versions above were missing. No new markup needed - the original inline-styled (position 1) is repurposed as the badge's diamond mark; its own nested stays hidden as before. */ .single-post .vc_separator{ position:relative; margin:2.75rem 0 !important; height:16px; overflow:visible; } /* The soft shadow arc: a wide, very flat, heavily blurred ellipse - no visible edge, just a glow that reads as a curved line under the badge. */ .single-post .vc_separator::before{ content:""; position:absolute; left:6%; right:6%; top:50%; height:5px; transform:translateY(-50%); border-radius:50%; box-shadow:0 3px 9px rgba(255,122,31,.32), 0 1px 3px rgba(28,25,23,.07); } /* The floating badge: white disc, soft lift, thin orange ring - the actual focal point. */ .single-post .vc_separator::after{ content:""; position:absolute; left:50%; top:50%; width:32px; height:32px; transform:translate(-50%,-50%); background:#fff; border-radius:50%; box-shadow:0 4px 12px rgba(28,25,23,.16), 0 0 0 1.5px rgba(255,122,31,.55); } /* Repurposed original span: the diamond mark, centred inside the badge, above it in z-order. */ .single-post .vc_separator > span{ display:block !important; position:absolute; left:50%; top:50%; z-index:1; width:8px !important; height:8px !important; border:0 !important; border-radius:1.5px; transform:translate(-50%,-50%) rotate(45deg) !important; background:#ff7a1f !important; box-shadow:none !important; } /* The inner span exists only to carry the stock blur. */ .single-post .vc_separator > span > span{ display:none !important; box-shadow:none !important; } @media (max-width:600px){ .single-post .vc_separator{margin:2rem 0 !important} } /* ========================================================================== HNS POST TAIL v5 - sidebar: remove the internal scrollbar introduced in v4 - Group Buy fixed CTA: smaller Appended 2026-08-13. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SIDEBAR - no internal scroll v4 added `max-height:calc(100vh - 120px); overflow-y:auto` as a guard against a sidebar taller than the viewport (a sticky element taller than the screen never unsticks). On this template the widget stack is ~741px and always fits, so the guard did nothing useful and the `overflow-y:auto` produced a scrollbar INSIDE the rail - a scroll region nested in the page scroll, which is exactly what was reported. Removed. The rail now behaves like any other part of the post: full height, no inner scrolling, pinned while its row lasts. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. GROUP BUY FIXED CTA - smaller SOURCE OF TRUTH: the button's own CSS is injected from JavaScript, not from a stylesheet - `wp-content/themes/newspaper-child/hns-group-buy-popup.js`, the `.hns-gbp-fab` rule that starts around line 99. That is the place to edit the real values. Overriding here instead of editing that file keeps the change reversible and out of a 36KB JS module that also drives the popup. If you would rather change it at source, the properties that set the size are: `padding`, `gap`, `border`, plus `.hns-gbp-fab-icon` `font-size` and `.hns-gbp-fab-label` `font-size`/`letter-spacing`. Roughly a quarter smaller overall, while staying above the 44px minimum touch target. -------------------------------------------------------------------------- */ .hns-gbp-fab{ padding:11px 7px !important; gap:6px !important; border-width:3px !important; border-radius:10px 0 0 10px !important; min-width:44px; } .hns-gbp-fab .hns-gbp-fab-icon{font-size:17px !important} .hns-gbp-fab .hns-gbp-fab-label{ font-size:10.5px !important; letter-spacing:.6px !important; } @media (max-width:600px){ .hns-gbp-fab{padding:9px 6px !important} .hns-gbp-fab .hns-gbp-fab-icon{font-size:15px !important} .hns-gbp-fab .hns-gbp-fab-label{font-size:9.5px !important} } /* ===================== END HNS POST TAIL v5 ===================== */ /* ========================================================================== HNS POST TAIL v6 - sticky sidebar paints above the lead-gen section Appended 2026-08-14. THE BUG: scrolling to the lead-gen block made the sticky sidebar disappear behind it. Not a sticky failure - a paint-order one. `#hns-leadgen` carries `position:relative` with `z-index:100`, which puts it above the sidebar, whose z-index was `auto`. Once the two overlapped vertically the lead-gen simply painted on top. Fixed by giving the sticky rail its own stacking position above that block. 101 is chosen to clear #hns-leadgen's 100 while staying far below the site's fixed furniture (the Group Buy FAB sits at 99998 and the plan lightbox at 100000), so nothing that should cover the page gets covered by the sidebar. ========================================================================== */ /* ===================== END HNS POST TAIL v6 ===================== */ /* =========================================================================== HNS LEGACY CONTENT - Ultimate Addons replacements The two public instances formerly depended on Ultimate Addons for WPBakery. Both now use semantic, dependency-free markup while retaining their purpose. =========================================================================== */ .single-post .hns-legacy-group-buy-wrap{ margin:2rem 0; text-align:center; } .single-post .hns-legacy-group-buy-cta{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem; min-height:54px; padding:.75rem 1.35rem; border:1px solid #b94e0a; border-radius:10px; background:#e2650c; box-shadow:0 6px 15px rgba(141,58,7,.25); color:#fff; cursor:pointer; font-family:var(--hns-font); font-size:1.04rem; font-weight:400; line-height:1.2; transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease; } .single-post .hns-legacy-group-buy-cta span{font-size:.84rem;opacity:.92} @media (hover:hover) and (pointer:fine){ .single-post .hns-legacy-group-buy-cta:hover{background:#bd530b;transform:translateY(-1px);box-shadow:0 10px 20px rgba(141,58,7,.28)} } .single-post .hns-legacy-group-buy-cta:focus-visible{outline:3px solid #1c1917;outline-offset:3px} .page .hns-legacy-section-heading{ margin:0 0 1.15rem; color:#1c1917; font-family:'Didact Gothic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:400; line-height:1.1; letter-spacing:-.025em; } @media (prefers-reduced-motion:reduce){.single-post .hns-legacy-group-buy-cta{transition:none}} /* Project-post content contrast hardening for legacy VC and Structured Content blocks. */ .single-post .hns-core-single__content .hns-sec-head + p > em{color:#625c54!important;font-style:italic} .single-post .hns-core-single__content .sc_fs_faq{margin:0 0 .75rem;padding:1.05rem 1.15rem;border:1px solid #e1d7ca;border-radius:10px;background:#fffdf9;box-shadow:0 7px 18px rgba(61,44,28,.06)} .single-post .hns-core-single__content .wpb_wrapper > h2:has(+ .sc_fs_faq){color:#27211c!important;font-size:clamp(1.6rem,3vw,2.25rem);font-weight:400;line-height:1.18} .single-post .hns-core-single__content .sc_fs_faq,.single-post .hns-core-single__content .sc_fs_faq h3,.single-post .hns-core-single__content .sc_fs_faq p{color:#27211c!important} .single-post .hns-core-single__content .sc_fs_faq h3{margin:0 0 .45rem;font-size:1.12rem;font-weight:600;line-height:1.35} .single-post .hns-core-single__content .sc_fs_faq p{margin:0;line-height:1.65} .single-post .hns-core-single__content .sc_fs_faq a{color:#a9470d!important;text-decoration:none} .single-post .hns-core-single__content .wpb_vc_table .vc-table-plugin-theme-classic_orange{width:100%;border-collapse:collapse;border:1px solid #dccfbe;background:#fffdf9;color:#27211c} .single-post .hns-core-single__content .wpb_vc_table .vc-table-plugin-theme-classic_orange .vc_table_cell{padding:.72rem .9rem!important;border:1px solid #dccfbe!important;background:#fffdf9;color:#27211c!important} .single-post .hns-core-single__content .wpb_vc_table .vc-table-plugin-theme-classic_orange .vc_table_content{color:inherit!important} .single-post .hns-core-single__content .wpb_vc_table .vc-table-plugin-theme-classic_orange .vc-th .vc_table_cell{background:#f35e0a!important;color:#fff!important} .single-post .hns-core-single__content .wpb_vc_table .vc-table-plugin-theme-classic_orange tr:not(.vc-th):nth-child(odd) .vc_table_cell{background:#fff4e4} .single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange){width:100%;border-collapse:separate;border-spacing:12px;margin:1.25rem 0 2rem;background:transparent} .single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) td{padding:1rem 1.1rem;border:1px solid #e1d7ca;border-radius:9px;background:#fffdf9;color:#4b433a!important;vertical-align:top} .single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) h1,.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) h2,.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) h3,.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) p{margin:.05rem 0;color:#27211c!important} .single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) h3{font-size:1.1rem;font-weight:600} .single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) p{font-size:.98rem;color:#625c54!important} @media(max-width:600px){.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange),.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) tbody,.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) tr,.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) td{display:block;width:100%}.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange){border-spacing:0}.single-post .hns-core-single__content .aboutBuilder table:not(.vc-table-plugin-theme-classic_orange) td{margin:0 0 .65rem}} /* Production-compatible project utility classes retained by older post content. */ .single-post .hns-core-single__content .upcoming-proj-banner{display:block;max-width:100%;overflow:hidden;border:1px solid #854200;border-radius:20px;box-shadow:0 2px 4px rgba(14,30,37,.12),0 2px 16px rgba(14,30,37,.32)} .single-post .hns-core-single__content .upcoming-proj-banner img,.single-post .hns-core-single__content img.upcoming-proj-banner{display:block;width:100%;height:auto} .single-post .hns-core-single__content .aboutBuilder,.single-post .hns-core-single__content .about-builder{padding:10px;border-radius:17px;box-shadow:0 26px 58px rgba(0,0,0,.22),0 5px 14px rgba(0,0,0,.18)} @media(max-width:600px){.single-post .hns-core-single__content .upcoming-proj-banner{border-radius:12px}.single-post .hns-core-single__content .aboutBuilder,.single-post .hns-core-single__content .about-builder{padding:6px;border-radius:12px}} /* === M123 post-contrast === */ /* Orange/grey accents used for text or behind white text fell below WCAG AA (4.5:1). Darken only in those roles; decorative brand orange is unchanged. */ .hns-core-single__content .vc-th .vc_table_cell,.hns-core-single__content .vc-th .vc_table_content{background-color:#c2410c!important;color:#fff!important} .hns-loc-btn,.hns-loc-btn span{background-color:#c2410c!important;color:#fff!important} .comment-respond #submit,.comment-form .submit,.comment-form input[type=submit]{background-color:#c2410c!important;color:#fff!important} .comment-list time,.comment-metadata time,.comment-metadata a,.comment-reply-link,.comment-list .reply a{color:#b3470a!important} [id$="-more-btn"],[id$="-more-btn"] span{color:#b3470a!important} .hns-connectivity-box strong{color:#a8430b!important} .hns-pml-link,.hns-pml-text strong{color:#9a4f17!important} .hns-so-price,.hns-so-table td{color:#635d56!important} /* === end M123 === */ /* === M129 post-typography === */ /* Normalises post sections onto the .hns-core-single type/space tokens (defined in style.css M129 block). Content column only. */ /* H2 section titles: one size/weight everywhere (section heads, price section, FAQ, reviews, legacy headings) */ body.single-post .hns-core-single .hns-core-single__content h2:not(.grp-buy-ghb-top *, table *, .hns-core-post-conversion *){font-size:var(--post-fs-h2);font-weight:var(--post-fw-h2);line-height:var(--post-lh-heading);letter-spacing:-.005em;text-wrap:balance} body.single-post .hns-core-single .hns-core-single__content .wpb_wrapper > h2:has(+ .sc_fs_faq), body.single-post .hns-core-single .hns-core-single__content h2.styled-text{margin:var(--post-space-section) 0 var(--post-space-5)} /* H3 sub-heads */ body.single-post .hns-core-single .hns-core-single__content :is(.hns-compare,.hns-testimonials) > h3, body.single-post .hns-core-single .hns-core-single__content .hns-connectivity-box > h3{font-size:var(--post-fs-h3);font-weight:var(--post-fw-h3);line-height:var(--post-lh-snug)} body.single-post .hns-core-single .hns-core-single__content .hns-cost-card > h3{font-size:var(--post-fs-h4);font-weight:var(--post-fw-h3);line-height:var(--post-lh-snug)} /* Prose: single body size + comfortable measure */ body.single-post .hns-core-single .hns-core-single__content .wpb_text_column > .wpb_wrapper > :is(p,ul,ol){max-width:var(--post-measure)} body.single-post .hns-core-single .hns-core-single__content .wpb_text_column > .wpb_wrapper > p, body.single-post .hns-core-single .hns-core-single__content .wpb_text_column > .wpb_wrapper > :is(ul,ol) > li{font-size:var(--post-fs-body);line-height:var(--post-lh-body)} /* Group Buy price section: lift sub-13px text onto the small/caption steps */ body.single-post .hns-core-single .hns-gbs :is(.label,.sub,.hns-trust,.hns-t-card strong,.hns-cta small){font-size:var(--post-fs-caption)} body.single-post .hns-core-single .hns-gbs th{font-size:var(--post-fs-caption)} body.single-post .hns-core-single .hns-gbs .hns-compare-cell span{font-size:var(--post-fs-caption)} body.single-post .hns-core-single .hns-gbs .hns-cost-card li, body.single-post .hns-core-single .hns-gbs :is(.chip-text,.hns-disclaimer p,.hns-video-copy p){font-size:var(--post-fs-small);line-height:1.5} body.single-post .hns-core-single .hns-gbs .hns-t-card p{font-size:.9375rem;line-height:1.55} body.single-post .hns-core-single .hns-gbs td{font-size:.9375rem} /* Group Buy explainer card */ body.single-post .hns-core-single .grp-buy-ghb-top > p, body.single-post .hns-core-single .grp-buy-accordion-content p{font-size:.9375rem;line-height:1.6} body.single-post .hns-core-single :is(.grp-buy-highlight-item,.grp-buy-trust-item,.grp-buy-ghb-cta small){font-size:var(--post-fs-caption)} /* Section cards whose own header lives inside a legacy framed row: drop the frame so the heading is not glued to a shadow edge */ body.single-post .hns-core-single .hns-core-single__content :is(.aboutBuilder,.about-builder):has(.hns-sec-head){padding:0;box-shadow:none;border-radius:0} /* Section rhythm: every section head sits on the same step */ body.single-post .hns-core-single .hns-core-single__content .hns-sec-head{margin-top:var(--post-space-section)} /* M129b: intro/process prose, legacy vc tables, sold-out price variant */ body.single-post .hns-core-single .hns-core-single__content :is(.hns-intro-p:not(.hns-intro-p--lead),.hns-proc-text){font-size:var(--post-fs-body);line-height:var(--post-lh-body);max-width:var(--post-measure)} body.single-post .hns-core-single .hns-core-single__content td.vc_table_cell{line-height:1.4} body.single-post .hns-core-single .hns-gbs-so th{font-size:var(--post-fs-caption)} body.single-post .hns-core-single .hns-gbs-so td{font-size:.9375rem} body.single-post .hns-core-single .hns-core-single__content :is(.hns-so-notice,.hns-soc-inline-cta) > h3{font-size:var(--post-fs-h4);font-weight:var(--post-fw-h3);line-height:var(--post-lh-snug)} body.single-post .hns-core-single .hns-core-single__content :is(.hns-so-notice,.hns-soc-inline-cta) > p{font-size:.9375rem;line-height:1.55} body.single-post .hns-core-single .hns-gbs .hns-badge{color:#b3470a} /* === end M129 === */