/* ========================================================================== Blog — /blogs and /post/{slug} ========================================================================== */ /* REGRESSION FIX 2026-09-04. The site header is `position: fixed` and out of flow, so anything starting at y=0 renders underneath it. On the 22 post pages the breadcrumb sat at y=80 beneath a 133px header — fully occluded. The original's post pages use the SAME `.header-blog` band as /blogs: the testi.png texture, min-height 745, and `padding: 200px 3% 220px`. That 200px of top padding is what clears the fixed nav, and the 220px bottom is what the hero image's -220px lift pulls up into. Reproduced here rather than inventing an offset. */ .post-header { background-image: url("/images/ui/testi.png"); background-position: 50%; background-repeat: no-repeat; background-size: cover; color: var(--white); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 745px; padding: 200px 3% 220px; text-align: center; } /* padding-top drops to 0 at <=767 and the band centres its content instead — the centring inside a 745px band is what provides the clearance there. Copied from the original rather than substituting an invented offset. */ @media screen and (max-width: 767px) { .post-header { justify-content: center; padding-top: 0; padding-bottom: 162px; } } @media screen and (max-width: 479px) { .post-header { min-height: 680px; } } /* CORRECTED 2026-09-10. This is the original's `.heading-h1` (site.css:3428) and it was wrong on five properties at once, which is why the byline below it could not land at the right y: property original was font-size 65px 67.2px (--fs-h1), 55px at <=767, 44px at <=479 line-height 1.1 1.2 (--lh-heading) max-width 750px 56rem = 896px margin-inline 0 (LEFT-aligned auto (block centred) block, centred text) margin-bottom 0 1rem Measured on /post/stop-teeth-grinding-moonstone-dental at 1440: the original's h1 is 750 x 286 at x=43.188 with centred text; the rebuild's was 896 x 322.563 at x=272. The block sits at the container's left edge because `.heading-h1` declares no auto margins — only `text-align: center`. -------------------------------------------------------------------------- */ .post-header__title { color: var(--white); text-align: center; max-width: 750px; margin: 0; font-size: 65px; line-height: 1.1; } @media screen and (max-width: 767px) { .post-header__title { font-size: 55px; } } @media screen and (max-width: 479px) { .post-header__title { font-size: 44px; } } /* `.post-header__meta` REMOVED 2026-09-10 (AP-026) with the bare date line it styled. The original's byline is `.profile-block-header`, below. `.blogs-header .post-header__meta` went too: /blogs no longer uses this template at all — see `.hero-text-copy-au`. */ /* -------------------------------------------------------------------------- AP-026 — the author byline, both templates -------------------------------------------------------------------------- Two different components reading the same two CMS fields: post page .profile-block-header > img.profile-picture + div > div.title-small.white + div.paragraph-detials-small.white-50 /blogs card .profile-block > img.profile-picture + div.normal-wrapper > div.title-small + p.paragraph-detials-small `.normal-wrapper` has no rule of its own in the original's 212KB stylesheet — it is a plain block — so none is written here either. Transcribed from site.css 3438 / 3156 / 3194 / 3079 / 3091 / 3232 / 3239. The avatar's 50px comes from the img's `width` ATTRIBUTE, not from CSS; its natural size is 579 x 502, so it renders 50 x 43.344 and the 100px radius makes it a circle-ish. Reference: 50 x 43.344 on both posts that show it. -------------------------------------------------------------------------- */ .profile-block-header { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .profile-block { display: flex; align-items: center; } /* AP-067 — width/height moved here from the `width="50"` attribute. The avatar is 579x502, so once the markup declares its intrinsic size (needed for the aspect ratio, and therefore for the pre-load reserve) the attribute can no longer double as the display width. 50px x auto reproduces the previous rendered box of 50 x 43.35 exactly. */ .profile-picture { border-radius: 100px; margin-right: 10px; width: 50px; height: auto; } /* Base rule, which the rebuild did not have. Without it the Featured-articles card titles inherited `.featured-item { color: #5c4ebd }` and computed rgb(92,78,189) against the original's rgb(32,33,70) on all 22 post pages. */ .title-small { color: #202146; margin-bottom: 4px; font-weight: 700; } .title-small.white { color: #fff; } .paragraph-detials-small { color: #9899ad; margin-bottom: 0; font-size: 14px; line-height: 120%; } .paragraph-detials-small.white-50 { color: #eee; } /* var(--gallery) */ /* The /blogs card description. It was an unclassed

inheriting the global 16px / 22.4px, which measured 134.44 tall against the original's 130. */ .paragraph-detials-medium { color: var(--black); margin-bottom: 24px; font-size: 16px; line-height: 26px; } /* `.breadcrumb--dark` REMOVED 2026-09-09 (AP-017) with the post-page breadcrumb it styled. The breadcrumb now ships only on the 18 service pages AP-001 granted, and those use the unmodified `.breadcrumb` in main.css. */ /* ========================================================================== /blogs listing — REBUILT 2026-09-04 to the original's structure. ========================================================================== */ /* `.header-blog` REMOVED 2026-09-10 and REPLACED, not renamed. It was a copy of the POST template's band (testi.png, min-height 745, padding 200px 3% 220px). `.header-blog` occurs ZERO times in _kit-out/ref/blogs.html; /blogs opens with a viewport-height photographic hero. Transcribed from site.css 4341 / 4357 / 4456 plus the 991 / 767 / 479 blocks at 8298-8356, 9707-9768 and 11150-11213. Verified arithmetically against the reference's own boxes BEFORE being written, which is why there is no tuning here: .hero-text-copy-au height 100vh -> 70vh (<=991) -> 60vh (<=767) -> 50vh (<=479) Reference: 900 at 1920/1440/1280/1024 (viewport 900), 630 at 768 (70vh; the 60vh rule does NOT apply at 768, 768 > 767), 422 at 390 (50vh of the 844 viewport). .heading-copy-au absolute, zero-height flex column, justify-content flex-end, bottom 23% -> 25% (<=991) -> 22% (<=767) -> 27% (<=479). Reference bottom edge: 900 - 23% = 693 at 1440; 630 - 25% = 472.5 at 768; 422 - 27% = 308.1 at 390. .heading-services 48px/64px -> 45px (<=991) -> 38px (<=767) -> 20px/48px (<=479), padding 7px, margin-top 12, margin-bottom -166. The h1's top lands at 693 - (78 + 12 - 166) + 12 = 781, which is exactly where the reference puts it. The NEGATIVE bottom margin is what does that; it is not a typo and it is load-bearing. mix-blend-mode: darken is reproduced too. Over the limeade fill on this photograph it is what stops the pill reading as flat green. -------------------------------------------------------------------------- */ .hero-text-copy-au { background-image: url("/images/team/img-0230-edited.jpg"); background-position: 50% 0; background-repeat: no-repeat; background-size: cover; border-radius: 30px; display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; } .heading-copy-au { z-index: 99; position: absolute; inset: auto auto 23%; display: flex; flex-flow: column; justify-content: flex-end; align-items: center; gap: 10px; max-width: 600px; margin-top: 338px; font-size: 2rem; text-transform: capitalize; } .heading-services { background-color: var(--limeade); color: var(--white); outline: 3px solid #fff; outline-offset: 0; border-radius: 20px; mix-blend-mode: darken; display: flex; justify-content: center; align-items: flex-end; margin-top: 12px; margin-bottom: -166px; padding: 7px; font-family: var(--font-sans); font-size: 48px; font-weight: 500; line-height: 64px; letter-spacing: normal; text-align: center; text-transform: capitalize; } @media screen and (max-width: 991px) { .hero-text-copy-au { flex-flow: column; justify-content: space-between; align-items: center; height: 70vh; } .heading-copy-au { gap: 0; justify-content: center; max-width: 500px; margin-inline: auto; bottom: 25%; } .heading-services { font-size: 45px; } } @media screen and (max-width: 767px) { .hero-text-copy-au { gap: 20px; text-align: center; height: 60vh; } .heading-copy-au { margin-inline: auto; bottom: 22%; } .heading-services { text-align: center; max-width: 500px; padding-bottom: 10px; font-size: 38px; } } @media screen and (max-width: 479px) { .hero-text-copy-au { gap: 15px; height: 50vh; } .heading-copy-au { font-size: 14px; bottom: 27%; } .heading-services { display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 10px; max-width: 350px; margin-top: 28px; margin-bottom: -57px; padding-block: 0; font-size: 20px; line-height: 48px; text-align: center; } } /* .main-container-blog — ADDED 2026-09-09. This wrapper was missing entirely, so .blog-grid-copy inherited the viewport width and the listing had no cap. Values transcribed from the original stylesheet (max-width 1380px, 60px block margins, 40px block padding), with the same three descending breakpoints it declares: 991 -> 20px inline padding and 40px margins, 767 -> 30px margins, 479 -> no padding. */ .main-container-blog { width: 100%; max-width: 1380px; margin: 60px auto; padding-top: 40px; padding-bottom: 40px; } @media screen and (max-width: 991px) { .main-container-blog { margin-top: 40px; margin-bottom: 40px; padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 767px) { .main-container-blog { margin-top: 30px; margin-bottom: 30px; padding-top: 40px; padding-bottom: 40px; } } @media screen and (max-width: 479px) { .main-container-blog { padding: 0; } } /* .blog-grid-copy — article list beside the sticky sidebar. */ .blog-grid-copy { display: grid; grid-column-gap: 40px; grid-template-rows: auto; grid-template-columns: 1fr 0.4fr; margin-left: 40px; margin-right: 40px; } @media screen and (max-width: 991px) { .blog-grid-copy { grid-column-gap: 22px; grid-template-columns: 1fr 0.6fr; } } @media screen and (max-width: 767px) { .blog-grid-copy { grid-row-gap: 62px; grid-template-rows: auto auto; grid-template-columns: 1fr; } } @media screen and (max-width: 479px) { .blog-grid-copy { margin-left: 20px; margin-right: 20px; } } .content-left-copy { display: flex; flex-direction: column; gap: 20px 16px; justify-content: flex-start; align-items: center; } .content-right-copy { position: sticky; } /* .blog-item — a HORIZONTAL card: image left at 1fr, copy right at .8fr. */ .blog-item { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 0.8fr; gap: 16px 40px; background-color: var(--nav-background); border-radius: 25px; margin-bottom: 20px; padding: 40px; text-decoration: none; box-shadow: 0 22px 34px #0000000f; } @media screen and (max-width: 991px) { .blog-item { display: flex; flex-flow: column; justify-content: center; place-items: center; /* T5, 2026-09-11 — padding-RIGHT is deliberately NOT reset here. The original's 991 block (site.css:7956-7967) declares padding-top, padding-bottom and padding-LEFT at 20px and no padding-right, so the base rule's `padding: 40px` survives on that one side: the card is 20 left / 40 right below 992. This file had written it as the shorthand `padding: 20px 20px 20px 20px`, which reset the right side too and made `.blog-content` 310.000 against the original's 290.000 (+20.000) at 390 and 768, on all 22 cards — costing each h2.heading-h2 30.000px of height and each p.paragraph-detials-medium 26.000px. Asymmetric and almost certainly a Webflow authoring slip, but it is the layout the practice approved, so it is transcribed, not tidied. 1024 and above are unchanged (delta was already 0.000). */ padding: 20px 40px 20px 20px; } } .blog-image-wrap { overflow: hidden; } @media screen and (max-width: 991px) { .blog-image-wrap { display: flex; justify-content: center; align-items: center; } } .blog-image { border-radius: 25px; width: 100%; } @media screen and (max-width: 991px) { .blog-image { width: auto; } } .blog-content { display: flex; flex-direction: column; gap: 20px; justify-content: space-between; align-items: flex-start; } /* ADDED 2026-09-11 (AP-058): `font-family: var(--font-sans-bold)`. site.css:3104 declares `font-family: sweet sans bold` on `.heading-h2` with NO weight, so the h2 global's 700 carries through onto the one-face bold family and the card title renders the real Bold. This is an h2, so before the split it inherited --font-sans at 700 and happened to land on the merged Bold; after it, --font-sans at 700 synthesises, which is right for headings generally and wrong for these 22. The easiest of the thirteen to miss — the rule declares no family of its own on this side, only on the original's. */ .heading-h2 { color: #202146; margin-top: 0; font-family: var(--font-sans-bold); font-size: 28px; line-height: 30px; } /* ========================================================================== Post body: two columns + the Featured articles sidebar ADDED 2026-09-04. Values measured off the original, not chosen. Media blocks run 991 -> 767 -> 479, descending, as the original declares them. ========================================================================== */ /* .blog-section-2 { padding-bottom: 20px; padding-inline: 3% } */ .post-body { padding-bottom: 20px; padding-inline: 3%; } /* .div-block-14 — the negative top margin is what lifts the hero image up over the header band. Without it the image sits in flow below the header. */ .blog-image-holder { display: flex; justify-content: center; align-items: center; margin-top: -220px; margin-bottom: 60px; } .blog-image-wrapper { background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 20px; width: 100%; max-width: 800px; height: 450px; } .blog-grid { display: grid; grid-column-gap: 40px; grid-template-rows: auto; grid-template-columns: 1fr 0.4fr; } .content-left_blog { display: block; } /* Both are sticky on the original — .content-right sticky with no offset, and .stick-wrapper sticky at 60px, which is what actually pins the sidebar. */ .content-right { position: sticky; } .stick-wrapper { position: sticky; top: 60px; } .featured-articles .title-large { color: #202146; margin-bottom: 20px; font-size: 20px; font-weight: 700; line-height: 130%; } .featured-block { margin-top: 10px; } .featured-item { display: flex; align-items: center; margin-bottom: 20px; color: #5c4ebd; text-decoration: none; transition: color 0.2s; } .featured-item .feature-image-2 { width: 90px; border-radius: 15px; margin-right: 20px; box-shadow: 0 22px 34px #00000029; } /* `.featured-item .title-small` folded into the base `.title-small` rule above, which is where the original declares it (site.css:3079) — margin-bottom 4px, weight 700 AND colour #202146. The colour was the part that was missing. */ @media screen and (max-width: 991px) { .blog-grid { grid-column-gap: 22px; grid-template-columns: 1fr 0.6fr; } .featured-item { flex-wrap: wrap; } .featured-item .feature-image-2 { margin-bottom: 10px; } } @media screen and (max-width: 767px) { .blog-grid { grid-row-gap: 62px; grid-template-rows: auto auto; grid-template-columns: 1fr; } } @media screen and (max-width: 479px) { .featured-articles { display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: center; } .featured-item { justify-content: center; align-items: center; } } /* ------------------------------------------------------------- article --- */ /* Was `max-width: 52rem` — a reading measure for the old single-column layout. It capped the grid at 832px, so the sidebar rendered 226.3 wide against the original's 375.3 and the titles wrapped into a 1942px column. The original's container is 1380, less 3% padding either side = 1353.6, which splits 938.3 / 40 / 375.3 under `1fr .4fr`. */ .post-body .container { max-width: var(--container-max); } .post-body__featured { width: 100%; border-radius: var(--radius-card); margin-bottom: var(--space-7); object-fit: cover; aspect-ratio: 16 / 9; } /* Rich text coming from the migrated CMS body — `div.w-richtext` on the original, on all 22 posts. REWRITTEN 2026-09-11 (Maya review #6, T1). The previous version of this block overrode the global heading ladder and the list/paragraph metrics, and every one of those overrides was wrong. VISUAL_QA.md's 2026-09-04 line reading "Post rich text ... matches" was FALSE of the build and has been corrected in place. The original styles NOTHING inside `.w-richtext` beyond `overflow: hidden` on its lists (site.css:1686). Every value below therefore comes from the ORIGINAL'S OWN GLOBAL RULES, which `tokens.css` and `main.css` already reproduce exactly — so the correct fix is to DELETE the overrides, not to re-tune them. Sources, verbatim from `_forensics/raw/site.css`: h2 2158 font-size 3rem, line-height 120%, margin 0, weight 700, black 7522 (<=991) 2.5rem 9044 (<=767) 2rem 10434 (<=479) 2.2rem h3 2168 font-size 2.5rem, line-height 120%, margin 0, weight 700, black 7526 (<=991) 2rem 9048 (<=767) 1.6rem -- NO 479 override p 2203 font-size 1rem, line-height 140%, margin-bottom 0 (margin-top 0 from the normalize at 424) -- no breakpoints ul/ol 446 margin-top 0, margin-bottom 10px, padding-left 40px li nothing: inherits 14px / 20px Arial (post pages are among the 42 that carry no typeface class -- AP-023) a 2210 text-decoration: underline, and NO colour, so it computes the UA default rgb(0, 0, 238) Measured, original vs this build before the rewrite, at 1440 / 390: h2 48 / 57.6 and 35.2 / 42.24 was 40 / 48 and 25.6 / 30.72 h3 40 / 48 and 25.6 / 30.72 was 28 / 33.6 at BOTH -- the old `--fs-h4` has no breakpoint at all, so the mobile h3 was +2.4px p mb 0 was 16 h2 mb 0 was 16 h3 mt/mb 0 / 0 was 32 / 12 ul/li 14 / 20 was 16 / 22.4 ul mb 10 li mb 0 was 24 and 8 a rgb(0,0,238) was rgb(103,132,40) ON THE LINK COLOUR. Default blue is reproduced here, deliberately. AP-039 decided brand-green-plus-underline for the HOMEPAGE SEO block, on the reasoning that an unstyled default-blue link was an artefact on a designed panel. That reasoning does not carry: article body copy is rich text throughout and the original is consistent across all 22 posts, so blue is what the practice publishes and blue is what ships. The zero paragraph gap reads oddly and is almost certainly not deliberate, but it is what the original does on all 22 posts, so it is reproduced rather than quietly corrected. */ /* No `font-size`/`line-height` on the container: the original's `.w-richtext` sets neither, so `li` inherits the body's 14px / 20px. Setting 16px / 140% here was what made every list item 16 / 22.4. */ .richtext ul, .richtext ol { /* The original's Webflow normalize, site.css:446. The rebuild's global `ul, ol` (main.css:102) is `margin: 0 0 var(--space-4); padding-left: 1.25rem` = 16px / 20px, which is a site-wide divergence from the original's 10px / 40px. Scoped here rather than changed globally: the global touches nav, footer and card lists that all carry their own rules, and re-measuring those is a separate pass. Logged in VISUAL_QA.md. */ margin: 0 0 10px; padding-left: 40px; overflow: hidden; /* .w-richtext ol, .w-richtext ul — site.css:1686 */ } .richtext li { margin-bottom: 0; } /* site.css:2210 declares underline on `a` and no colour at all, so in-article links compute the UA default rgb(0, 0, 238). No `:hover` rule exists on the original, so none is declared here — the previous `:hover { color: limeade }` is gone. */ .richtext a { color: #0000ee; text-decoration: underline; } .richtext img { width: 100%; height: auto; border-radius: var(--radius-card); margin-block: var(--space-5); } .richtext blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--earls-green); background: var(--tint-green); border-radius: 0 var(--radius-input) var(--radius-input) 0; } .richtext table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); } .richtext th, .richtext td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; } .richtext th { background: var(--tint-green); } /* `.post-body__cta` REMOVED 2026-09-09 (AP-011) together with its markup — it was a two-button pair the original does not have. The original's single "Book an appointment" button is reproduced below, in the sidebar where it belongs. .appointment-btn-wrapper / .blog-single-appointment-btn, verbatim from site.css:3472 and 3493, including the `display:none` at <=991px from site.css:8040 — the original hides this button on tablet and phone. */ .appointment-btn-wrapper { display: flex; justify-content: flex-start; align-items: stretch; } .blog-single-appointment-btn { width: 100%; align-self: center; margin-top: 20px; padding: 20px 16px; border: 2px solid var(--body-background); border-radius: 30px; background-color: var(--earls-green); color: var(--white); text-align: center; text-decoration: none; /* This used to read "`sweet sans bold` in the original is the Bold weight of the same family; the rebuild self-hosts it as Sweet Sans Pro 700". It is NOT the same family — site.css:2046 registers it separately, with one face, which is why `sweet sans pro` at 700 gets a SYNTHESISED bold on the original. AP-058 split the two families here to match, so --font-sans has no 700 left and this rule names the bold family. 22 post pages. */ font-family: var(--font-sans-bold); font-size: 18px; font-weight: 700; transition: background-color 0.3s cubic-bezier(0.77, 0, 0.175, 1); } .blog-single-appointment-btn:hover { border-color: var(--earls-green); background-color: var(--white); color: var(--earls-green); text-decoration: none; } @media screen and (max-width: 991px) { .blog-single-appointment-btn { display: none; } } /* ------------------------------------------------------------- listing --- */ .blog-list { background: var(--tint-blue); } .card__meta { font-size: var(--fs-small); color: var(--boulder); margin: 0; } /* `.related-posts` rules REMOVED 2026-09-09 (AP-011) with the "More from our blog" section they styled. */