/* ========================================================================== Moonstone Dental Centre — Design tokens Every value below was read from the live site's stylesheet or measured with getComputedStyle. Nothing here is estimated. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — Sweet Sans Pro, self-hosted (converted OTF -> WOFF2, 922KB -> 393KB) -------------------------------------------------------------------------- AP-058, DECIDED FIX, APPLIED 2026-09-11. The font FILES were never the problem. Served side by side against the .otf the original loads from cdn.prod.website-files.com, every converted face measures 0.000px apart on every string at every size — Bold 700 "Ready to Get Started?"@48 524.984 / 524.984 Medium 500 525.375 / 525.375 Regular 400 524.500 / 524.500 What differed was the FAMILY STRUCTURE, and this block is where it lived. THE ORIGINAL (site.css:2046-2093) registers TWO families: `sweet sans bold` — ONE face, SweetSansProBold.otf at 700. Nothing else. `sweet sans pro` — 300 Light, 400 Regular, 400 italic, 500 Medium, and **NO 700 face at all**. Two consequences follow, and both are load-bearing: 1. Every `h1, h2, h3, h5, h6` (site.css:2148-2201) asks 700 of `sweet sans pro`, which cannot serve it, so the browser falls to the 500 Medium and SYNTHESISES the bold — same advance widths as Medium, 9.68% more ink than the genuine Bold face. Measured, "Ready to Get Started?"@48: synthetic ink 30123.1, real Bold 27207.8, plain Medium 22521.7. 2. `sweet sans bold` is a ONE-face family, so ANY weight asked of it — 400 on `.about-us-h2`, 500 on `.service-supporting-text` and `.appointment-button-about-us:hover` — still resolves to the Bold face, with no synthesis (the face is heavier than the request, not lighter). THIS FILE previously merged the Bold into "Sweet Sans Pro" as a real 700. That made every heading on the site render the genuine Bold where the live site renders a synthesised one: 404 heading elements across 55 pages, and on `h2.white-2` at 1440 a total ink of 18127.5 against the original's 20226.8, -10.38%. Width alone does not show it — the per-string deltas change SIGN ("Root Canal Treatment in Oakville & Mississauga"@56 +0.2528%, "Book An Appointment"@18 +0.4186%, "Ready to Get Started?"@48 -0.0744%, "Veneers"@48 -0.2255%) so a width-only report reads as no change while every heading is still wrong. THE FIX, applied in one pass: reproduce the original's two families exactly. "Sweet Sans Pro" below has no 700, so the heading ladder synthesises as the original does, with no per-heading edits. "Sweet Sans Bold" is the one-face family, exposed as --font-sans-bold, and the 13 components the original puts in it are pointed at it carrying the original's own declared weight. The 13: .nav-link-about-us:hover + .w--current:hover main.css (275 links, 55pp) .appointment-button-about-us:hover main.css (55) .form-header-au home.css (3) .about-us-h2 team.css (1) .button-au main.css (14) .heading-h2 blog.css (22) .button-form-ba home.css (1) .blog-single-appointment-btn blog.css (22) .text-block-14 main.css (8) .badge-text main.css (3) .homepage-heading-ba home.css (1) .service-supporting-text service.css (18) `.member-name` (site.css:2905) and `.homepage-heading-copy-contact-us` (site.css:4569) are also in that family in the original and are DEAD — zero elements carry either class in any of the 55 captures — so they have no counterpart here. Counted by class token, not substring: the ten team cards on /about-us are `.member-name-2`, a different rule. -------------------------------------------------------------------------- */ @font-face { font-family: "Sweet Sans Pro"; src: url("../fonts/SweetSansProExLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Sweet Sans Pro"; src: url("../fonts/SweetSansProLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Sweet Sans Pro"; src: url("../fonts/SweetSansProRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sweet Sans Pro"; src: url("../fonts/SweetSansProItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Sweet Sans Pro"; src: url("../fonts/SweetSansProMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* NO 700 FACE IN THIS FAMILY. That is not an omission — it is the original's structure (site.css:2055-2093 registers only 300/400/400i/500 under `sweet sans pro`), and it is what makes the heading ladder synthesise its bold the way the live site does. Adding a 700 here silently un-fixes AP-058 on 404 heading elements. The Bold face is below, in its own family. */ /* `sweet sans bold` on the original, site.css:2046-2053. A ONE-face family by design: any weight asked of it resolves to this Bold face. Do not add a 400 or 500 face here to "complete" it — `.about-us-h2` (400), `.service-supporting-text` (500) and `.appointment-button-about-us:hover` (500) all depend on falling through to 700. */ @font-face { font-family: "Sweet Sans Bold"; src: url("../fonts/SweetSansProBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Hairline is a separate family in the original; kept for parity */ @font-face { font-family: "Sweet Sans Pro Hairline"; src: url("../fonts/SweetSansProHairline.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- Lato — ADDED 2026-09-09. The original loads Lato from Google Fonts and uses it in six rules: .text-size-xmedium, .technology-paragraph, .dentist-appoinment-text, .for-mobile-view-booking-button, .primary-button and .secondary-button. The rebuild had NO Lato at all, so every one of those blocks fell back to whatever Lato-or-Arial the visitor happened to have. Measured on this machine: the string "Call +1(289) 670-5045" at Lato 700/18px is 180.75 in the reference and 168.25 in the rebuild — the rebuild was resolving a locally installed Lato, and a visitor without one would get Arial at 181.64. Three of the four affected blocks are on /emergency-dental, where the paragraph wrapped one line short at 1024 and 390. Self-hosted rather than linked, matching how this project already handles Sweet Sans Pro. Same files Google serves (v25 latin + latin-ext subsets, 57KB total), so the metrics are identical to the original's, not merely similar. -------------------------------------------------------------------------- */ @font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------ Colour — original Webflow variable names kept so the mapping back to the source site stays obvious. ------------------------------------------------------------------ */ --earls-green: #678428; /* primary brand green — 76 uses */ --limeade: #899a00; /* accent / links — 21 uses */ --white: #ffffff; --black: #000000; --nav-background: #e2e2e2; --body-background: rgba(167, 170, 157, 0.63); /* #A7AA9DA1 */ --boulder: #797979; --gallery: #eeeeee; --glacier: #84b5c3; /* Semantic aliases */ --color-primary: var(--earls-green); --color-accent: var(--limeade); --color-heading: var(--black); --color-heading-alt: var(--earls-green); --color-body: #333333; --color-surface: var(--white); --color-border: rgba(0, 0, 0, 0.08); /* Section tints, sampled from computed styles */ --tint-green: #f5f9ee; --tint-blue: #f6f8fb; --tint-eyebrow: #e6ebd4; --accent-lime: #aacd35; --accent-lime-border: #dbe8a8; /* ------------------------------------------------------------------ Typography — desktop scale measured at 1920px ------------------------------------------------------------------ */ --font-sans: "Sweet Sans Pro", Arial, Helvetica, sans-serif; /* ADDED 2026-09-11 (AP-058). The original's `sweet sans bold, Arial, sans-serif` — a separate one-face family, NOT --font-sans at 700. Use this only where the original names `sweet sans bold`; the list of 13 is at the top of this file. Asking --font-sans for 700 gives a synthesised bold, which is correct for headings and wrong for these. */ --font-sans-bold: "Sweet Sans Bold", Arial, sans-serif; --font-hairline: "Sweet Sans Pro Hairline", Arial, sans-serif; /* ADDED 2026-09-09 (AP-023). Verbatim from the original's own rule, site.css:2143 — `font-family: Arial, Helvetica Neue, Helvetica, sans-serif`. This, not Sweet Sans Pro, is what INHERITED text falls to on the 42 of 52 original pages whose carries no typeface class. See main.css `body` and the `.body*` block below it for the split. */ --font-body-default: Arial, "Helvetica Neue", Helvetica, sans-serif; /* `Lato, sans-serif` verbatim from the original — NOT `Lato, Arial, ...`. The fallback matters if the webfont ever fails. */ --font-lato: Lato, sans-serif; --fs-h1: 4.2rem; /* 67.2px */ --fs-h2: 3rem; /* 48px */ --fs-h3: 2.5rem; /* 40px */ --fs-h4: 1.75rem; /* 28px */ --fs-h5: 1.375rem; /* 22px */ --fs-h6: 1.1rem; /* 17.6px */ /* CORRECTED 2026-09-09 (AP-024). These two feed the `body` rule and nothing else. They were 1.125rem / 1.5 (18px / 27px, and 16px / 24px below 767px); the ORIGINAL's computes 14px / 20px on every one of the 52 captured pages, from site.css:2141-2146, with no media-query override anywhere in 212KB of stylesheet. Fixed px, not rem, because the original is fixed px. Inherited-only: every component that declares its own size is unaffected. */ --fs-body: 14px; --lh-body: 20px; --fs-small: 0.9375rem;/* 15px */ --fs-link: 1rem; /* 16px */ --lh-heading: 1.2; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* ------------------------------------------------------------------ Layout ------------------------------------------------------------------ */ --container-max: 1380px; --container-nav: 1280px; --section-padding-y: 5rem; --section-padding-x: 2rem; --header-height: 133px; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 5rem; /* Radii — measured from the original */ --radius-button: 30px; --radius-pill: 10rem; --radius-form-button: 40px; --radius-card: 24px; --radius-input: 10px; --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.06); --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.05); /* Motion — 291 scroll-into-view triggers at ~500ms in the original */ --dur-fast: 100ms; --dur-base: 300ms; --dur-slow: 500ms; --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955); } /* Responsive type ramp — mirrors the original's breakpoints exactly (991 / 767 / 479px). Note h2 grows again at 479px; that is the original's behaviour, reproduced deliberately. */ @media screen and (max-width: 991px) { :root { --fs-h1: 2.9rem; --fs-h2: 2.5rem; --fs-h3: 2rem; --section-padding-y: 4rem; --section-padding-x: 1rem; } } @media screen and (max-width: 767px) { :root { --fs-h2: 2rem; --fs-h3: 1.6rem; /* `--fs-body: 1rem` REMOVED 2026-09-09 (AP-024). The original has no body font-size override at any breakpoint — 14px at 1920 and at 390. */ --section-padding-y: 3.5rem; } } @media screen and (max-width: 479px) { :root { --fs-h1: 2.3rem; --fs-h2: 2.2rem; --section-padding-y: 3rem; } }