/* Theme Name: Shire Fire Theme URI: https://shirefiredoors.com.au Description: Child theme of Kadence for Shire Fire Doors Pty Ltd. Holds the brand palette and all custom CSS, so a Kadence update never overwrites it. Author: Shire Fire Doors Pty Ltd Author URI: https://shirefiredoors.com.au Template: kadence Version: 1.10.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: shirefire-child */ /* ========================================================================== 1. BRAND TOKENS Source of truth: docs/brand-tokens.md. v1.2 — the hex values below now come from the COLOUR-MANAGED Affinity Designer export of the logo (`Website images/SFD logo.svg`). v1.0/v1.1 carried values sampled from a JPEG, which had compression drift. Do NOT re-derive any of these from SFD.eps or SFD.pdf. That artwork is CMYK, and a naive conversion with no colour profile invents a red the designer never specified — that mistake was made once already and is written up in docs/brand-tokens.md. ========================================================================== */ :root { /* --- Core brand, from the colour-managed vector export --- */ --sfd-red: #CE2A27; /* "DOORS" and the flame body. Was #CE2927 */ --sfd-red-deep: #A81F1D; /* darker red — see the contrast note below */ --sfd-flame-orange: #ED6F23; /* mid-flame. Was #EE6E23 */ --sfd-flame-amber: #E9A04F; /* the internal flame licks. New in v1.2 */ --sfd-flame-yellow: #F9DE71; /* inner flame. Was #FAE071 */ --sfd-flame-core: #FBF9D1; /* the pale hot centre. New in v1.2 */ --sfd-black: #231F20; /* the wordmark. Rich black, NOT pure black. Was #000000 — the logo has never been pure black and the page shouldn't be */ /* --- Neutrals. Slight warm bias so they sit with the red. --- */ --sfd-ink: #231F20; /* headings — 16.30 on white. Now identical to the wordmark, so page and mark agree */ --sfd-body: #3D3833; /* body text — 11.59 on white. Deliberately a touch lighter than the headings: long serif copy reads better slightly off-black */ --sfd-muted: #5C554F; /* captions, secondary — 7.32 on white */ --sfd-line: #DFD9D4; /* hairlines, table rules */ --sfd-paper-alt: #F7F5F3; /* alternating section bands */ --sfd-paper: #FFFFFF; /* --- Semantic, for the guides and defect tables --- */ --sfd-ok: #2D6042; /* compliant — 7.33 on white */ --sfd-warn: #8A5A00; /* needs attention — 5.93 on white */ --sfd-fail: #A81F1D; /* non-compliant — reuses the deep red */ /* --- Spacing scale --- */ --sfd-space-xs: 0.5rem; --sfd-space-sm: 1rem; --sfd-space-md: 2rem; --sfd-space-lg: 4rem; --sfd-space-xl: 6rem; } /* -------------------------------------------------------------------------- CONTRAST — read this before choosing a colour. WCAG 2.1 AA is a requirement of the site scope, not a nice-to-have. Recalculated v1.2 against the corrected hex values. ON WHITE (#FFFFFF) #231F20 ink ................... 16.30 PASS #3D3833 body .................. 11.59 PASS #5C554F muted ................. 7.32 PASS #A81F1D red-deep .............. 7.29 PASS — use for small/dense text #2D6042 ok .................... 7.33 PASS #8A5A00 warn .................. 5.93 PASS #CE2A27 red .................. .5.27 PASS at every size white on #CE2A27 ............... 5.27 PASS at every size #ED6F23 flame orange .......... 3.04 FAILS normal text. Large only. #E9A04F flame amber ........... 2.19 FAILS EVERYTHING. Graphics only. ON THE ALT BAND (#F7F5F3) #CE2A27 red ................... 4.85 PASS #A81F1D red-deep .............. 6.71 PASS #5C554F muted ................. 6.73 PASS ON THE DARK GROUND (#231F20) — the footer, and the reverse logo's ground #FFFFFF white ................. 16.30 PASS #FBF9D1 flame core ............ 15.19 PASS #F9DE71 flame yellow .......... 12.20 PASS #DFD9D4 line ................. .11.65 PASS #E9A04F flame amber ........... 7.46 PASS (only on dark — see above) #ED6F23 flame orange .......... 5.36 PASS (only on dark — see above) #CE2A27 red ................... 3.09 FAILS normal text. Avoid. Three rules that follow: 1. Flame orange and amber fail on white and must never carry text there. On the DARK ground they both pass comfortably — so the accent for a dark footer or dark band is a flame colour, not the red. 2. Never set red text on the dark ground — which is exactly what the logo's vertical "DOORS" tempts you into doing in a dark footer. WCAG 1.4.11 exempts the logotype itself. A heading is not a logotype. 3. The dark ground is #231F20, not #000000. sfd-logo-reverse.svg was drawn with a #231F20 knockout halo; put it on pure black and the halo shows as a visible rectangle. -------------------------------------------------------------------------- */ /* ========================================================================== 2. KADENCE GLOBAL PALETTE Kadence draws its own colours from --global-palette1..9. Mapping the brand here means the theme, the block editor and every Kadence element pick the brand up without setting anything twice in the Customizer. ========================================================================== */ :root { --global-palette1: var(--sfd-red); /* primary accent, buttons, links */ --global-palette2: var(--sfd-red-deep); /* secondary accent, hover */ --global-palette3: var(--sfd-ink); /* headings */ --global-palette4: var(--sfd-body); /* body text */ --global-palette5: var(--sfd-muted); /* muted text */ --global-palette6: var(--sfd-line); /* borders */ --global-palette7: var(--sfd-paper-alt); /* alt background */ --global-palette8: #FBFAF9; /* lighter background */ --global-palette9: var(--sfd-paper); /* white */ --global-palette-highlight: var(--sfd-red); --global-palette-highlight-alt: var(--sfd-red-deep); --global-palette-highlight-alt2: var(--sfd-paper); --global-palette-btn: var(--sfd-paper); --global-palette-btn-hover: var(--sfd-paper); --global-palette-btn-bg: var(--sfd-red); --global-palette-btn-bg-hover: var(--sfd-red-deep); } /* ========================================================================== 3. ACCESSIBILITY ========================================================================== */ /* A visible focus ring on every interactive element. Kadence's default is faint, and keyboard navigation is part of the WCAG 2.1 AA target. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--sfd-red); outline-offset: 2px; border-radius: 2px; } /* Skip link — visible the moment it takes focus. */ .skip-link:focus { background: var(--sfd-paper); color: var(--sfd-ink); outline: 3px solid var(--sfd-red); padding: var(--sfd-space-sm); z-index: 100000; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 4. TYPEFACES — self-hosted Pairing B, "Editorial": Libre Franklin 800 headings over Source Serif 4 body. Chosen 9 Sep 2026. Reasoning: the guides are the differentiator and they run long; a serif carries a reader through 1,200 words in a way a sans does not. Both are variable fonts served from this theme, not from Google. That means no third-party request on page load (faster, and nothing leaks to Google), and the fonts survive any Kadence or Customizer change. The latin-ext and italic files only download if a page actually renders those characters, so a typical page pulls 151 KB of font, not 520 KB. ========================================================================== */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/libre-franklin-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: 'Libre Franklin'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/libre-franklin-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: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-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: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-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: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-italic-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: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif-4-italic-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; } :root { --sfd-font-head: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --sfd-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sfd-font-ui: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fluid type scale. Body sits at 18px and grows to 19px — the serif needs the extra size to hold up, and the guides are long. */ --sfd-size-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); --sfd-size-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); --sfd-size-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem); --sfd-size-h3: clamp(1.3125rem, 1.1rem + 0.8vw, 1.75rem); --sfd-size-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --sfd-size-small: 0.9375rem; --sfd-leading-prose: 1.7; /* generous, per the specimen's warning */ --sfd-leading-head: 1.12; } /* Kadence emits these three in :root from Customizer > Typography, and every theme element reads them. Re-declaring them here — in a stylesheet that loads after Kadence's — means the brand faces hold even if nothing is set in the Customizer, or if a setting gets changed by accident. */ :root { --global-body-font-family: var(--sfd-font-body); --global-heading-font-family: var(--sfd-font-head); --global-primary-nav-font-family: var(--sfd-font-ui); } body, .entry-content, .content-bg, .wp-site-blocks { font-family: var(--sfd-font-body); font-size: var(--sfd-size-body); line-height: var(--sfd-leading-prose); color: var(--sfd-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .entry-title, .site-title, .kadence-blocks-heading, .wp-block-heading { font-family: var(--sfd-font-head); color: var(--sfd-ink); line-height: var(--sfd-leading-head); text-wrap: balance; } /* 800 is the wordmark weight. Only the two top levels get it — any lower and the page starts shouting. */ h1, .entry-title, .site-title { font-weight: 800; letter-spacing: -0.02em; } h2 { font-weight: 800; letter-spacing: -0.015em; } h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.005em; } h1 { font-size: var(--sfd-size-h1); } h2 { font-size: var(--sfd-size-h2); margin-top: var(--sfd-space-lg); } h3 { font-size: var(--sfd-size-h3); margin-top: var(--sfd-space-md); } h4 { font-size: var(--sfd-size-h4); } /* Navigation, buttons, labels, tables and form controls stay on the sans. The serif is for reading, not for interface. */ .main-navigation, .site-header, .site-footer .widget-title, button, .button, .wp-block-button__link, .kb-button, input, select, textarea, label, .wp-block-table th, .sfd-label, .sfd-eyebrow { font-family: var(--sfd-font-ui); } button, .button, .wp-block-button__link, .kb-button { font-weight: 700; letter-spacing: 0.005em; } /* Small caps eyebrow above section headings — the compliance-notice look, without needing an image. */ .sfd-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sfd-red-deep); } /* ========================================================================== 5. TYPOGRAPHY HELPERS ========================================================================== */ /* Door counts, FRLs, certificate numbers and dates all line up in columns on this site. Tabular figures stop them jittering. */ table, .sfd-figures, .wp-block-table { font-variant-numeric: tabular-nums; } /* Long guide copy reads better with a measure limit. */ .sfd-prose > p, .sfd-prose > ul, .sfd-prose > ol { max-width: 68ch; } /* ========================================================================== 6. DARK GROUND One helper, used by the footer and any dark band. It exists so the red-on-dark trap in the contrast note above can't be fallen into by accident: inside .sfd-dark th, .site-footer the accent resolves to a flame colour, which passes on this ground, instead of the red, which doesn't. Put .sfd-dark on a section or row. It re-points the tokens rather than restating colours, so anything built from the tokens inverts with it. ========================================================================== */ .sfd-dark, .site-footer { /* Literal values, not var() references. Custom properties redeclared in the same block resolve against THIS block, so --sfd-ink: var(--sfd-paper) would pick up the #231F20 below and render headings invisible. */ --sfd-ink: #FFFFFF; /* 16.30 on #231F20 */ --sfd-body: #E8E4E0; /* 12.89 on #231F20 */ --sfd-muted: #BDB6AF; /* 8.13 on #231F20 */ --sfd-line: #4A4442; --sfd-paper: #231F20; --sfd-paper-alt: #2E2A2B; /* The accent swaps red → flame orange. Red is 3.09 here and fails; orange is 5.36 and passes. This is the whole point of the helper. */ --sfd-accent: var(--sfd-flame-orange); --sfd-accent-hover: var(--sfd-flame-amber); /* Kadence's own hook for the outline button's label and border. It reads `var(--global-palette-btn-out, var(--global-palette-btn-bg))`, which falls back to the brand red — 3.09 on this ground, and a fail. Setting the variable here fixes it inside Kadence's own rule, which is cleaner than trying to out-specify it: Kadence's selector carries four classes and beats anything reasonable we could write. */ --global-palette-btn-out: #FFFFFF; background-color: #231F20; color: #E8E4E0; } /* Everywhere else the accent is the red. Declared after .sfd-dark so the helper's override wins inside it. */ :root { --sfd-accent: var(--sfd-red); --sfd-accent-hover: var(--sfd-red-deep); } .sfd-dark h1, .site-footer h1, .sfd-dark h2, .site-footer h2, .sfd-dark h3, .site-footer h3, .sfd-dark h4, .site-footer h4, .sfd-dark h5, .site-footer h5, .sfd-dark h6, .site-footer h6, .sfd-dark .wp-block-heading, .site-footer .wp-block-heading { color: var(--sfd-ink); } /* #FFFFFF in here */ /* Text links only. A button is NOT a link for colour purposes — it has its own ground, so recolouring its label to the section accent puts flame orange on a red button (1.73, unreadable). That bug shipped in v1.4 and was caught by measuring the rendered page. Buttons are handled below. */ .sfd-dark a:not(.wp-block-button__link):not(.kb-button):not(.button), .site-footer a:not(.wp-block-button__link):not(.kb-button):not(.button) { color: var(--sfd-accent); } .sfd-dark a:not(.wp-block-button__link):not(.kb-button):not(.button):hover, .site-footer a:not(.wp-block-button__link):not(.kb-button):not(.button):hover { color: var(--sfd-accent-hover); } /* --- Buttons on the dark ground --------------------------------------- Contrast is measured INSIDE the button for its label, and against the section ground for its edge (WCAG 1.4.11 wants 3:1 on that edge). Filled: white on #CE2A27 .......... 5.27 PASS #CE2A27 edge on #231F20 ... 3.09 PASS (non-text, needs 3) Outline: white label and border .... 16.30 PASS both ways The outline button must NOT keep the brand red it uses on white: red text on this ground is 3.09 and fails. White is the only honest option, and it reads as the secondary action because it has no fill. */ .sfd-dark .wp-block-button__link, .site-footer .wp-block-button__link { background-color: var(--sfd-red); color: #FFFFFF; } .sfd-dark .wp-block-button__link:hover, .site-footer .wp-block-button__link:hover { background-color: var(--sfd-red-deep); color: #FFFFFF; } /* Four classes, to match the weight of the Kadence rule this overrides. The variable above does the real work; this is the belt to its braces, and it is what makes the background transparent again. */ .sfd-dark .wp-block-button.is-style-outline .wp-block-button__link, .site-footer .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: #FFFFFF; border-color: #FFFFFF; } /* On hover the outline button fills white and takes the dark ground as its label colour — 16.30, and the inversion makes the hover unmistakable. */ .sfd-dark .wp-block-button.is-style-outline .wp-block-button__link:hover, .site-footer .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: #FFFFFF; color: #231F20; border-color: #FFFFFF; } .sfd-dark a:focus-visible, .site-footer a:focus-visible, .sfd-dark button:focus-visible, .site-footer button:focus-visible, .sfd-dark [tabindex]:focus-visible, .site-footer [tabindex]:focus-visible { outline-color: var(--sfd-flame-yellow); /* 12.20 on this ground */ } .sfd-dark .sfd-eyebrow, .site-footer .sfd-eyebrow { color: var(--sfd-flame-amber); } .sfd-dark hr, .site-footer hr, .sfd-dark td, .site-footer td, .sfd-dark th { border-color: var(--sfd-line); } /* ========================================================================== 7. LINKS ========================================================================== */ .entry-content a:not(.wp-block-button__link):not(.kb-button) { color: var(--sfd-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } .entry-content a:not(.wp-block-button__link):not(.kb-button):hover { color: var(--sfd-accent-hover); text-decoration-thickness: 2px; } /* ========================================================================== 8. SITE CSS Everything custom goes below this line. ========================================================================== */ /* --- Header --------------------------------------------------------------- Logo left, navigation right, phone as a filled red button at the end of the row. The button's colours are deliberately NOT set in the Customizer: left empty, Kadence falls back to --global-palette-btn-bg, which section 2 maps to the brand red. One place to change it, not two. -------------------------------------------------------------------------- */ /* The logo artwork is tight-cropped — the S touches the left edge. Without this the wordmark collides with the viewport edge on narrow screens. */ .site-header-main-section-left .site-branding { padding-inline-end: var(--sfd-space-sm); } /* Kadence renders the header button with .header-button. Sans, like every other control on the site, and tabular figures so the number doesn't jitter when the sticky header shrinks. */ .header-button { font-family: var(--sfd-font-ui); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; } /* The phone number is an address, not a sentence — never let it wrap or hyphenate mid-number. */ .header-button, .mobile-header-button-wrap .mobile-header-button { word-break: keep-all; } /* Sticky header: a hairline instead of a heavy shadow, so the shrink reads as the header settling rather than lifting off the page. */ .site-header-wrap .site-header-row-container.item-is-fixed:not(.item-at-start) { box-shadow: none; border-bottom: 1px solid var(--sfd-line); } /* --- Footer --------------------------------------------------------------- One footer-html item holding the whole footer, laid out here rather than in widget areas. Reason: widgets scatter the content across six settings in the database, and this footer is four short columns that belong in one place where they can be read and corrected. The dark ground and every colour in here come from the .sfd-dark token block in section 6, which .site-footer now shares. Nothing below sets a colour literally. -------------------------------------------------------------------------- */ .sfd-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sfd-space-lg) var(--sfd-space-md); align-items: start; text-align: left; padding-block: var(--sfd-space-md); } .sfd-footer__brand img { width: 200px; max-width: 100%; height: auto; margin-bottom: var(--sfd-space-sm); } /* The reverse logo carries a #231F20 knockout halo behind the flame, so it must sit on exactly that ground. If the footer background is ever changed, change the halo in the SVG too or the box will show. */ .sfd-footer__brand p { font-size: var(--sfd-size-small); color: var(--sfd-muted); max-width: 34ch; margin: 0; } .sfd-footer__h { font-family: var(--sfd-font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sfd-flame-amber); /* 7.46 on this ground. The red would be 3.09 */ margin: 0 0 var(--sfd-space-xs); } .sfd-footer__col p { margin: 0 0 var(--sfd-space-xs); } .sfd-footer__col a { text-decoration: none; border-bottom: 1px solid transparent; } .sfd-footer__col a:hover { border-bottom-color: currentColor; } /* Phone numbers, licence numbers and the ABN all sit in columns here. */ .sfd-footer__col, .sfd-footer__legal { font-variant-numeric: tabular-nums; } .sfd-footer__areas { color: var(--sfd-muted); } .sfd-footer__legal { grid-column: 1 / -1; margin: 0; padding-top: var(--sfd-space-md); border-top: 1px solid var(--sfd-line); font-size: var(--sfd-size-small); color: var(--sfd-muted); } @media (max-width: 1024px) { .sfd-footer { grid-template-columns: 1fr 1fr; } .sfd-footer__brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .sfd-footer { grid-template-columns: 1fr; gap: var(--sfd-space-md); } } /* ========================================================================== 9. LANDING PAGE Built 12 Sep 2026 from copy/home-page-copy.md. The page itself is native WordPress blocks, so Jonathan can change any word in the editor; every section is a full-width group carrying one of the classes below, and all the layout lives here rather than in block settings. Page 15 is set to Kadence layout "fullwidth", content style "unboxed", title hidden, vertical padding hidden — otherwise the theme wraps the content in a boxed column and the alternating bands can't reach the edge. ========================================================================== */ /* Section rhythm. Each band sets its own ground; the inner column is what the type actually sits in. */ .sfd-hero, .sfd-trust, .sfd-fork-wrap, .sfd-services, .sfd-how, .sfd-areas, .sfd-guides, .sfd-review, .sfd-final { padding-block: var(--sfd-space-xl); padding-inline: var(--sfd-space-md); } .sfd-hero > .wp-block-group__inner-container, .sfd-trust > .wp-block-group__inner-container, .sfd-fork-wrap > .wp-block-group__inner-container, .sfd-services > .wp-block-group__inner-container, .sfd-how > .wp-block-group__inner-container, .sfd-areas > .wp-block-group__inner-container, .sfd-guides > .wp-block-group__inner-container, .sfd-review > .wp-block-group__inner-container, .sfd-final > .wp-block-group__inner-container { max-width: 1140px; margin-inline: auto; } /* Alternating grounds. Kept to two — white and the warm off-white — because a third tone starts to look like a template. */ .sfd-trust, .sfd-how, .sfd-review { background: var(--sfd-paper-alt); } /* --- Hero --- */ .sfd-hero { padding-block: calc(var(--sfd-space-xl) + var(--sfd-space-md)) var(--sfd-space-xl); } .sfd-hero h1 { max-width: 18ch; margin: 0; } /* The lead is the one place the serif runs large. It carries the claim the whole page rests on, so it gets room. */ .sfd-lead { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.55; max-width: 54ch; margin-top: var(--sfd-space-sm); color: var(--sfd-body); } .sfd-hero .wp-block-buttons { margin-top: var(--sfd-space-md); } /* --- Trust strip --- */ /* Six proofs on one line. Sans, because it's a label row, not prose, and tabular figures so the licence and certificate numbers sit straight. */ .sfd-trust { padding-block: var(--sfd-space-md); } .sfd-trust__line { font-family: var(--sfd-font-ui); font-size: var(--sfd-size-small); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; line-height: 2; color: var(--sfd-ink); margin: 0; text-align: center; } /* The separators are punctuation, not content — mute them so the eye reads six items rather than one long string. */ .sfd-trust__line span { color: var(--sfd-red); padding-inline: 0.35em; } /* --- The fork --- */ .sfd-fork { gap: var(--sfd-space-md); } .sfd-fork__panel { height: 100%; padding: var(--sfd-space-md); border: 1px solid var(--sfd-line); border-top: 3px solid var(--sfd-red); background: var(--sfd-paper); } .sfd-fork__h { margin-top: var(--sfd-space-xs); font-size: var(--sfd-size-h3); } .sfd-fork__panel p { max-width: 46ch; } .sfd-fork__panel .wp-block-buttons { margin-top: var(--sfd-space-md); } /* --- Service cards --- */ .sfd-services .wp-block-columns { gap: var(--sfd-space-md); margin-bottom: var(--sfd-space-md); } .sfd-services .wp-block-columns:last-child { margin-bottom: 0; } .sfd-services .wp-block-column { padding: var(--sfd-space-sm) 0 var(--sfd-space-sm) var(--sfd-space-sm); border-left: 2px solid var(--sfd-line); } .sfd-card__h { margin: 0 0 var(--sfd-space-xs); font-size: var(--sfd-size-h4); } .sfd-services .wp-block-column p { margin: 0; color: var(--sfd-muted); } /* --- How it works --- */ .sfd-steps { gap: var(--sfd-space-md); margin-bottom: var(--sfd-space-md); } .sfd-step { height: 100%; padding: var(--sfd-space-md); background: var(--sfd-paper); border: 1px solid var(--sfd-line); } .sfd-step__h { margin: var(--sfd-space-xs) 0; font-size: var(--sfd-size-h4); } .sfd-step p { margin: 0; color: var(--sfd-muted); } /* The compliance argument. This paragraph is the differentiator, so it gets the one rule on the page that says "read this". */ .sfd-pull { border-left: 3px solid var(--sfd-red); padding: var(--sfd-space-sm) 0 var(--sfd-space-sm) var(--sfd-space-md); background: transparent; } .sfd-pull p { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); max-width: 62ch; color: var(--sfd-ink); } /* --- Service areas, guides, review --- */ .sfd-areas p, .sfd-guides p, .sfd-guides li { max-width: 68ch; } .sfd-guides .wp-block-list { display: grid; gap: var(--sfd-space-xs); } .sfd-quote { border-left: 3px solid var(--sfd-red); padding-left: var(--sfd-space-md); margin: 0; } .sfd-quote p { font-size: var(--sfd-size-h3); font-style: italic; line-height: 1.45; color: var(--sfd-ink); max-width: 48ch; } .sfd-quote cite { display: block; margin-top: var(--sfd-space-sm); font-family: var(--sfd-font-ui); font-size: var(--sfd-size-small); font-style: normal; color: var(--sfd-muted); } /* --- Final call to action --- Carries .sfd-dark, so the ground, the text and the accent all come from the token block in section 6. Nothing here names a colour. */ .sfd-final h2 { max-width: 20ch; } .sfd-final .sfd-lead { max-width: 56ch; } .sfd-final__contact { margin-top: var(--sfd-space-md); padding-top: var(--sfd-space-md); border-top: 1px solid var(--sfd-line); font-family: var(--sfd-font-ui); font-size: var(--sfd-size-small); font-variant-numeric: tabular-nums; line-height: 2; } /* --- Sections that are not ready to launch --- .sfd-draft marks a section built from approved copy that cannot go public yet — section 07 has no guides behind it, section 08 has no review text. The bar is deliberately loud. The site is noindex, so nobody outside the project sees it, and the alternative is forgetting. To launch: delete the section, or remove the sfd-draft class. Both are a one-line change in the block editor. */ .sfd-draft { position: relative; } .sfd-draft::before { content: "Draft — not for launch"; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1; background: var(--sfd-red); color: var(--sfd-paper); font-family: var(--sfd-font-ui); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.75rem; } .sfd-draft { border-top: 2px dashed var(--sfd-red); } /* --- Narrow screens --- */ @media (max-width: 1024px) { .sfd-hero, .sfd-fork-wrap, .sfd-services, .sfd-how, .sfd-areas, .sfd-guides, .sfd-review, .sfd-final { padding-block: var(--sfd-space-lg); } } @media (max-width: 781px) { /* WordPress stacks columns below 782px on its own; these just tidy the spacing once they're stacked. */ .sfd-services .wp-block-column { padding-left: var(--sfd-space-sm); } .sfd-hero { padding-block: var(--sfd-space-lg); } .sfd-trust__line { line-height: 1.9; } } @media (max-width: 600px) { .sfd-hero, .sfd-trust, .sfd-fork-wrap, .sfd-services, .sfd-how, .sfd-areas, .sfd-guides, .sfd-review, .sfd-final { padding-inline: var(--sfd-space-sm); } .sfd-fork__panel, .sfd-step { padding: var(--sfd-space-sm); } } /* ========================================================================== 10. SERVICE PAGES Built 18 Sep 2026 with /fire-door-replacement/ as the template page. Sections reuse the landing page's classes wherever the shape is the same (.sfd-hero, .sfd-how, .sfd-steps, .sfd-pull, .sfd-fork, .sfd-final); only the genuinely new shapes are below. Keeping one set of section classes is what stops six service pages drifting apart. ========================================================================== */ .sfd-problem, .sfd-included, .sfd-compliance, .sfd-faq { padding-block: var(--sfd-space-xl); padding-inline: var(--sfd-space-md); } .sfd-problem > .wp-block-group__inner-container, .sfd-included > .wp-block-group__inner-container, .sfd-compliance > .wp-block-group__inner-container, .sfd-faq > .wp-block-group__inner-container { max-width: 1140px; margin-inline: auto; } /* Alternating grounds continue the landing page's two-tone rhythm. */ .sfd-included, .sfd-faq { background: var(--sfd-paper-alt); } .sfd-problem p, .sfd-compliance p { max-width: 68ch; } /* --- What's included --- A checklist, not a bulleted paragraph. The tick is decorative and is hidden from assistive technology — the list semantics already say "list item", and a screen reader announcing "check mark" seven times adds nothing. */ .sfd-included__list { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sfd-space-sm) var(--sfd-space-md); max-width: none; } .sfd-included__list li { position: relative; padding-left: 1.75rem; max-width: 44ch; } .sfd-included__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.35rem; border-left: 2px solid var(--sfd-red); border-bottom: 2px solid var(--sfd-red); transform: rotate(-45deg); } @media (max-width: 781px) { .sfd-included__list { grid-template-columns: 1fr; } } /* --- Compliance section --- Sub-headings are h3 and run small — this is reference material, and it should read as a set of short answers rather than shout for attention. */ .sfd-compliance h3 { font-size: var(--sfd-size-h4); margin-top: var(--sfd-space-md); margin-bottom: var(--sfd-space-xs); } .sfd-compliance h3:first-of-type { margin-top: var(--sfd-space-sm); } /* The Standards Australia line. Small, muted, and deliberately last: the page paraphrases the standards and must never look like it reproduces them. --sfd-muted is 7.32 on white, so it stays AA at this size. */ .sfd-note { margin-top: var(--sfd-space-md); padding-top: var(--sfd-space-sm); border-top: 1px solid var(--sfd-line); font-size: var(--sfd-size-small); color: var(--sfd-muted); } /* --- FAQ --- Native
/. No JavaScript, keyboard-operable for free, and findable by the browser's own in-page search once open. Kadence styles details lightly, so most of this is spacing and the marker. */ .sfd-faq__item { border-bottom: 1px solid var(--sfd-line); padding-block: var(--sfd-space-sm); } .sfd-faq__item:first-of-type { border-top: 1px solid var(--sfd-line); } .sfd-faq__item summary { cursor: pointer; list-style: none; position: relative; padding-right: 2rem; font-family: var(--sfd-font-ui); font-weight: 700; font-size: var(--sfd-size-h4); color: var(--sfd-ink); } .sfd-faq__item summary::-webkit-details-marker { display: none; } /* A chevron drawn in CSS rather than an icon font or an SVG request. */ .sfd-faq__item summary::after { content: ""; position: absolute; right: 0.5rem; top: 0.4em; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--sfd-red); border-bottom: 2px solid var(--sfd-red); transform: rotate(45deg); transition: transform 0.15s linear; } .sfd-faq__item[open] summary::after { transform: rotate(-135deg); top: 0.65em; } .sfd-faq__item summary:focus-visible { outline: 3px solid var(--sfd-red); outline-offset: 4px; border-radius: 2px; } .sfd-faq__item p { margin: var(--sfd-space-xs) 0 0; max-width: 68ch; color: var(--sfd-body); } @media (max-width: 1024px) { .sfd-problem, .sfd-included, .sfd-compliance, .sfd-faq { padding-block: var(--sfd-space-lg); } } @media (max-width: 600px) { .sfd-problem, .sfd-included, .sfd-compliance, .sfd-faq { padding-inline: var(--sfd-space-sm); } } /* --- Access --------------------------------------------------------------- Added 18 Sep 2026, after reading the real enquiry mail. Access — not the doors — is the single most common source of friction on every job, and no competitor's site explains it. Hence a section of its own rather than one line in the FAQ. Structurally it is the how-it-works section again: four .sfd-step cards and a .sfd-pull for the privacy note. No new component, just a band. -------------------------------------------------------------------------- */ .sfd-access { padding-block: var(--sfd-space-xl); padding-inline: var(--sfd-space-md); background: var(--sfd-paper-alt); } .sfd-access > .wp-block-group__inner-container { max-width: 1140px; margin-inline: auto; } .sfd-access .sfd-lead { margin-bottom: var(--sfd-space-md); } .sfd-access .sfd-steps { margin-bottom: var(--sfd-space-md); } /* Four across rather than the three of "how it works", so they need to be allowed to wrap earlier. */ @media (max-width: 1024px) { .sfd-access { padding-block: var(--sfd-space-lg); } .sfd-access .wp-block-columns { flex-wrap: wrap; } .sfd-access .wp-block-column { flex-basis: calc(50% - var(--sfd-space-md)) !important; } } @media (max-width: 600px) { .sfd-access { padding-inline: var(--sfd-space-sm); } .sfd-access .wp-block-column { flex-basis: 100% !important; } } /* The band above the FAQ is now also alt-toned, so give the FAQ the paper ground instead and keep the two-tone rhythm alternating. */ .sfd-faq { background: var(--sfd-paper); } /* ========================================================================== 11. NAVIGATION Added 19 Sep 2026, once six service pages existed and a "Services" dropdown was finally worth having. Almost nothing belongs here. The dropdown's size (15px), its line height and its width (240px) are Kadence Customizer values, not CSS — they live in the database and are recorded in docs/header-footer-build.md. A CSS override would also have worked, but it would have left the Customizer reporting 12px while the site rendered 15, which is how a theme becomes impossible to hand over. The one rule below has no Customizer equivalent. ========================================================================== */ /* "Services" is a parent, not a destination — there is no services page, and inventing one would mean a page with nothing on it. Give it the cursor of a disclosure so it doesn't promise a page that isn't there. */ .site-header .menu-item-has-children > a[href$="#"] { cursor: default; } /* ========================================================================== 12. BAND GUTTERS Added 23 Sep 2026 (theme 1.9.1; catch-all for unnamed groups 1.9.2–1.9.3). Kadence sets `.entry-content .alignfull { padding-left: 0; padding-right: 0 }` — specificity 0,2,0 — which beats every `.sfd-*` band rule above (0,1,0). So no band ever got its side padding: invisible on wide desktops, where the 1140px inner column centres itself, but text sat hard against the screen edge on tablets and phones on every page, and the quote form (which had no centred column at all) touched the left edge even on desktop. Restated here at equal specificity, later in the file. Keep this list in step with the band classes in sections 9 and 10. ========================================================================== */ .entry-content > .sfd-hero, .entry-content > .sfd-trust, .entry-content > .sfd-fork-wrap, .entry-content > .sfd-services, .entry-content > .sfd-how, .entry-content > .sfd-areas, .entry-content > .sfd-guides, .entry-content > .sfd-review, .entry-content > .sfd-final, .entry-content > .sfd-problem, .entry-content > .sfd-included, .entry-content > .sfd-compliance, .entry-content > .sfd-faq, .entry-content > .sfd-access, .entry-content > .sfd-quoteform { padding-inline: var(--sfd-space-md); } @media (max-width: 600px) { .entry-content > .sfd-hero, .entry-content > .sfd-trust, .entry-content > .sfd-fork-wrap, .entry-content > .sfd-services, .entry-content > .sfd-how, .entry-content > .sfd-areas, .entry-content > .sfd-guides, .entry-content > .sfd-review, .entry-content > .sfd-final, .entry-content > .sfd-problem, .entry-content > .sfd-included, .entry-content > .sfd-compliance, .entry-content > .sfd-faq, .entry-content > .sfd-access, .entry-content > .sfd-quoteform { padding-inline: var(--sfd-space-sm); } } /* Any full-width group without a band class — the privacy policy's body is one — gets the same gutter, so a new page can't reintroduce the problem. */ .entry-content > .wp-block-group.alignfull:not([class*="sfd-"]) { padding-inline: var(--sfd-space-md); } @media (max-width: 600px) { .entry-content > .wp-block-group.alignfull:not([class*="sfd-"]) { padding-inline: var(--sfd-space-sm); } } .entry-content > .wp-block-group.alignfull:not([class*="sfd-"]) > .wp-block-group__inner-container { max-width: 1140px; margin-inline: auto; } /* The quote form: same centred column as every other band, and a reading width so it lines up under the page heading instead of spanning the page. */ .sfd-quoteform > .wp-block-group__inner-container { max-width: 1140px; margin-inline: auto; } .sfd-quoteform .fluentform { max-width: 760px; } /* ========================================================================== 13. ANIMATED BANDS Added 1 Oct 2026 (theme 1.10.0). A full-width line-drawing band printed straight under the header by inc/sfd-bands.php, on the pages mapped there (home and the six service pages). Drawn and run by assets/bands/*.js. Full-bleed on purpose: it sits outside .entry-content, so it is NOT in the section 12 gutter list. The height is fixed here, before any script runs, so the page never shifts when the drawing arrives (CLS 0). Every mark is a stroke. The band colour is used as a fill only so nearer lines hide farther ones. No red in the drawing — red appears only in the button's keyboard focus ring. ========================================================================== */ .sfd-band { --sfd-band-ink: var(--sfd-ink); --sfd-band-soft: #8A817A; /* dust flicks */ --sfd-band-faint: #D6CFC9; /* door panel line, hatch in the open frame */ --sfd-band-bg: var(--sfd-paper-alt); position: relative; width: 100%; height: clamp(96px, 10vw, 150px); background: var(--sfd-band-bg); border-bottom: 1px solid var(--sfd-line); overflow: hidden; } .sfd-band__svg { display: block; width: 100%; height: 100%; } .sfd-band .sb-l { fill: none; stroke: var(--sfd-band-ink); stroke-opacity: .88; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sfd-band .sb-l.sb-thin { stroke-width: 1.15; stroke-opacity: .7; } .sfd-band .sb-l.sb-faint { stroke: var(--sfd-band-faint); stroke-opacity: 1; stroke-width: 1.1; } .sfd-band .sb-l.sb-soft { stroke: var(--sfd-band-soft); stroke-opacity: .9; stroke-width: 1.1; } .sfd-band .sb-occ { fill: var(--sfd-band-bg); stroke: none; } /* Pause / play / replay. WCAG 2.2.2: the drawing moves for more than five seconds alongside other content, so it must be pausable. Hidden until the script has run, so a no-JS visitor never sees a button that does nothing. */ .sfd-band__toggle { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; padding: 0; margin: 0; display: none; place-items: center; border: 1px solid var(--sfd-line); border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--sfd-muted); cursor: pointer; } .sfd-band.is-ready .sfd-band__toggle { display: grid; } .sfd-band.is-static .sfd-band__toggle { display: none; } /* Kadence styles every