/* 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.0.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 Sampled from the logo (SFD_logoforweb.jpg), not guessed. Full working and contrast checks: claude/brand-tokens.md in the project. ========================================================================== */ :root { /* --- Core brand, straight off the logo --- */ --sfd-red: #CE2927; /* "DOORS" and the flame body */ --sfd-red-deep: #A81F1D; /* darker red — see the contrast note below */ --sfd-flame-orange: #EE6E23; /* mid-flame */ --sfd-flame-yellow: #FAE071; /* flame core */ --sfd-black: #000000; /* the wordmark */ /* --- Neutrals. Slight warm bias so they sit with the red. --- */ --sfd-ink: #141210; /* headings — 18:1 on white */ --sfd-body: #3D3833; /* body text */ --sfd-muted: #5C554F; /* captions, secondary */ --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 */ --sfd-warn: #8A5A00; /* needs attention */ --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. #CE2927 on white ................ 5.29 PASS at every size white on #CE2927 ................ 5.29 PASS at every size #A81F1D on white ................ 7.29 PASS, use for small/dense text #CE2927 on #F7F5F3 .............. 4.86 PASS #EE6E23 on white ................ 3.05 FAILS normal text. Large only. #CE2927 on black ................ 3.97 FAILS normal text. Avoid. Two rules that follow: 1. Flame orange is a graphic colour, never a text colour under 24px. 2. Never set red text on a black ground — which is exactly what the logo's vertical "DOORS" tempts you into doing in a dark footer. -------------------------------------------------------------------------- */ /* ========================================================================== 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. SITE CSS Everything custom goes below this line. ========================================================================== */