/* ============================================================ FJR Stair & Door — Custom Stylesheet (post-launch tweaks) File: client_custom.css · Emitted by Skill 6 Phase 6A (empty slot) Loaded LAST on every page: tokens.css → fjr-global.css → client_custom.css Use this file for post-launch tweaks that should NOT be added to the canonical CSS (fjr-global.css is REGENERATED whenever Phase 6A re-runs; this file is PRESERVED on re-run). ADD CUSTOM RULES BELOW THIS COMMENT BLOCK. ============================================================ */ /* ------------------------------------------------------------------ Round-3 item 2 (2026-09-01) — prose second column in a .cost table. fjr-global.css styles `.cost td:nth-child(2)` as a VALUE column: bold, navy, and `white-space:nowrap`. That is right for the price and range columns every other table on the site uses it for, but the Materials x "Best For" table on /the-right-staircase-remodeling-contractor-for-your-project/ carries a prose second column. Measured with nowrap, its longest row needs 366px against 342px available at a 390px viewport — it overflows every phone narrower than ~414px, while passing the 430px audit width. Add `prose2` alongside `cost` on any table whose 2nd column is prose. ------------------------------------------------------------------ */ .cost.prose2 td:nth-child(2){font-weight:400;color:var(--charcoal);white-space:normal} /* ------------------------------------------------------------------ Round-3 item 6 (2026-09-01) - links inside FAQ answers. fjr-global.css styles prose links via `.art a` (coral-ink, 600), but the FAQ section sits OUTSIDE div.wrap.art, and there is no `.fans a` rule - so a link in a FAQ answer fell back to the global `a{color:inherit}` and inherited `.fans{color:var(--slate)}`. It rendered the same grey as the surrounding sentence with no underline: invisible as a link. Matches the established `.art a` treatment. The FAQ card is white (details.faq), where coral-ink is 4.69:1 = WCAG AA for normal text. NB the enclosing section is --light #F2F4F7, where coral-ink would be 4.26:1 and FAIL - so this rule is safe only while the cards stay white. ------------------------------------------------------------------ */ .fans a{color:var(--coral-ink);font-weight:600} /* ------------------------------------------------------------------ Round-3 item 4 (2026-09-01) - inline blog figures stretched on mobile. `.artfig img` in fjr-global.css set `width:100%` but never `height:auto`, and there is no global `img` reset. The 24 inline blog images carry `width="1000" height="667"`-style attributes, which survive as a hard presentational height. At a 375px viewport they rendered 327x667 instead of 327x218 - a 3x vertical stretch. Images without those attributes were unaffected, which is why the heroes looked fine and only the body figures were wrong. Fixed at source in fjr-global.css; repeated here because that file is REGENERATED whenever Phase 6A re-runs and would reintroduce the stretch. All 24 attribute ratios match their AVIF `ispe` dimensions exactly, so `height:auto` also lets the UA reserve the correct box before load - no layout shift. ------------------------------------------------------------------ */ .artfig img{height:auto} /* ------------------------------------------------------------------ Round-3 item 3 (2026-09-02) - a lone trailing card left-aligned on its own row in a 3-column grid. Same defect and same fix as the two house rules already in fjr-global.css (.svcgrid and .pricegrid, line 179): CONTAINER > CHILD:last-child:nth-child(3n+1){grid-column:2;justify-self:center;width:100%} Here rather than in fjr-global.css because that file is REGENERATED by Phase 6A - same reasoning as the .artfig fix above. Nothing else sets grid-column / justify-self / width on .gcard, .bcard or .rcard, and this file loads last, so there is no specificity contest. EACH GRID GETS ITS OWN GATE. Copying the house 961px verbatim would be wrong for two of the three - each container reaches 3 columns at a different width. Every gate is chosen so the rule can never be live in a 1-column state, where grid-column:2 would fabricate a phantom second column. LOAD-BEARING: these fire only when the card count is 1 mod 3 (10 / 22 / 37 today). Change a count and the rule goes silently inert - see _ITEM_3_ORPHAN_CARD_CENTERING_2026-09-02.md. Do not add display:none filtering to these grids: :nth-child indexes DOM position, not visibility. ------------------------------------------------------------------ */ /* /resources/ - the client-reported item. 10 .gcard = 3*3+1. auto-fill minmax(300px,1fr) capped at 1080px, no media overrides: 3 cols from viewport ~1003px, 2 cols down to ~683px, then 1 col. 961px is the house number and sits just below the 3-col threshold, which makes the fix independent of scrollbar width. In the 961-1002px band the grid is 2 columns and 10 cards fill 5 COMPLETE rows, so the rule is a measured pixel-for-pixel no-op there - that no-op depends on 10 being EVEN. 1 column needs <683px, 278px clear of the gate. */ @media(min-width:961px){ .gridres>.gcard:last-child:nth-child(3n+1){grid-column:2;justify-self:center;width:100%} } /* /blog/ - not client-reported; same defect found by sweep. 22 .bcard = 3*7+1. auto-fill minmax(320px,1fr) capped at 1080px, so it can never exceed 3 columns. 3 cols begin around viewport 1048-1065px depending on scrollbar width; 1080px errs to the safe side, giving up a ~17px band (1063-1079) that simply renders as it does today rather than risking the rule firing inside a 2-column grid. 1 column ends near 725px, ~355px clear. */ @media(min-width:1080px){ .bgrid>.bcard:last-child:nth-child(3n+1){grid-column:2;justify-self:center;width:100%} } /* /reviews/ - not client-reported; same defect found by sweep. 37 .rcard = 3*12+1. NOT the house 961px: .rgrid has its own ladder in fjr-global.css - repeat(3,1fr), 2 cols at max-width:900px (line 384), 1 col at max-width:600px (line 475). Its 3-column threshold is therefore 900px, and a 961px gate would leave the orphan 286-306px off centre across 901-960px. Written as the exact COMPLEMENT of the container's own trigger, not as min-width:901px: on a 125%-scaled Windows display a layout viewport of ~900.8px satisfies NEITHER max-width:900px NOR min-width:901px, which would leave 3 columns with the orphan still left-aligned. `not all and (...)` has no such gap. This is Media Queries 3 syntax, universally supported - it is NOT the MQ4 not() function. Do not "simplify" it to min-width:901px. */ @media not all and (max-width:900px){ .rgrid>.rcard:last-child:nth-child(3n+1){grid-column:2;justify-self:center;width:100%} } /* ------------------------------------------------------------------ Round-3 "Blogs" template items (2026-09-02) - client QA doc. Four asks, all on the 22 blog posts: 1. "Add space before any images" 2. "Add equal spaces, just like this" 3. "In This Article" restyled like the client's reference 4. "Related Resources" moved to the end, as a card grid NO PAGE GATE NEEDED. `.artfig`, `.toc`, `.toc-lbl` and `.toc-links` occur on those 22 pages and NOWHERE else on the site (swept: 22/22 for each). `.relc` is new and only emitted there. The blog INDEX is also body.p-blog but carries none of these classes, so it is untouched. Colours use the fjr-global.css :root aliases (--navy, --slate, --light, --coral-ink, --h, --b), not the tokens.css names, to match the rest of the stylesheet. ------------------------------------------------------------------ */ /* --- 1 + 2. Figure spacing ---------------------------------------- fjr-global.css had `.artfig{margin:0 0 10px}` - no top margin at all. Because `*{margin:0}` also strips heading margins, a figure sat FLUSH against the paragraph or H2 above it and got only 10px below. That is exactly the client's "add space before any images" and "add equal spaces". Now symmetric. Adjacent-sibling margins collapse against `.art p{margin-top:14px}`, so the larger 34px wins and the gap reads the same above and below every figure - no double gap. Fixed at source in fjr-global.css as well; repeated here because that file is REGENERATED whenever Phase 6A re-runs, same reasoning as the .artfig height:auto fix above. */ .artfig{margin:34px 0} .art>.artfig:first-child{margin-top:0} /* lead image - .sect padding already spaces it */ @media(max-width:600px){.artfig{margin:24px 0}} /* --- 3. "In This Article" -> quiet Contents nav -------------------- Was a coral uppercase label above pill-shaped chips in a flex-wrap row. The reference is a vertical list: muted label, one link per row, and the section you are currently reading filled light with bold text. The label WORDING is deliberately left as "In This Article" - the client asked for the look, not a copy change. `.toc .toc-links a` is specificity (0,2,1) so it beats fjr-global's `.toc a` (0,1,1) whatever the file order. The active class is set by /assets/toc-active.js; with JS off the list still reads and navigates correctly, only the highlight is absent. */ .toc{display:block;background:var(--white);border:1px solid #e6e9ef;border-radius:14px;padding:16px 14px 12px;margin:30px 0 6px} .toc-lbl{display:block;font-family:var(--b);font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--slate);margin:0 0 8px;padding:0 10px} .toc .toc-links{display:block;gap:0} .toc .toc-links a{display:block;font-family:var(--b);font-size:15px;font-weight:500;line-height:1.45;color:var(--slate);background:transparent;border:0;border-radius:8px;padding:9px 10px} .toc .toc-links a:hover{background:var(--light);color:var(--navy)} .toc .toc-links a.is-active{background:var(--light);color:var(--navy);font-weight:700} /* --- 4. Related content card grid --------------------------------- Replaces the bulleted "Related Resources" list, which sat MID-article on 7 posts. Now a full-width section placed after the FAQ and BEFORE the CTA band, so discovery comes late but the CTA still closes the page. Kept white on purpose: the FAQ section above is var(--light) and two adjacent light bands would merge into one. FLEX, NOT GRID - deliberately. The curated lists run 5, 6 or 7 links and the generated ones 3, so the card count differs per page. A 3-column grid would need a per-count :nth-child(3n+1) orphan rule like the three above, and those go silently inert the moment a count changes (7 links is 1 mod 3 today - exactly the failure case). With a wrapping flex row, `justify-content:center` centres ANY trailing partial row at EVERY count, with no media query and nothing to keep in sync. Basis 300 + max-width 336 + gap 26 gives 3-up at >=1060px (3*336+2*26 = 1060), 2-up on tablet, 1-up on phones. `.relc-card img` sets its height explicitly (aspect-ratio + auto): there is no global img reset on this site, and these thumbnails are a mix of 1600x900, 1000x667, 1000x760, 1000x560 and 2752x1536 - so this covers both the attribute-height stretch and the non-16:9 sources. `aspect-ratio` also reserves the box before load, so no layout shift. */ .relc{background:var(--white)} .relc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1060px;margin:0 auto 26px} .relc-head h2{font-size:clamp(22px,2.6vw,28px)} .relc-head p{color:var(--slate);font-size:15.5px;margin-top:6px} .relc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;max-width:1060px;margin:0 auto} .relc-card{flex:1 1 300px;max-width:336px;display:flex;flex-direction:column;background:var(--white);border:1px solid #e6e9ef;border-radius:16px;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease} .relc-card:hover{box-shadow:0 10px 26px rgba(20,33,61,.10);transform:translateY(-2px)} .relc-card:focus-visible{outline:3px solid var(--coral-ink);outline-offset:2px} .relc-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block} .relc-body{display:flex;flex-direction:column;flex:1 1 auto;padding:15px 18px 17px} .relc-tag{font-family:var(--h);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--coral-ink)} .relc-title{font-family:var(--h);font-weight:700;font-size:16.5px;line-height:1.35;color:var(--navy);margin-top:8px} .relc-meta{color:var(--slate);font-size:13px;margin-top:auto;padding-top:12px} @media(max-width:600px){.relc-grid{gap:18px}} /* ------------------------------------------------------------------ Round-3 blogs follow-up (2026-09-03) - "Add padding between content sections", with the client's arrows pointing at two

headings. `fjr-global.css` sets `.art h2{margin-top:6px}`. Six pixels. And because `*{margin:0}` strips every default margin, `.art p` only carries `margin-top`, so a paragraph contributes NO bottom margin - the gap above a section heading really was 6px, tighter than the gap between two paragraphs (14px). Sections read as one unbroken slab. SCOPED TO BLOG POSTS ONLY, and it takes TWO body classes. The 22 blog posts are **12 `body.p-blog` + 10 `body.p-legacy`** (the inherited/migrated posts) - scoping to `.p-blog` alone would silently miss 10 of them. `.art` itself is NOT blog-exclusive: 10 more pages using it are `body.p-res` resource guides, which the client did not ask to change and which this selector deliberately excludes. Verified by sweep: p-blog+.art = 12 (all posts), p-legacy+.art = 10 (all posts), p-res+.art = 10 (no posts). Adjacent-sibling margins collapse, so this never stacks: against a paragraph (0 bottom) it is 44px, against `.art ul` (2px) 44px, and against a figure (`.artfig`, 34px) still 44px rather than 78px. Specificity (0,2,2) beats `.art h2` (0,1,1) regardless of file order. ------------------------------------------------------------------ */ body.p-blog .art h2, body.p-legacy .art h2{margin-top:44px} @media(max-width:600px){ body.p-blog .art h2, body.p-legacy .art h2{margin-top:32px} } /* ------------------------------------------------------------------ Round-3 blogs follow-up (2026-09-03b) - stacked comparison tables were ragged on a phone. Under 640px `fjr-global.css` turns `.cost` into stacked cards: the thead is hidden, each `tr` becomes a bordered card and each `td` a flex row whose `::before` prints `attr(data-label)` as the row label (fjr-global.css lines 459-465). The label and the cell text are both auto-sized flex items with `justify-content:space-between` and no basis, so the label column width is negotiated PER ROW from its own content. Measured on /signs-staircase-needs-remodeling/ at 390px: **13 different label widths spanning 72-135px** - a 63px spread. "REPAIR - Address It Now" wrapped to 2 lines in one card and 3 in the next, which is the client's "well aligned from one to another". Fix: give the label a FIXED basis so every row shares one column, start the values on a common left edge instead of pushing them to the right rail, and trim the type a little (the client's own suggestion) so the long label settles at 2 lines. SCOPED TO BLOG POSTS - both body classes, since the 22 posts are 12 `p-blog` + 10 `p-legacy`. `.cost` also appears on 10 `body.p-res` resource guides, which the client did not ask to change and which these selectors exclude. 7 blog posts carry a `.cost` table. ------------------------------------------------------------------ */ @media(max-width:640px){ body.p-blog .art .cost, body.p-legacy .art .cost{font-size:13.5px} body.p-blog .art .cost td, body.p-legacy .art .cost td{justify-content:flex-start;align-items:flex-start;gap:12px;padding:12px 14px} body.p-blog .art .cost td::before, body.p-legacy .art .cost td::before{flex:0 0 38%;max-width:38%;font-size:12.5px;line-height:1.35} /* the value column must be free to wrap: fjr-global sets nowrap on the 2nd column for price tables, which would overflow a 38%-narrower value column once stacked. */ body.p-blog .art .cost td:nth-child(2), body.p-legacy .art .cost td:nth-child(2){white-space:normal} } /* ------------------------------------------------------------------ CLIENT QA 2026-09-03: "on footer, the address is not the same size as the rest of the text." Measured in the footer, desktop and mobile: footer .fcol-title 14px (column headings) footer a 14px (phone, office, email) footer .legal 13px (copyright line) footer .cols p 16px <- the address, and the brand blurb Cause: neither paragraph declares a font-size, and fjr-global.css declares none on `body` either, so both fall back to the browser default of 16px while every other footer element is pinned. Nobody chose 16px - it is simply what is left when nothing is stated, which is why this reads as a mistake rather than as a contrast. Fix: 14px on footer paragraphs, matching the links they sit beside. BOTH paragraphs, not only the address. The brand blurb in the first column is the same oversight at the same 16px, and the client's complaint is that footer type is inconsistent. To keep the blurb at 16px instead, restrict the selector to the contact column: footer .cols>div:last-child p{font-size:14px} Global by nature: the footer is one shared component, so this lands on all 114 pages from a single rule. Scoped to `.cols` so the 13px `.legal` line is untouched. ------------------------------------------------------------------ */ footer .cols p{font-size:14px} /* ------------------------------------------------------------------ SKIP LINK — WCAG 2.4.1 Bypass Blocks (Level A). Added by skill 8, 2026-09-04, after the M2 rubric found the site had no skip link and no `
` landmark on any of its 114 pages, and no upstream gate had ever checked for either. Why it matters here specifically: every page opens with a microbar, a header nav and a mobile nav before any content. A keyboard or screen-reader user had to traverse all three on every page, with no way past them and no landmark to jump to. Hidden until focused, using the clip-rect technique rather than `display:none` — a display-none element is not focusable, so it can never be reached by Tab and the link would be decorative. On focus it becomes a real, visible control at the top-left. Colours are the brand tokens, not new values: --dark is the navy already used by the microbar and footer, and white on that navy is the same pairing those two components ship. Nothing here introduces a colour that was not already in the approved design. ------------------------------------------------------------------ */ .skip-link{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* The hidden state now lives in an inline `style` attribute on the element itself (src/layouts/Base.astro explains why: fresh HTML plus stale CSS made this render as visible body text on the live site). The rule below is kept as a fallback for any markup that carries only the class. EVERY DECLARATION THAT FIGHTS THE INLINE STYLE CARRIES `!important`, AND HAS TO. An inline style attribute outranks every selector, so without `!important` the focused link would stay 1x1 and clipped - a skip link that can be focused and never seen, which is worse than not having one. This is the textbook case for `!important`: overriding an inline style you cannot remove. Declarations that do NOT conflict with the inline set (colour, font, radius, shadow, outline) are left normal. */ .skip-link:focus, .skip-link:focus-visible{ position:fixed !important; top:8px;left:8px; z-index:9999; width:auto !important;height:auto !important; margin:0 !important;padding:12px 18px !important; border:0 !important; overflow:visible !important; clip:auto !important; clip-path:none !important; white-space:nowrap; background:var(--dark,#14213D); color:#fff; font-family:var(--font-body,system-ui,sans-serif); font-size:15px; font-weight:600; text-decoration:none; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.28); outline:3px solid #fff; outline-offset:2px; } /* `
` is a wrapper added for the landmark and must stay layout-neutral: the sections inside it were direct children of in the approved design, so anything other than `display:block` with no box of its own would change the rendering the client signed off on. `:focus` is suppressed because the skip link moves focus here programmatically and a focus ring around the whole page is noise. */ main#main{display:block;margin:0;padding:0;border:0} main#main:focus{outline:none} /* ------------------------------------------------------------------ SELF-HOSTED WEBFONTS — Montserrat + Poppins. Skill 8, 2026-09-04. WHY. The approved design loaded these from fonts.googleapis.com, and Lighthouse measured that stylesheet RENDER-BLOCKING FOR 986 ms on mobile while being 1,383 bytes. The size was never the problem; the serialised cross-origin dependency was. Because every hero is a CSS `background-image`, the LCP element cannot paint until the CSSOM is complete, so it waited on this chain: HTML -> fonts.googleapis.com/css2 592-855 ms -> fonts.gstatic.com/*.woff2 1049-1571 ms The browser cannot know WHICH font files to request until it has fetched and parsed CSS from another origin. `preconnect` was already present on both hosts and had already done its job — the handshake was warm and the protocol was h2 — and gstatic still could not start before 1049 ms. There was no cheaper fix left; the round trip itself had to go. Mobile LCP was 6.6 s against 1.1 s on desktop. Same-origin faces are discoverable from the HTML, preloadable, and served over the connection the page already has open. MONTSERRAT IS ONE VARIABLE FONT, NOT FOUR STATIC WEIGHTS. Google returns the same woff2 for wght 500/600/700/800 — verified by md5: all four downloads were byte-identical per subset. Storing it once with a `font-weight: 500 800` range instead of four times took the font payload from 516 KB to 180 KB. Poppins is still static, one file per weight, and is tiny by comparison (5-8 KB each). WHAT WAS DROPPED, and why it is safe: * cyrillic, cyrillic-ext, devanagari, vietnamese — 17 of the 35 faces Google declares. An English-language DFW contractor site renders none of those codepoints, so `unicode-range` meant the browser never fetched them anyway; they would only have sat in the repo. * Poppins 300 — the approved Google Fonts URL requests it and NOTHING uses it: zero `font-weight: 300` and zero `lighter` across all three CSS files and all 114 built pages. * latin-ext is KEPT even though this content has no extended-latin characters today. It costs 90 KB of repo and, thanks to `unicode-range`, zero runtime bytes — and it means a name like "Kraków" typed into the CMS next year renders in the brand font instead of silently falling back. `font-display: swap` is carried over from the original URL's `&display=swap`, so first paint still uses the fallback and the swap behaviour the client approved is unchanged. `unicode-range` is load-bearing, not decoration: it is what lets the browser skip latin-ext entirely on a page that needs only latin. MIRRORED into fjr-site/assets/ (both the CSS and the font files) so the static spec and the repo stay byte-identical — the documented pattern on this build. ------------------------------------------------------------------ */ /* Montserrat — variable, weight axis 500-800 (the range the approved design uses) */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url('/assets/fonts/montserrat-var-latin-ext.woff2') format('woff2');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} /* Poppins — static, one file per weight */ @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');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}