/* ========================================================================= KELVINATOR AIR CONDITIONING THEME STYLESHEET Repair Service Installation | Australian market --------------------------------------------------------------------- Typeface: Inter only. Weights 400 (regular) and 500 (medium) only. No bold. No italic. Hierarchy is carried by SIZE, COLOUR, TRACKING and WHITESPACE never by weight. --------------------------------------------------------------------- Palettes: Themes: auto (prefers-color-scheme) + Prefix: .k- (avoids collisions with WordPress plugin CSS) ========================================================================= */ /* ------------------------------------------------------------------------- 1. FONT ------------------------------------------------------------------------- */ /* In WordPress, load Inter via the header plugin: */ /* ------------------------------------------------------------------------- 2. TOKENS NEUTRAL RAMPS (one per palette, each with its own hue bias) ------------------------------------------------------------------------- */ :root, [data-palette="frost"] { /* cool, blue-biased neutrals */ --n-0:#FFFFFF; --n-25:#F8FBFD; --n-50:#F1F6FA; --n-100:#E6EEF4; --n-200:#D6E2EB; --n-300:#B9CBD8; --n-400:#8FA6B6; --n-500:#56707F; --n-600:#546C7B; --n-700:#3A4F5D; --n-800:#22343F; --n-900:#0E1D26; --n-950:#081319; --p-900:#062E48; --p-800:#083C5E; --p-700:#0A4A73; --p-600:#0B5A8C; --p-500:#1273AF; --p-400:#3E96CE; --p-300:#7FBCE3; --p-100:#DCEDF8; --a-700:#0E7C9E; --a-600:#1295BC; --a-500:#22AAD2; --a-400:#54C2E2; --a-300:#8AD5EC; --a-100:#DAF1F8; --a-ink:#0C6E8C; /* AA on light grounds */ --cta-rest:#0B5A8C; --cta-hov:#083C5E; --cta-ink:#FFFFFF; /* 6.9:1 with white */ } [data-palette="ember"] { /* warm-biased neutrals pairs with the orange call-to-action */ --n-0:#FFFFFF; --n-25:#FBFAF8; --n-50:#F6F4F1; --n-100:#EDEAE5; --n-200:#DFDAD3; --n-300:#C6BEB4; --n-400:#9C9187; --n-500:#736860; --n-600:#635950; --n-700:#463E37; --n-800:#2B2622; --n-900:#161311; --n-950:#0D0B0A; --p-900:#07253F; --p-800:#0A3253; --p-700:#0D3F68; --p-600:#104E80; --p-500:#1866A3; --p-400:#4A8BC2; --p-300:#8AB4D8; --p-100:#DCE9F4; --a-700:#B8481A; --a-600:#D2551F; --a-500:#E8622C; --a-400:#F08551; --a-300:#F5A87E; --a-100:#FBE7DC; --a-ink:#A83F14; /* AA on light grounds */ --cta-rest:#C24E19; --cta-hov:#A83F14; --cta-ink:#FFFFFF; /* 4.8:1 with white */ } [data-palette="reef"] { /* green-biased neutrals */ --n-0:#FFFFFF; --n-25:#F8FBFA; --n-50:#F0F6F4; --n-100:#E4EEEB; --n-200:#D2E2DE; --n-300:#B2CBC5; --n-400:#87A49D; --n-500:#547069; --n-600:#4F6A65; --n-700:#364C48; --n-800:#1F312E; --n-900:#0C1C1A; --n-950:#06120F; --p-900:#062A2F; --p-800:#08373E; --p-700:#0A464F; --p-600:#0C5661; --p-500:#0F6E7C; --p-400:#2F929F; --p-300:#79BCC5; --p-100:#D9EDF0; --a-700:#0A7F72; --a-600:#0D9587; --a-500:#12A897; --a-400:#43C2B3; --a-300:#7BD5C8; --a-100:#D7F1ED; --a-ink:#087267; /* AA on light grounds */ --cta-rest:#0A7F72; --cta-hov:#087267; --cta-ink:#FFFFFF; /* 4.9:1 with white */ } /* ------------------------------------------------------------------------- 3. TOKENS SEMANTIC (LIGHT) Selector covers both and , so the semantic tokens are recomputed from whichever ramp that element carries. ------------------------------------------------------------------------- */ :root, [data-palette] { --bg: var(--n-0); --bg-alt: var(--n-50); --bg-sunk: var(--n-100); --bg-invert: var(--p-900); --bg-invert-alt: var(--p-800); --surface: var(--n-0); --surface-alt: var(--n-25); --line: var(--n-200); --line-soft: var(--n-100); --line-strong: var(--n-300); --line-invert: rgba(255,255,255,.16); --text: var(--n-900); --text-mid: var(--n-700); --text-mut: var(--n-600); --text-soft: var(--n-500); --text-invert: #FFFFFF; --text-invert-mut: rgba(255,255,255,.72); --brand: var(--p-600); --brand-deep: var(--p-800); --brand-tint: var(--p-100); --accent: var(--a-600); --accent-ink: var(--a-ink); --accent-tint: var(--a-100); --cta: var(--cta-rest); --cta-hover: var(--cta-hov); --cta-text: var(--cta-ink); /* tertiary button. Dark fill with light ink here, and it inverts to a light fill with dark ink in dark mode, so it stays legible either way. */ --btn-dark-bg: var(--p-800); --btn-dark-bg-hover: var(--p-700); --btn-dark-ink: #FFFFFF; --link: var(--p-600); --link-hover: var(--p-800); --ok: #14804A; --warn: #8A5800; --crit: #A3231C; --ok-tint:#E4F4EB; --warn-tint:#FBF0DC; --crit-tint:#FBE7E5; --star:#E8A320; --focus: var(--a-500); --shadow-1: 0 1px 2px rgba(8,25,38,.05); --shadow-2: 0 2px 4px rgba(8,25,38,.05), 0 8px 24px -12px rgba(8,25,38,.18); --shadow-3: 0 4px 8px rgba(8,25,38,.06), 0 24px 48px -20px rgba(8,25,38,.24); /* ---- type ---- */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fw-reg: 400; --fw-mid: 500; /* the theme's maximum weight set to 400 to go flat */ /* Reading text sits at 19px. Small utility labels are lifted to a 15px floor rather than 19, so size still carries the hierarchy that weight is not allowed to carry here. */ --fs-2xs: .9375rem; /* 15px. uppercase micro labels, pills, table heads */ --fs-xs: 1rem; /* 16px. captions, fine print, form labels */ --fs-sm: 1.0625rem; /* 17px. buttons and secondary interface text */ --fs-base: 1.1875rem; /* 19px. body copy */ --fs-md: 1.3125rem; /* 21px. lead paragraphs */ --fs-lg: clamp(1.3125rem, 1.24rem + .32vw, 1.5rem); --fs-xl: clamp(1.5rem, 1.35rem + .65vw, 1.875rem); --fs-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --fs-3xl: clamp(2.0625rem, 1.7rem + 1.6vw, 3.125rem); --fs-hero: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); --lh-tight: 1.06; --lh-head: 1.18; --lh-snug: 1.42; --lh-body: 1.68; --lh-loose: 1.78; --tr-hero: -.032em; --tr-head: -.021em; --tr-lead: -.011em; --tr-label: .13em; /* ---- space ---- */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s7:2rem; --s8:2.5rem; --s9:3rem; --s10:4rem; --s11:5rem; --s12:6.5rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); --band: clamp(3.25rem, 6.2vw, 6rem); /* ---- shape ---- */ --r-sm:3px; --r:4px; --r-lg:6px; --r-pill:999px; --wrap: 1180px; --wrap-narrow: 860px; --measure: 68ch; --hair: 1px; } /* ------------------------------------------------------------------------- 4. TOKENS SEMANTIC (DARK) Redefine tokens only. Never style a component inside these blocks. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-palette] { --bg: var(--n-950); --bg-alt: var(--n-900); --bg-sunk: var(--n-800); --bg-invert: var(--n-900); --bg-invert-alt: var(--n-800); --surface: var(--n-900); --surface-alt: var(--n-800); --line: rgba(255,255,255,.13); --line-soft: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.22); --line-invert: rgba(255,255,255,.16); --text: var(--n-50); --text-mid: var(--n-200); --text-mut: var(--n-300); --text-soft: var(--n-400); --btn-dark-bg: var(--p-300); --btn-dark-bg-hover: var(--p-400); --btn-dark-ink: var(--n-950); --brand: var(--p-300); --brand-deep: var(--p-400); --brand-tint: rgba(255,255,255,.06); --accent: var(--a-400); --accent-ink: var(--a-400); --accent-tint: rgba(255,255,255,.06); --link: var(--p-300); --link-hover: var(--a-400); --ok:#5FCB92; --warn:#E5B45C; --crit:#F08A82; --ok-tint:rgba(95,203,146,.12); --warn-tint:rgba(229,180,92,.12); --crit-tint:rgba(240,138,130,.12); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-3: 0 4px 8px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.7); } } :root[data-theme="dark"], :root[data-theme="dark"] [data-palette] { --bg: var(--n-950); --bg-alt: var(--n-900); --bg-sunk: var(--n-800); --bg-invert: var(--n-900); --bg-invert-alt: var(--n-800); --surface: var(--n-900); --surface-alt: var(--n-800); --line: rgba(255,255,255,.13); --line-soft: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.22); --line-invert: rgba(255,255,255,.16); --text: var(--n-50); --text-mid: var(--n-200); --text-mut: var(--n-300); --text-soft: var(--n-400); --btn-dark-bg: var(--p-300); --btn-dark-bg-hover: var(--p-400); --btn-dark-ink: var(--n-950); --brand: var(--p-300); --brand-deep: var(--p-400); --brand-tint: rgba(255,255,255,.06); --accent: var(--a-400); --accent-ink: var(--a-400); --accent-tint: rgba(255,255,255,.06); --link: var(--p-300); --link-hover: var(--a-400); --ok:#5FCB92; --warn:#E5B45C; --crit:#F08A82; --ok-tint:rgba(95,203,146,.12); --warn-tint:rgba(229,180,92,.12); --crit-tint:rgba(240,138,130,.12); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-3: 0 4px 8px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.7); } /* ------------------------------------------------------------------------- 5. RESET + BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: var(--fw-reg); font-size: var(--fs-base); line-height: var(--lh-body); font-feature-settings: "cv05" 1, "ss03" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- THE RULE: no bold, no italic, anywhere, ever. -------------------- */ h1, h2, h3, h4, h5, h6, strong, b, th, dt, legend, summary, optgroup, mark { font-weight: var(--fw-mid); } em, i, cite, dfn, address, var, q, blockquote, figcaption { font-style: normal; } /* and pasted from the content still need to read as emphasis so they take colour, not weight. */ strong, b { color: var(--text); } em, i { color: var(--brand); } mark { background: var(--accent-tint); color: var(--text); padding: .06em .28em; border-radius: var(--r-sm); } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } svg { flex: none; } a { color: var(--link); text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: from-font; } a:hover { color: var(--link-hover); text-decoration: underline; } :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } hr { border: 0; border-top: var(--hair) solid var(--line); margin: var(--s8) 0; } ::selection { background: var(--accent-tint); color: var(--text); } /* Single-column grids must never be sized by their widest child. Without this, a 68ch prose block or a 34rem table forces its own container wider than the viewport on phones. Declared here, before the component rules, so multi-column variants further down still win. */ .k-stack, .k-stack-2, .k-stack-7, .k-grid, .k-form, .k-formcard, .k-aside, .k-related, .k-related__list, .k-toc ol, .k-faq, .k-faq__a, .k-hero__copy, .k-hero__inner, .k-cta__copy, .k-pagehead__inner, .k-section-head, .k-card, .k-step, .k-checks, .k-quote, .k-field, .k-note__body, .k-layout, .k-split, .k-prose ul, .k-prose ol, .k-steps, .k-stats, .k-linkgrid, .k-trustbar__inner { grid-template-columns: minmax(0, 1fr); } .k-layout > *, .k-split > *, .k-grid > *, .k-stack > *, .k-stack-7 > *, .k-aside > *, .k-card > *, .k-quote > *, .k-formcard > * { min-width: 0; } /* ------------------------------------------------------------------------- 6. LAYOUT PRIMITIVES ------------------------------------------------------------------------- */ .k-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .k-wrap--narrow { max-width: var(--wrap-narrow); } .k-wrap--wide { max-width: 1320px; } .k-section { padding-block: var(--band); } .k-section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); } .k-section--alt { background: var(--bg-alt); } .k-section--sunk { background: var(--bg-sunk); } .k-section--rule { border-top: var(--hair) solid var(--line); } .k-section--invert { background: var(--bg-invert); color: var(--text-invert); --text: var(--text-invert); --text-mid: var(--text-invert-mut); --text-mut: var(--text-invert-mut); --text-soft: rgba(255,255,255,.68); --line: var(--line-invert); --line-soft: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.34); --accent: var(--a-400); --accent-ink: var(--a-400); --accent-tint: rgba(255,255,255,.09); --ok: var(--a-300); --surface: rgba(255,255,255,.045); --surface-alt: rgba(255,255,255,.03); --link: #FFFFFF; --link-hover: var(--a-300); --brand: var(--a-400); } /* Grids */ .k-grid { display: grid; gap: var(--s6); } .k-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .k-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .k-grid--auto { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); } /* Content + aside (for long service pages with a sticky table of contents) */ .k-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0,1fr) 286px; align-items: start; } .k-layout--left { grid-template-columns: 268px minmax(0,1fr); } .k-aside { position: sticky; top: var(--s7); display: grid; gap: var(--s5); } /* Split media/text */ .k-split { display: grid; gap: clamp(2rem, 4.5vw, 4rem); grid-template-columns: repeat(2, minmax(0,1fr)); align-items: center; } .k-split--flip > :first-child { order: 2; } .k-stack { display: grid; gap: var(--s5); } .k-stack-2 { display: grid; gap: var(--s2); } .k-stack-7 { display: grid; gap: var(--s7); } .k-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* ------------------------------------------------------------------------- 7. TYPOGRAPHY COMPONENTS ------------------------------------------------------------------------- */ .k-eyebrow { display: inline-flex; align-items: center; gap: .55em; font-size: var(--fs-2xs); font-weight: var(--fw-mid); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-ink); margin: 0; } .k-eyebrow::before { content: ""; width: 1.75rem; height: var(--hair); background: currentColor; opacity: .55; } .k-eyebrow--plain::before { display: none; } .k-hero-title { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-hero); margin: 0; text-wrap: balance; } .k-h1 { font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: var(--tr-head); margin:0; text-wrap: balance; } .k-h2 { font-size: var(--fs-2xl); line-height: var(--lh-head); letter-spacing: var(--tr-head); margin:0; text-wrap: balance; } .k-h3 { font-size: var(--fs-xl); line-height: 1.24; letter-spacing: var(--tr-lead); margin:0; text-wrap: balance; } .k-h4 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: var(--tr-lead); margin:0; } .k-h5 { font-size: var(--fs-md); line-height: 1.35; margin:0; } .k-lead { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: var(--tr-lead); color: var(--text-mid); margin: 0; max-width: min(60ch, 100%); } .k-sub { color: var(--text-mut); margin: 0; max-width: min(var(--measure), 100%); } .k-small{ font-size: var(--fs-sm); color: var(--text-mut); margin: 0; } .k-fine { font-size: var(--fs-xs); color: var(--text-soft); margin: 0; line-height: 1.55; } .k-section-head { display: grid; gap: var(--s4); margin-bottom: var(--s8); max-width: 72ch; } .k-section-head--center { justify-items: center; text-align: center; margin-inline: auto; } /* Top aligned, not bottom aligned. When the right hand column is taller than the heading, bottom alignment sinks the heading and leaves a void above it. */ .k-section-head--split { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); align-items: start; justify-content: space-between; max-width: none; } /* nudge the supporting column down to the heading, not the eyebrow */ .k-section-head--split > * + * { padding-top: .35rem; } @media (max-width: 860px) { .k-section-head--split > * + * { padding-top: 0; } } .k-num { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 8. PROSE styles whatever the WordPress editor outputs ------------------------------------------------------------------------- */ .k-prose { max-width: min(var(--measure), 100%); color: var(--text-mid); } .k-prose--wide { max-width: none; } .k-prose--center { margin-inline: auto; } /* centred column, no sidebar */ .k-prose :where(p) { margin: 0; line-height: var(--lh-loose); } .k-prose h2 { font-size: var(--fs-2xl); line-height: var(--lh-head); letter-spacing: var(--tr-head); color: var(--text); margin: var(--s10) 0 0; padding-top: var(--s6); border-top: var(--hair) solid var(--line); text-wrap: balance; } .k-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .k-prose h3 { font-size: var(--fs-xl); line-height: 1.26; letter-spacing: var(--tr-lead); color: var(--text); margin: var(--s8) 0 0; text-wrap: balance; } .k-prose h4 { font-size: var(--fs-lg); color: var(--text); margin: var(--s7) 0 0; letter-spacing: var(--tr-lead); } .k-prose h5 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--accent-ink); margin: var(--s7) 0 0; } .k-prose h2 + *, .k-prose h3 + *, .k-prose h4 + *, .k-prose h5 + * { margin-top: var(--s4); } /* Buttons are excluded. Without :not(.k-btn) these rules outrank .k-btn and any button dropped inside editor content renders as an underlined link in the link colour, which on a filled button means text the colour of its own background. */ .k-prose a:not(.k-btn) { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); } .k-prose a:not(.k-btn):hover { text-decoration-color: currentColor; } .k-prose :where(ul, ol) { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--s3); } .k-prose li { position: relative; padding-left: 1.6rem; line-height: var(--lh-body); } .k-prose ul > li::before { content: ""; position: absolute; left: .2rem; top: .68em; width: .4rem; height: .4rem; background: var(--accent); transform: rotate(45deg); } .k-prose ol { counter-reset: k-ol; } .k-prose ol > li { counter-increment: k-ol; } .k-prose ol > li::before { content: counter(k-ol); position: absolute; left: 0; top: 0; color: var(--accent-ink); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); line-height: var(--lh-body); } .k-prose li > ul, .k-prose li > ol { margin-top: var(--s3); } .k-prose blockquote { margin: var(--s7) 0; padding: 0 0 0 var(--s6); border-left: 2px solid var(--accent); color: var(--text); font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: var(--tr-lead); } .k-prose blockquote p + p { margin-top: var(--s4); } .k-prose figure { margin: var(--s8) 0; display: grid; gap: var(--s3); } .k-prose figcaption, .k-caption { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.55; } .k-prose img { border-radius: var(--r); border: var(--hair) solid var(--line); } .k-prose > * + * { margin-top: var(--s6); } .k-prose code, code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .875em; background: var(--bg-sunk); color: var(--text); padding: .12em .38em; border-radius: var(--r-sm); } /* Anchor targets sit clear of any sticky header the plugin injects */ .k-prose h2, .k-prose h3, [id] { scroll-margin-top: 6rem; } /* ------------------------------------------------------------------------- 9. BUTTONS ------------------------------------------------------------------------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font: inherit; font-weight: var(--fw-mid); font-size: var(--fs-sm); letter-spacing: .005em; line-height: 1; padding: .95rem 1.5rem; min-height: 3rem; border: var(--hair) solid transparent; border-radius: var(--r); cursor: pointer; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; } .k-btn:hover { text-decoration: none; transform: translateY(-1px); } .k-btn:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .k-btn { transition: none; } .k-btn:hover { transform: none; } } .k-btn--primary { background: var(--cta); color: var(--cta-text); border-color: var(--cta); } .k-btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-text); } .k-btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); border-color: var(--btn-dark-bg); } .k-btn--dark:hover { background: var(--btn-dark-bg-hover); border-color: var(--btn-dark-bg-hover); color: var(--btn-dark-ink); } .k-btn--outline { background: transparent; color: var(--text); border-color: var(--line-strong); } .k-btn--outline:hover { border-color: var(--text); color: var(--text); background: var(--surface-alt); } .k-btn--ghost { background: transparent; color: var(--link); padding-inline: .25rem; } .k-btn--ghost:hover { color: var(--link-hover); text-decoration: underline; } .k-btn--lg { font-size: var(--fs-base); padding: 1.125rem 1.9rem; min-height: 3.5rem; } .k-btn--sm { font-size: var(--fs-xs); padding: .6rem 1rem; min-height: 2.4rem; } .k-btn--block { width: 100%; } .k-btn svg { width: 1.15em; height: 1.15em; } /* Phone button the single most-clicked element on an AU trade site */ .k-btn--call { letter-spacing: .01em; } .k-btn--call .k-btn__num { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------- 10. HERO ------------------------------------------------------------------------- */ .k-hero { position: relative; background: var(--bg-invert); color: var(--text-invert); overflow: hidden; --text: var(--text-invert); --text-mid: var(--text-invert-mut); --text-mut: var(--text-invert-mut); --text-soft: rgba(255,255,255,.68); --line: var(--line-invert); --line-strong: rgba(255,255,255,.34); --accent: var(--a-400); --accent-ink: var(--a-400); --accent-tint: rgba(255,255,255,.09); --ok: var(--a-300); } .k-hero > .k-wrap { position: relative; z-index: 1; } .k-hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; padding-block: clamp(3.5rem, 7vw, 6.5rem); } .k-hero--simple .k-hero__inner { grid-template-columns: minmax(0,1fr); max-width: 46rem; } .k-hero--compact .k-hero__inner { padding-block: clamp(2.75rem, 5vw, 4.25rem); } .k-hero__copy { display: grid; gap: var(--s5); align-content: start; } .k-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); } .k-hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; border: var(--hair) solid rgba(255,255,255,.14); box-shadow: var(--shadow-3); aspect-ratio: 4 / 3; background: var(--bg-invert-alt); } .k-hero__media img { width: 100%; height: 100%; object-fit: cover; } .k-hero__media .k-ph { background: rgba(255,255,255,.04); color: rgba(255,255,255,.5); } /* Ticks under the hero headline */ .k-ticks { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); list-style: none; margin: 0; padding: 0; } .k-ticks li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--text-mid); } .k-ticks svg { width: 1.05rem; height: 1.05rem; color: var(--a-400); } /* Compact page hero for the ~150 inner pages */ .k-pagehead { background: var(--bg-alt); border-bottom: var(--hair) solid var(--line); padding-block: clamp(2.25rem, 4.5vw, 3.75rem); } .k-pagehead__inner { display: grid; gap: var(--s5); max-width: 60rem; } /* ------------------------------------------------------------------------- 11. BREADCRUMBS (matters when you have 160 pages) ------------------------------------------------------------------------- */ .k-crumbs { padding-block: var(--s4); border-bottom: var(--hair) solid var(--line-soft); } .k-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-soft); } .k-crumbs li { display: flex; align-items: center; gap: .5rem; } .k-crumbs li + li::before { content: ""; width: 1px; height: .72em; background: var(--line-strong); transform: rotate(16deg); flex: none; } .k-crumbs a { color: var(--text-mut); } .k-crumbs a:hover { color: var(--link); } .k-crumbs [aria-current] { color: var(--text); } /* ------------------------------------------------------------------------- 12. TRUST BAR / BADGES / PILLS ------------------------------------------------------------------------- */ .k-trustbar { border-block: var(--hair) solid var(--line); background: var(--surface); } .k-trustbar__inner { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; } /* fewer than four claims, so the row does not leave a gap on the right */ .k-trustbar__inner--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-trustbar__inner--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .k-trustbar__item { display: flex; align-items: center; gap: var(--s4); padding: var(--s6) var(--s5); border-left: var(--hair) solid var(--line); } .k-trustbar__item:first-child { border-left: 0; padding-left: 0; } .k-trustbar__item:last-child { padding-right: 0; } .k-trustbar__item svg { width: 1.5rem; height: 1.5rem; color: var(--accent); } .k-trustbar__t { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-mid); } .k-trustbar__d { font-size: var(--fs-xs); color: var(--text-soft); } .k-pill { display: inline-flex; align-items: center; gap: .45em; font-size: var(--fs-2xs); letter-spacing: .05em; text-transform: uppercase; font-weight: var(--fw-mid); padding: .38em .7em; border-radius: var(--r-sm); background: var(--brand-tint); color: var(--brand-deep); border: var(--hair) solid transparent; } .k-pill--accent { background: var(--accent-tint); color: var(--accent-ink); } .k-pill--ok { background: var(--ok-tint); color: var(--ok); } .k-pill--warn { background: var(--warn-tint); color: var(--warn); } .k-pill--crit { background: var(--crit-tint); color: var(--crit); } .k-pill--line { background: transparent; border-color: var(--line-strong); color: var(--text-mut); } /* ------------------------------------------------------------------------- 13. CARDS ------------------------------------------------------------------------- */ .k-card { position: relative; display: grid; gap: var(--s4); align-content: start; padding: var(--s6); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .k-card--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .k-card { transition: none; } .k-card--link:hover { transform: none; } } .k-card__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r); background: var(--brand-tint); color: var(--brand-deep); } .k-card__icon svg { width: 1.375rem; height: 1.375rem; } .k-card__t { font-size: var(--fs-lg); letter-spacing: var(--tr-lead); color: var(--text); margin: 0; } .k-card__d { font-size: var(--fs-base); color: var(--text-mut); margin: 0; line-height: var(--lh-body); } .k-card__more { margin-top: auto; padding-top: var(--s2); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--link); display: inline-flex; align-items: center; gap: .45em; font-weight: var(--fw-mid); } .k-card--link:hover .k-card__more { gap: .75em; } .k-card__more svg { width: .85em; height: .85em; } /* Whole card clickable without nesting interactive elements */ .k-card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* Flat variant hairline separated, no box. Good for dense fault lists. */ .k-card--flat { background: transparent; border: 0; border-top: var(--hair) solid var(--line); border-radius: 0; padding: var(--s6) 0; } .k-card--flat:hover { box-shadow: none; transform: none; } /* Accent-top variant for featured services */ .k-card--feature { border-top: 2px solid var(--accent); } /* ------------------------------------------------------------------------- 14. NUMBERED PROCESS (only where order genuinely matters) ------------------------------------------------------------------------- */ .k-steps { display: grid; gap: 0; counter-reset: k-step; grid-template-columns: repeat(4, minmax(0,1fr)); } .k-step { counter-increment: k-step; padding: var(--s7) var(--s6) var(--s7) 0; border-top: 2px solid var(--line); display: grid; gap: var(--s3); align-content: start; } .k-step:first-child { border-top-color: var(--accent); } /* variable step counts. Higher specificity than the responsive rules below, because auto-fit already handles every width on its own. */ .k-steps.k-steps--auto { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); column-gap: var(--s7); } .k-step::before { content: counter(k-step, decimal-leading-zero); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--accent-ink); font-weight: var(--fw-mid); } .k-step__t { font-size: var(--fs-lg); color: var(--text); letter-spacing: var(--tr-lead); margin: 0; } .k-step__d { font-size: var(--fs-base); color: var(--text-mut); margin: 0; } /* ------------------------------------------------------------------------- 14b. TIMELINE. A sequence that runs down the page rather than across it. Use where the item count does not divide into the grid, and where the steps are genuinely consecutive in time. ------------------------------------------------------------------------- */ .k-timeline { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: k-tl; } .k-timeline__item { counter-increment: k-tl; display: grid; align-items: start; grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); gap: var(--s4) var(--s6); padding: var(--s7) 0; border-top: var(--hair) solid var(--line); } .k-timeline__item:first-child { border-top: 2px solid var(--accent); } .k-timeline__item:last-child { border-bottom: var(--hair) solid var(--line); } .k-timeline__item::before { content: counter(k-tl, decimal-leading-zero); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--accent-ink); font-weight: var(--fw-mid); padding-top: .18em; } .k-timeline__t { font-size: var(--fs-lg); line-height: 1.3; margin: 0; letter-spacing: var(--tr-lead); color: var(--text); } .k-timeline__d { font-size: var(--fs-base); color: var(--text-mut); margin: 0; line-height: var(--lh-body); max-width: 62ch; } @media (max-width: 860px) { .k-timeline__item { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s3) var(--s5); } .k-timeline__d { grid-column: 2; } } /* ------------------------------------------------------------------------- 15. CHECKLIST / INCLUSIONS ------------------------------------------------------------------------- */ .k-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); } .k-checks--2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4) var(--s7); } .k-checks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--s3); align-items: start; font-size: var(--fs-base); color: var(--text-mid); } .k-checks svg { width: 1.35rem; height: 1.35rem; color: var(--ok); margin-top: .1rem; } .k-checks strong, .k-checks b { color: var(--text); } /* Cross list for "what's not included" */ .k-checks--x svg { color: var(--text-soft); } /* topical lists, not confirmations, so the icon takes the accent rather than the positive colour. */ .k-checks--brand svg { color: var(--accent-ink); } /* ------------------------------------------------------------------------- 16. STATS ------------------------------------------------------------------------- */ .k-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: var(--hair) solid var(--line); } .k-stat { padding: var(--s7) var(--s5) var(--s7) 0; border-left: var(--hair) solid var(--line); padding-left: var(--s6); display: grid; gap: var(--s2); } .k-stat:first-child { border-left: 0; padding-left: 0; } .k-stat__n { font-size: var(--fs-2xl); letter-spacing: -.02em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .k-stat__l { font-size: var(--fs-xs); color: var(--text-mut); line-height: 1.45; } /* ------------------------------------------------------------------------- 17. TABLES (comparison, pricing, error codes) ------------------------------------------------------------------------- */ .k-tablewrap { overflow-x: auto; border: var(--hair) solid var(--line); border-radius: var(--r); background: var(--surface); } .k-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 34rem; } .k-table th, .k-table td { text-align: left; padding: var(--s4) var(--s5); border-bottom: var(--hair) solid var(--line); vertical-align: top; line-height: var(--lh-snug); } .k-table thead th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-mut); background: var(--bg-alt); border-bottom: var(--hair) solid var(--line-strong); white-space: nowrap; } .k-table tbody tr:last-child td { border-bottom: 0; } .k-table tbody tr:hover td { background: var(--surface-alt); } .k-table td:first-child { color: var(--text); } .k-table .k-num, .k-table td[data-num] { font-variant-numeric: tabular-nums; white-space: nowrap; } .k-table--zebra tbody tr:nth-child(even) td { background: var(--bg-alt); } /* Prose tables inherit the same look automatically */ .k-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); border: var(--hair) solid var(--line); border-radius: var(--r); } .k-prose th, .k-prose td { text-align: left; padding: var(--s4); border-bottom: var(--hair) solid var(--line); } .k-prose thead th { background: var(--bg-alt); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em; color: var(--text-mut); } /* ------------------------------------------------------------------------- 18. FAQ (native
no JS, and Google reads it) ------------------------------------------------------------------------- */ .k-faq { display: grid; border-top: var(--hair) solid var(--line); } .k-faq__item { border-bottom: var(--hair) solid var(--line); } .k-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); padding: var(--s6) 0; cursor: pointer; list-style: none; font-size: var(--fs-md); letter-spacing: var(--tr-lead); color: var(--text); line-height: var(--lh-snug); } .k-faq__q::-webkit-details-marker { display: none; } .k-faq__q:hover { color: var(--link); } .k-faq__sign { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .22rem; position: relative; color: var(--accent); } .k-faq__sign::before, .k-faq__sign::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; } .k-faq__sign::before { width: 100%; height: var(--hair); } .k-faq__sign::after { width: var(--hair); height: 100%; transition: transform .2s ease; } .k-faq__item[open] .k-faq__sign::after { transform: scaleY(0); } @media (prefers-reduced-motion: reduce) { .k-faq__sign::after { transition: none; } } .k-faq__a { padding: 0 3rem var(--s6) 0; color: var(--text-mut); font-size: var(--fs-base); line-height: var(--lh-loose); max-width: min(68ch, 100%); } .k-faq__a > * + * { margin-top: var(--s4); } .k-faq__a p { margin: 0; } /* ------------------------------------------------------------------------- 19. TESTIMONIALS ------------------------------------------------------------------------- */ .k-quote { display: grid; gap: var(--s5); align-content: start; padding: var(--s7) var(--s6); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r); } .k-stars { display: flex; gap: .18rem; color: var(--star); } .k-stars svg { width: 1rem; height: 1rem; } .k-quote__t { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: var(--tr-lead); color: var(--text); margin: 0; } .k-quote__by { display: grid; gap: .15rem; font-size: var(--fs-xs); color: var(--text-soft); padding-top: var(--s4); border-top: var(--hair) solid var(--line); } .k-quote__by b, .k-quote__by strong { color: var(--text); font-size: var(--fs-sm); } /* ------------------------------------------------------------------------- 20. CTA BANDS ------------------------------------------------------------------------- */ .k-cta { position: relative; overflow: hidden; background: var(--bg-invert); color: var(--text-invert); --text: var(--text-invert); --text-mid: var(--text-invert-mut); --text-mut: var(--text-invert-mut); --text-soft: rgba(255,255,255,.68); --line: var(--line-invert); --line-strong: rgba(255,255,255,.34); --accent: var(--a-400); --accent-ink: var(--a-400); --accent-tint: rgba(255,255,255,.09); --ok: var(--a-300); } .k-cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s7); padding-block: clamp(2.75rem, 5vw, 4.25rem); } .k-cta__copy { display: grid; gap: var(--s3); max-width: 44rem; } .k-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); } /* Inline mid-article CTA */ .k-inlinecta { display: grid; gap: var(--s4); padding: var(--s6); border-radius: var(--r); background: var(--bg-alt); border: var(--hair) solid var(--line); border-left: 2px solid var(--accent); } /* ------------------------------------------------------------------------- 21. NOTICES ------------------------------------------------------------------------- */ .k-note { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s4); padding: var(--s5) var(--s6); border-radius: var(--r); background: var(--bg-alt); border: var(--hair) solid var(--line); font-size: var(--fs-base); color: var(--text-mid); line-height: var(--lh-body); } .k-note > svg { width: 1.4rem; height: 1.4rem; color: var(--accent); margin-top: .08rem; } .k-note__body > * + * { margin-top: var(--s4); } .k-note__body p { margin: 0; } .k-note--warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .k-note--warn > svg { color: var(--warn); } .k-note--crit { background: var(--crit-tint); border-color: color-mix(in srgb, var(--crit) 28%, transparent); } .k-note--crit > svg { color: var(--crit); } .k-note--ok { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 28%, transparent); } .k-note--ok > svg { color: var(--ok); } /* ------------------------------------------------------------------------- 22. LINK GRIDS suburbs, models, related pages. The workhorse for internal linking across 160 pages. ------------------------------------------------------------------------- */ .k-linkgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-top: var(--hair) solid var(--line); } .k-linkgrid li { border-bottom: var(--hair) solid var(--line); } .k-linkgrid a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5) var(--s4) 0; font-size: var(--fs-sm); color: var(--text-mid); } .k-linkgrid a:hover { color: var(--link); text-decoration: none; } .k-linkgrid a::after { content: ""; flex: none; width: .42rem; height: .42rem; border-right: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); } .k-linkgrid a:hover::after { border-color: var(--link); } .k-related { display: grid; gap: var(--s5); } .k-related__list { list-style: none; margin: 0; padding: 0; display: grid; } .k-related__list li { border-top: var(--hair) solid var(--line); } .k-related__list li:last-child { border-bottom: var(--hair) solid var(--line); } .k-related__list a { display: grid; gap: .2rem; padding: var(--s4) 0; } .k-related__list a:hover { text-decoration: none; } .k-related__t { font-size: var(--fs-sm); color: var(--text); } .k-related__list a:hover .k-related__t { color: var(--link); } .k-related__d { font-size: var(--fs-xs); color: var(--text-soft); } /* ------------------------------------------------------------------------- 23. TABLE OF CONTENTS (sticky aside on long pages) ------------------------------------------------------------------------- */ .k-toc { border: var(--hair) solid var(--line); border-radius: var(--r); padding: var(--s5); background: var(--surface); max-height: calc(100vh - 5rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .k-toc::-webkit-scrollbar { width: 6px; } .k-toc::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .k-toc__h { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--text-soft); margin: 0 0 var(--s4); font-weight: var(--fw-mid); } .k-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); counter-reset: k-toc; } .k-toc li { counter-increment: k-toc; } .k-toc a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem; padding: .42rem 0; font-size: var(--fs-sm); color: var(--text-mut); line-height: 1.4; border-left: 2px solid transparent; } .k-toc a::before { content: counter(k-toc, decimal-leading-zero); font-size: var(--fs-2xs); color: var(--text-soft); font-variant-numeric: tabular-nums; padding-top: .18em; } .k-toc a:hover { color: var(--link); text-decoration: none; } .k-toc a[aria-current="true"] { color: var(--text); } /* ------------------------------------------------------------------------- 24. FORMS ------------------------------------------------------------------------- */ .k-form { display: grid; gap: var(--s5); } .k-form__row { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0,1fr)); } .k-field { display: grid; gap: var(--s2); } .k-label { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-mut); font-weight: var(--fw-mid); } .k-input, .k-select, .k-textarea { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--bg); border: var(--hair) solid var(--line-strong); border-radius: var(--r); padding: .85rem 1rem; width: 100%; min-height: 3rem; transition: border-color .15s ease, box-shadow .15s ease; } .k-textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); } .k-input::placeholder, .k-textarea::placeholder { color: var(--text-soft); } .k-input:focus, .k-select:focus, .k-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; } .k-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .k-help { font-size: var(--fs-xs); color: var(--text-soft); } .k-formcard { padding: var(--s7); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); display: grid; gap: var(--s6); } /* ------------------------------------------------------------------------- 25. ARTICLE META / AUTHOR ------------------------------------------------------------------------- */ .k-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: var(--fs-xs); color: var(--text-soft); } .k-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); } .k-author { display: flex; align-items: center; gap: var(--s4); padding: var(--s6); border: var(--hair) solid var(--line); border-radius: var(--r); background: var(--bg-alt); } .k-author__av { width: 3rem; height: 3rem; border-radius: 50%; flex: none; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-mid); letter-spacing: .04em; } /* ------------------------------------------------------------------------- 26. STICKY MOBILE CALL BAR Inject the markup through the footer plugin; CSS lives here. ------------------------------------------------------------------------- */ .k-callbar { display: none; } @media (max-width: 767px) { .k-callbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-top: var(--hair) solid var(--line); } body.has-callbar { padding-bottom: 4.75rem; } } /* ------------------------------------------------------------------------- 27. UTILITIES ------------------------------------------------------------------------- */ .k-hide { display: none !important; } .k-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .k-center { text-align: center; } .k-mt-0 { margin-top: 0 !important; } .k-measure { max-width: min(var(--measure), 100%); } .k-divider { border-top: var(--hair) solid var(--line); } .k-ratio-16-9 { aspect-ratio: 16/9; } .k-ratio-16-10 { aspect-ratio: 16/10; } .k-ratio-4-3 { aspect-ratio: 4/3; } .k-media { border-radius: var(--r); overflow: hidden; border: var(--hair) solid var(--line); background: var(--bg-sunk); } .k-media--sticky { position: sticky; top: var(--s7); } /* the frame owns the border, so the image inside must not draw its own, which it otherwise would inside k-prose */ .k-media img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; } /* Placeholder blocks for pages awaiting photography */ .k-ph { display: grid; place-items: center; background: repeating-linear-gradient(180deg, var(--bg-sunk) 0 1px, var(--bg-alt) 1px 13px); color: var(--text-soft); font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase; } /* ------------------------------------------------------------------------- 28. RESPONSIVE ------------------------------------------------------------------------- */ @media (max-width: 1040px) { .k-layout, .k-layout--left { grid-template-columns: minmax(0,1fr); } .k-aside { position: static; } .k-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-linkgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } .k-trustbar__inner { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-trustbar__item { padding-inline: var(--s5); border-left: var(--hair) solid var(--line); } .k-trustbar__item:nth-child(odd) { border-left: 0; padding-left: 0; } .k-trustbar__item:nth-child(n+3) { border-top: var(--hair) solid var(--line); } } @media (max-width: 860px) { .k-hero__inner { grid-template-columns: minmax(0,1fr); } .k-hero__media { aspect-ratio: 16/10; } .k-split { grid-template-columns: minmax(0,1fr); } .k-split--flip > :first-child { order: 0; } .k-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-stat { border-left: 0; padding-left: 0; border-top: var(--hair) solid var(--line); } .k-stat:nth-child(-n+2) { border-top: 0; } .k-stat:nth-child(even) { padding-left: var(--s6); border-left: var(--hair) solid var(--line); } .k-linkgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } .k-checks--2 { grid-template-columns: minmax(0,1fr); } .k-cta__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 620px) { .k-grid--2, .k-grid--3, .k-grid--4 { grid-template-columns: minmax(0,1fr); } .k-steps { grid-template-columns: minmax(0,1fr); } .k-step { padding-block: var(--s6); } .k-linkgrid { grid-template-columns: minmax(0,1fr); } .k-trustbar__inner { grid-template-columns: minmax(0,1fr); } .k-trustbar__item { border-left: 0 !important; padding-left: 0 !important; border-top: var(--hair) solid var(--line); padding-block: var(--s5); } .k-trustbar__item:first-child { border-top: 0; } .k-form__row { grid-template-columns: minmax(0,1fr); } .k-stats { grid-template-columns: minmax(0,1fr); } .k-stat, .k-stat:nth-child(even) { border-left: 0; padding-left: 0; border-top: var(--hair) solid var(--line); } .k-stat:first-child { border-top: 0; } .k-btn { width: 100%; } .k-hero__actions .k-btn, .k-cta__actions .k-btn { width: 100%; } .k-faq__a { padding-right: 0; } .k-formcard { padding: var(--s6) var(--s5); } } /* ------------------------------------------------------------------------- 29. PRINT ------------------------------------------------------------------------- */ @media print { .k-hero, .k-cta, .k-section--invert { background: #fff !important; color: #000 !important; } .k-callbar, .k-aside, .k-btn { display: none !important; } .k-faq__item { break-inside: avoid; } a[href^="http"]::after { content: " " attr(href); font-size: 10px; color: #555; } }