/* =========================================================================== base.css — the shared scaffolding AND component layer for both public brand websites. One stylesheet, loaded by `marketing/shared/_document.html.erb` before the brand's token file. OWNERSHIP CONTRACT (read before adding a second stylesheet) 1. NO COLOUR IS DEFINED HERE. Every colour is a `var(--token)` and every token is defined in exactly one place: `tokens-stl.css` or `tokens-repairit.css`. There is no hex literal, no `rgb()`/`rgba()` and no named colour in this file, and there is no `.brand-stl` / `.brand-repairit` selector anywhere in it. Brand difference is carried entirely by which token file the document loads. That is what makes a brand change a one-file change, and a spec fails the build on a literal. 2. WHY THE COMPONENT LAYER IS IN THIS FILE and not in `components.css`: `_document.html.erb` links `base.css` plus the brand token file and nothing else. Splitting the components out means editing that template and adding a second blocking request, so package 1 keeps one stylesheet. If the split is wanted later it is mechanical: cut everything below "COMPONENT LAYER" into `components.css`, load it after this file, and the token contract carries over unchanged. 3. ACCESSIBILITY FLOOR, enforced here so no page can undo it: * every interactive element is at least 44 x 44 CSS px, with at least 8 px between adjacent targets; the sticky bar's buttons are 48 px; * a visible focus ring, 3 px with a 2 px offset, on every focusable element, using the brand's focus token; * `prefers-reduced-motion` zeroes every animation and transition; * reserves the sticky bar's height as padding AND as scroll-padding, so the bar can never cover a focused form field; * body copy is 16 px (17 px on small screens) at 1.5 line-height, with a 60-75 character measure. 14 px is the floor for UI text; 12 px is used for the legal line only, and for nothing else in the file; * an error is signalled by a border, a heading and text — never by colour alone; * the two brand-coloured tokens that are only contrast-safe at large sizes (`--display-color`, `--heading-color`) are applied to exactly two elements, both of which this file holds at >= 22 px / weight 800. 4. NO THIRD-PARTY REQUEST. The one font is self-hosted from this app's own public/ tree. There is no `@import`, no `fonts.googleapis.com`, no CDN and no `url()` pointing off-origin. The `@font-face` below degrades to the system stack if the file has not been added yet. --------------------------------------------------------------------------- CLASS VOCABULARY — what a section partial should write `mk-` + BEM. A partial writes classes; it never writes a colour, a size or a breakpoint. Blocks below are grouped by the partial that owns the markup. _document / layout mk-body mk-body--message mk-main mk-skip mk-container mk-section mk-section--tint mk-section--panel mk-section--flush mk-section__head mk-section__heading mk-section__lead mk-panel mk-stack mk-stack--tight mk-stack--loose mk-grid mk-grid--three mk-measure mk-eyebrow mk-lead mk-note mk-chip mk-divider mk-phone mk-actions mk-sr-only buttons mk-btn mk-btn--primary mk-btn--ghost mk-btn--on-panel mk-btn--lg mk-btn--block _header mk-header mk-header__inner mk-header__brand mk-header__logo mk-header__name mk-header__actions mk-nav mk-nav__list mk-nav__link _breadcrumb mk-crumbs mk-crumbs__list mk-crumbs__item _hero mk-hero mk-hero--split mk-hero__inner mk-hero__title mk-hero__lead mk-hero__note mk-hero__media mk-hero__aside mk-hero__aside-heading mk-hero__aside-list (the eyebrow inside a hero is just `mk-eyebrow`) _proof_strip mk-proof mk-proof__list mk-proof__item mk-proof__value mk-proof__label mk-proof__meta _brand_middle mk-cards mk-cards--three mk-card mk-card__media mk-card__title mk-card__body mk-card__cue _process mk-process mk-process__list mk-process__step mk-process__marker mk-process__text _fact_list mk-facts mk-facts__list mk-facts__item _illustration mk-figure mk-figure__media mk-figure__caption mk-figure__label (the AI label is REQUIRED markup) _faq mk-faq mk-faq__list mk-faq__item mk-faq__q mk-faq__a (

also styled) _service_areas mk-areas mk-area mk-area__name mk-area__type mk-area__fact mk-area__cities mk-pills mk-pills__item mk-link-more (compact = the pill list plus the link out; the card grid is the DETAILED block only, where each card carries a qualifier, a fact and a city list) _payments mk-money mk-money__item mk-money__heading mk-money__note _cta_band mk-cta mk-cta__inner mk-cta__heading mk-cta__lead _footer mk-footer mk-footer__inner mk-footer__block mk-footer__name mk-footer__phone mk-footer__note mk-footer__heading mk-footer__areas mk-footer__list mk-footer__legal _mobile_bar mk-bar mk-bar__btn mk-bar__btn--call mk-bar__btn--request message surfaces mk-message mk-message__brand mk-message__heading mk-message__subheading mk-message__lead mk-message__note mk-message__links inquiry form mk-form mk-form__field mk-form__field--invalid mk-form__label mk-form__row mk-form__hint mk-form__actions mk-form__error mk-form__honeypot Two rules for whoever writes the partials: * a primary button inside `.mk-hero`, `.mk-cta`, `.mk-panel` or the footer needs no extra class — this file flips it to the panel action tokens; * page templates alternate `.mk-section` and `.mk-section--tint` down the page. Two untinted sections in a row still separate, because this file draws a hairline between adjacent sections. =========================================================================== */ /* --- Font ---------------------------------------------------------------- */ @font-face { font-family: 'Hanken Grotesk Variable'; src: url('/marketing/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2070-209F, U+20AC, U+2122, U+2212; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--bar-h) + 1rem); } body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } img, picture, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } /* --- Page --------------------------------------------------------------- */ .mk-body { --bar-h: 3.5rem; --measure: 68ch; --gutter: 1rem; /* One spacing scale for both brands. Brand distinction is carried by colour, surface temperature, geometry and rule treatment — not by rhythm, so the two sites stay one codebase. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --section-y: 3rem; --card-pad: 1.25rem; --head-gap: 1.75rem; margin: 0; background: var(--page-bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; font-synthesis-weight: none; text-rendering: optimizeLegibility; /* The sticky bar is fixed; this keeps it from covering the end of the page. */ padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 48rem) { .mk-body { --bar-h: 0rem; --gutter: 2rem; --section-y: 4.5rem; --card-pad: 1.5rem; --head-gap: 2.25rem; padding-bottom: 0; } html { scroll-padding-bottom: 0; /* The header is sticky from this width up, so anchored content must clear it (WCAG 2.4.11). */ scroll-padding-top: 5.5rem; } } @media (min-width: 64rem) { .mk-body { --section-y: 5rem; } } @media (max-width: 30rem) { .mk-body { font-size: 1.0625rem; } /* 17px */ } .mk-main { display: block; } .mk-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1rem; background: var(--action-bg); color: var(--action-fg); font-weight: 700; text-decoration: none; } .mk-skip:focus { left: 0; } /* --- Type --------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; } /* Fluid between the two sizes the design contract names — 28 px on a phone, 40 px on a desktop — so there is no jump at the breakpoint. */ h1 { font-size: clamp(1.75rem, 1.05rem + 3vw, 2.5rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } h2 { font-size: clamp(1.375rem, 0.95rem + 1.6vw, 1.75rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } h3 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 700; letter-spacing: 0; } p { max-width: var(--measure); } a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; } a:hover { color: var(--link-hover); } strong, b { font-weight: 700; } /* Uppercase, tracked label with a short brand-coloured leading bar. The bar is the accent; the text uses the strong rule colour, which is AA at label size on both brands (the display colour is not, on one of them). */ .mk-eyebrow { display: flex; align-items: center; gap: 0.625rem; max-width: none; color: var(--rule-strong); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: var(--display-case); } .mk-eyebrow::before { content: ""; flex: 0 0 auto; width: 1.75rem; height: var(--accent-bar-w); border-radius: var(--accent-bar-radius); background: var(--accent-bar); } .mk-lead { font-size: 1.125rem; max-width: var(--measure); text-wrap: pretty; } .mk-note { font-size: 0.9375rem; color: var(--ink-soft); } /* Every phone number on both sites. Tabular figures stop the digits from shifting between weights and sizes. */ .mk-phone { font-variant-numeric: tabular-nums; } .mk-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Layout ------------------------------------------------------------- */ .mk-container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); } /* For a page that is ONE COLUMN and nothing else — today, the inquiry form. A marketing page carries a 72rem measure because its full-bleed tinted bands carry the width; /request-service is flat white, so the same container left the form pinned to the left edge of a desktop viewport with ~45% blank beside it and nothing to justify the space, on the conversion page of the whole package. `.mk-form` is capped at 40rem and `p` at 68ch anyway, so narrowing the container costs the content nothing and only centres it. The receipt and the branded 404 do NOT need this: `.mk-message` sets its own 46rem below, which wins on source order, and `margin-inline: auto` above already centres them. */ .mk-container--narrow { max-width: 48rem; } .mk-section { padding-block: var(--section-y); } /* Adjacent plain sections still read as separate blocks. A tinted or dark neighbour provides its own edge, so the hairline is dropped there. */ .mk-section + .mk-section { border-top: 1px solid var(--rule-soft); } .mk-section--tint + .mk-section, .mk-section + .mk-section--tint, .mk-section--panel + .mk-section, .mk-section + .mk-section--panel { border-top: 0; } .mk-section--tint { background: var(--surface); } .mk-section--flush { padding-block: 0; } .mk-section__head { max-width: 46rem; margin-bottom: var(--head-gap); } .mk-section__head > .mk-eyebrow + .mk-section__heading { margin-top: 0.625rem; } /* The only element in the file that carries --heading-color, which on one brand is a large-text-only red. h2 is >= 22 px at weight 800 everywhere, which is WCAG "large text", and the ratio is on the token file's allow-list. */ .mk-section__heading { color: var(--heading-color); } /* Without an eyebrow the heading carries the accent bar itself. */ .mk-section__heading::before { content: ""; display: block; width: 2.5rem; height: var(--accent-bar-w); margin-bottom: 0.875rem; border-radius: var(--accent-bar-radius); background: var(--accent-bar); } .mk-eyebrow + .mk-section__heading::before { display: none; } .mk-section__lead { margin-top: 0.75rem; font-size: 1.125rem; color: var(--ink-soft); text-wrap: pretty; } .mk-panel, .mk-section--panel { background: var(--panel-bg); color: var(--panel-fg); } .mk-panel a, .mk-section--panel a { color: var(--panel-fg); } .mk-panel .mk-section__heading, .mk-section--panel .mk-section__heading { color: var(--panel-fg); } .mk-panel .mk-section__lead, .mk-section--panel .mk-section__lead { color: var(--panel-fg-soft); } .mk-panel .mk-eyebrow, .mk-section--panel .mk-eyebrow, .mk-hero .mk-eyebrow, .mk-cta .mk-eyebrow, .mk-footer .mk-eyebrow { color: var(--panel-eyebrow); } .mk-panel .mk-eyebrow::before, .mk-section--panel .mk-eyebrow::before, .mk-hero .mk-eyebrow::before, .mk-cta .mk-eyebrow::before, .mk-footer .mk-eyebrow::before { background: var(--panel-rule); } .mk-stack > * + * { margin-top: 1rem; } .mk-stack--tight > * + * { margin-top: 0.5rem; } .mk-stack--loose > * + * { margin-top: 2rem; } .mk-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 64rem) { .mk-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mk-measure { max-width: var(--measure); } .mk-divider { height: 1px; margin-block: var(--space-5); border: 0; background: var(--rule-soft); } .mk-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--chip-rule); border-radius: var(--chip-radius); font-size: 0.875rem; font-weight: 700; line-height: 1.35; } /* --- Buttons ------------------------------------------------------------ */ .mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; /* >= 8px between adjacent targets */ max-width: none; } .mk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; /* 44px */ min-width: 2.75rem; padding: 0.6875rem 1.25rem; border: 2px solid transparent; border-radius: var(--btn-radius); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; appearance: none; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .mk-btn--lg { min-height: 3.25rem; padding-inline: 1.625rem; font-size: 1.0625rem; } .mk-btn--block { width: 100%; } .mk-btn--primary { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); box-shadow: var(--btn-shadow); } .mk-btn--primary:hover { background: var(--action-bg-hover); border-color: var(--action-bg-hover); color: var(--action-fg); } .mk-btn--ghost { background: transparent; color: var(--link); border-color: var(--rule-strong); } .mk-btn--ghost:hover { color: var(--link-hover); border-color: var(--link-hover); background: var(--surface); } .mk-btn--on-panel { background: transparent; color: var(--panel-fg); border-color: var(--panel-rule); } .mk-btn:active { transform: translateY(1px); } /* On a phone the two paths stack, and a half-width button next to a ragged edge reads as an afterthought. Both go full width instead. */ @media (max-width: 30rem) { .mk-actions .mk-btn { flex: 1 1 100%; } } /* Any button on a dark surface, with no extra class in the markup. The primary fill inverts to the panel action tokens because the light-surface fill is too close to the panel itself to read as a control. */ .mk-hero .mk-btn--primary, .mk-cta .mk-btn--primary, .mk-panel .mk-btn--primary, .mk-section--panel .mk-btn--primary, .mk-footer .mk-btn--primary { background: var(--panel-action-bg); color: var(--panel-action-fg); border-color: var(--panel-action-border); } .mk-hero .mk-btn--primary:hover, .mk-cta .mk-btn--primary:hover, .mk-panel .mk-btn--primary:hover, .mk-section--panel .mk-btn--primary:hover, .mk-footer .mk-btn--primary:hover { background: var(--panel-action-bg-hover); color: var(--panel-action-fg-hover); border-color: var(--panel-action-border); } .mk-hero .mk-btn--ghost, .mk-cta .mk-btn--ghost, .mk-panel .mk-btn--ghost, .mk-section--panel .mk-btn--ghost, .mk-footer .mk-btn--ghost { background: transparent; color: var(--panel-fg); border-color: var(--panel-rule); } .mk-hero .mk-btn--ghost:hover, .mk-cta .mk-btn--ghost:hover, .mk-panel .mk-btn--ghost:hover, .mk-section--panel .mk-btn--ghost:hover, .mk-footer .mk-btn--ghost:hover { background: var(--panel-surface); color: var(--panel-fg); border-color: var(--panel-rule); } /* --- Focus -------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .mk-hero :focus-visible, .mk-cta :focus-visible, .mk-panel :focus-visible, .mk-section--panel :focus-visible, .mk-footer :focus-visible, .mk-bar :focus-visible { outline-color: var(--focus-ring-on-panel); } /* =========================================================================== COMPONENT LAYER Everything below styles the shared partials. Same token contract, same `mk-` prefix, no colour literal, no brand selector. =========================================================================== */ /* --- Header ------------------------------------------------------------- */ .mk-header { position: relative; z-index: 30; /* The brand's strong colour as a rule across the very top of every page: the first thing that differs between the two sites. */ border-top: 0.25rem solid var(--rule-strong); border-bottom: 1px solid var(--rule-soft); background: var(--page-bg); box-shadow: var(--header-shadow); } @media (min-width: 48rem) { /* Sticky only where the bottom bar is hidden, so a phone never carries two fixed bars at once. */ .mk-header { position: sticky; top: 0; } } .mk-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 0.625rem; } @media (min-width: 48rem) { .mk-header__inner { padding-block: 0.75rem; } } .mk-header__brand { display: inline-flex; align-items: center; /* A mark that does not carry a legible wordmark is set next to the brand name in type (see _header.html.erb); this is the space between them. */ gap: 0.625rem; min-height: 2.75rem; text-decoration: none; color: inherit; margin-right: auto; } .mk-header__logo { width: auto; max-width: 16.875rem; /* 270px — the STL logo is a small raster with no vector */ max-height: 3rem; } /* Display-weight brand name. Kept at or above 24 px because each brand's display colour is only contrast-safe at large sizes. */ .mk-header__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.1; color: var(--display-color); /* The FULL brand name renders here (owner direction 2026-09-26). The size floor stands — display colours are only contrast-safe large — so where the line is tight the name wraps to two balanced lines instead of shrinking. */ text-wrap: balance; } @media (max-width: 74.9375rem) { .mk-header__name { max-width: 13rem; } } .mk-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .mk-nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none; } .mk-nav__link:hover { color: var(--link); text-decoration: underline; } .mk-header__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } @media (max-width: 47.9375rem) { /* The sticky bar already carries Call and Request on small screens, so the header does not repeat them. */ .mk-header__actions { display: none; } .mk-nav__list { gap: 0 1rem; } .mk-nav__link { font-size: 0.9375rem; } } /* --- Breadcrumb --------------------------------------------------------- */ .mk-crumbs { background: var(--surface); border-bottom: 1px solid var(--rule-soft); font-size: 0.9375rem; } .mk-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; padding-block: 0.5rem; } .mk-crumbs__item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); } .mk-crumbs__item + .mk-crumbs__item::before { content: ""; width: 0.375rem; height: 0.375rem; border-top: 1.5px solid var(--rule); border-right: 1.5px solid var(--rule); transform: rotate(45deg); } .mk-crumbs__item a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; } .mk-crumbs__item [aria-current="page"] { color: var(--ink-soft); font-weight: 700; text-decoration: none; } /* --- Hero --------------------------------------------------------------- */ .mk-hero { position: relative; background: var(--panel-wash); color: var(--panel-fg); } /* The accent rule along the top edge of the panel: cyan on the navy, red on the charcoal. Decorative, so it carries no text. */ .mk-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--accent-bar-w); background: var(--panel-rule); } .mk-hero__inner { display: grid; gap: 2rem; padding-block: 2.75rem 3rem; } @media (min-width: 48rem) { .mk-hero__inner { padding-block: 4rem 4.25rem; } } @media (min-width: 64rem) { .mk-hero__inner { padding-block: 5rem 5.25rem; } .mk-hero--split .mk-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center; } } .mk-hero__title { max-width: 30ch; margin-top: 0.875rem; color: var(--panel-fg); } .mk-hero__lead { margin-top: 1.125rem; max-width: 48ch; color: var(--panel-fg-soft); font-size: 1.125rem; text-wrap: pretty; } @media (min-width: 48rem) { .mk-hero__lead { font-size: 1.1875rem; } } .mk-hero .mk-actions { margin-top: 1.75rem; } .mk-hero__note { margin-top: 1rem; max-width: 48ch; color: var(--panel-fg-soft); font-size: 0.9375rem; } .mk-hero__media { border-radius: var(--radius-lg); overflow: hidden; background: var(--panel-surface); } .mk-hero__media img { width: 100%; } /* The optional side card: "what to tell us when you call". */ .mk-hero__aside { padding: 1.25rem; background: var(--panel-surface); border: 1px solid var(--panel-surface-rule); border-left: var(--accent-bar-w) solid var(--panel-rule); border-radius: var(--radius-md); } @media (min-width: 48rem) { .mk-hero__aside { padding: 1.5rem; } } .mk-hero__aside-heading { color: var(--panel-eyebrow); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: var(--display-case); } .mk-hero__aside-list { margin-top: 0.875rem; display: grid; gap: 0.625rem; color: var(--panel-fg); font-size: 0.9375rem; } .mk-hero__aside-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: start; } .mk-hero__aside-list li::before { content: ""; width: 0.4375rem; height: 0.75rem; margin-top: 0.3125rem; border-right: 0.125rem solid var(--panel-rule); border-bottom: 0.125rem solid var(--panel-rule); transform: rotate(40deg); } /* --- Proof strip -------------------------------------------------------- */ .mk-proof { background: var(--surface-deep); padding-block: 1.5rem; } @media (min-width: 48rem) { .mk-proof { padding-block: 2rem; } } .mk-proof__list { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .mk-proof__list { /* Three, not four. The register decides how many entries a brand has — six on St. Louis Roof, five on Repair-It — and four columns left both of them with a ragged orphan row. Three gives the six-entry strip two even rows and gives every entry enough width for a value that runs to a line or two. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* Label / value / meta line up across the entries in a row however many lines each label takes. Browsers without subgrid fall back to the ordinary stacked item, which is the layout below 64rem anyway. */ grid-template-rows: auto auto auto; } .mk-proof__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 0.1875rem; } } .mk-proof__item { padding-left: 0.875rem; border-left: var(--accent-bar-w) solid var(--accent-bar); } .mk-proof__label { color: var(--ink-soft); font-size: 0.875rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: var(--display-case); } .mk-proof__value { margin-top: 0.1875rem; color: var(--ink); font-family: var(--font-display); font-size: 1.1875rem; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.25; } .mk-proof__meta { margin-top: 0.25rem; color: var(--ink-soft); font-size: 0.875rem; } /* --- Cards: service grid, symptom picker -------------------------------- */ .mk-cards { display: grid; gap: 0.875rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } @media (min-width: 64rem) { .mk-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mk-card { display: flex; flex-direction: column; gap: 0.375rem; min-height: 5.5rem; padding: var(--card-pad); background: var(--page-bg); color: var(--ink); border: var(--card-border-w) solid var(--rule-soft); border-radius: var(--radius-md); box-shadow: var(--card-shadow); text-decoration: none; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .mk-card::before { content: ""; width: 2.25rem; height: var(--accent-bar-w); margin-bottom: 0.5rem; border-radius: var(--accent-bar-radius); background: var(--accent-bar); } /* An approved real job photo across the top of a service card. The fixed aspect box keeps the three-card row level however the crops differ; the negative margins bleed it to the card edge over the padding. */ .mk-card--media { padding-top: 0; } .mk-card__media { display: block; width: calc(100% + 2 * var(--card-pad, 1.25rem)); margin: 0 calc(-1 * var(--card-pad, 1.25rem)) 0.9rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px 10px 0 0; } .mk-card__title { color: var(--ink); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.25; } .mk-card__body { color: var(--ink-soft); font-size: 0.9375rem; } .mk-card__cue { display: inline-flex; align-items: center; gap: 0.4375rem; margin-top: auto; padding-top: 0.625rem; color: var(--link); font-size: 0.9375rem; font-weight: 700; } .mk-card__cue::after { content: ""; width: 0.4375rem; height: 0.4375rem; border-top: 0.125rem solid currentColor; border-right: 0.125rem solid currentColor; transform: rotate(45deg); } a.mk-card:hover { border-color: var(--rule); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } a.mk-card:hover .mk-card__cue { text-decoration: underline; } /* --- Process ------------------------------------------------------------ */ .mk-process__list { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } } @media (min-width: 64rem) { /* However many steps the page file declares, they stay on ONE row: a fixed four-column track left the five-step service pages with a lone fifth step under an empty three-quarters of a row, which reads as a mistake rather than a step. auto-fit collapses the tracks a shorter list does not use, so a four-step list still spans the full width. */ .mk-process__list { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem; } } .mk-process__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: start; } @media (min-width: 64rem) { .mk-process__step { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; } /* A hairline joining the numbered markers across the row. */ .mk-process__step:not(:last-child)::after { content: ""; position: absolute; top: 1.1875rem; left: 3rem; right: -2rem; height: 1px; background: var(--rule); } } .mk-process__marker { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; background: var(--marker-bg); color: var(--marker-fg); border-radius: var(--marker-radius); font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--display-weight); font-variant-numeric: tabular-nums; } .mk-process__text { max-width: 34ch; font-size: 1rem; } .mk-process__text strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; } /* --- Fact list ---------------------------------------------------------- */ .mk-facts__list { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 2rem; } } .mk-facts__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; max-width: 40ch; } .mk-facts__item::before { content: ""; width: 0.5rem; height: 0.875rem; margin-top: 0.3125rem; border-right: 0.1875rem solid var(--marker-bg); border-bottom: 0.1875rem solid var(--marker-bg); transform: rotate(40deg); } /* --- Illustration ------------------------------------------------------- */ .mk-figure { max-width: 60rem; } .mk-figure__media { overflow: hidden; background: var(--surface-deep); border: 1px solid var(--rule-soft); border-radius: var(--radius-lg); } .mk-figure__media img { width: 100%; } .mk-figure__caption { margin-top: 0.875rem; color: var(--ink-soft); font-size: 0.9375rem; } /* The AI-provenance label. It is required markup next to any AI-transformed image, so it is styled to be read, not to be hidden. */ .mk-figure__label { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding: 0.25rem 0.625rem; background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--chip-rule); border-radius: var(--chip-radius); font-size: 0.875rem; font-weight: 700; } /* --- FAQ ---------------------------------------------------------------- */ .mk-faq__list { max-width: 52rem; border-top: 1px solid var(--rule-soft); } .mk-faq__item { padding-block: 1.125rem; border-bottom: 1px solid var(--rule-soft); } .mk-faq__q { color: var(--ink); font-size: 1.125rem; font-weight: 700; } .mk-faq__a { margin-top: 0.5rem; max-width: 62ch; color: var(--ink-soft); } /* Styled in case a partial uses

; the visible-text FAQ above needs none of it. */ .mk-faq__item > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 2.75rem; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; } .mk-faq__item > summary::-webkit-details-marker { display: none; } .mk-faq__item > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 0.125rem solid var(--rule-strong); border-bottom: 0.125rem solid var(--rule-strong); transform: rotate(45deg); transition: transform 0.16s ease; } .mk-faq__item[open] > summary::after { transform: rotate(225deg); } /* --- Service areas ------------------------------------------------------ */ .mk-areas { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .mk-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* The compact block — the areas named, with no municipality list and no permit fact, as it appears on a home page or at the foot of a service page — is NOT this card grid. Four bordered cards holding nothing but an area name read as four containers whose content failed to load, whatever the column count. Card chrome has to earn itself with something inside it, so the compact block is the pill list below and the card grid is the detailed block only. */ .mk-pills { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; margin: 0; padding: 0; list-style: none; } .mk-pills__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-soft); border-radius: var(--chip-radius); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; } /* The pill's own chip sits on the pill surface, so it takes the page background to stay distinguishable from it. */ .mk-pills__item .mk-area__type { background: var(--page-bg); font-size: 0.8125rem; font-weight: 600; } /* The exit from a compact block: the section asks "do you come to me?" and this is the link to the page that answers it. */ .mk-link-more { font-weight: 700; } .mk-link-more::after { content: " \2192"; /* Decorative, and it must not be read out as a word. */ speak: never; } /* Everything in this section is a direct child of .mk-container, and every margin is reset, so the gap between the block and the note under it is set here. This also closes the flush join between the detailed card grid and the statewide note on the service-area page. */ .mk-pills ~ .mk-note { margin-top: 1rem; } .mk-areas ~ .mk-note { margin-top: 1.25rem; } .mk-area { padding: var(--card-pad); background: var(--page-bg); border: var(--card-border-w) solid var(--rule-soft); border-top: var(--accent-bar-w) solid var(--accent-bar); border-radius: var(--radius-md); box-shadow: var(--card-shadow); } .mk-area__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; } .mk-area__type { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; background: var(--surface); color: var(--ink-soft); border: 1px solid var(--rule-soft); border-radius: var(--chip-radius); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .mk-area__fact { margin-top: 0.625rem; max-width: 48ch; color: var(--ink-soft); font-size: 0.9375rem; } .mk-area__cities { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--rule-soft); color: var(--ink-soft); font-size: 0.9375rem; columns: 2; column-gap: 1.5rem; } @media (min-width: 64rem) { .mk-area__cities { columns: 3; } } .mk-area__cities li { break-inside: avoid; padding-block: 0.0625rem; } /* --- Payments and financing row ---------------------------------------- */ .mk-money { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { /* How many blocks there are is a property of the BRAND RECORD: St. Louis Roof has payments and financing, Repair-It has payments only (Decision 14). A fixed two-column track left Repair-It with one card and a conspicuously empty half-row, so the tracks are sized rather than stretched — one card and two cards both read as deliberate. */ .mk-money { grid-template-columns: repeat(auto-fit, minmax(18rem, 28rem)); gap: 1.25rem; /* Sized tracks alone left Repair-It's single card hard against the left edge of a 72rem container with ~70% of the band empty — and because Repair-It has payments and no financing by design (Decision 14) that is its permanent state, in the last band before the footer. Centring the tracks makes one card read as deliberate; the two-column St. Louis Roof row is unchanged, because two 28rem tracks plus the gap already fill the measure. */ justify-content: center; } } .mk-money__item { display: flex; flex-direction: column; align-items: flex-start; padding: var(--card-pad); background: var(--surface); border: var(--card-border-w) solid var(--rule-soft); border-left: var(--accent-bar-w) solid var(--accent-bar); border-radius: var(--radius-md); } .mk-money__heading { color: var(--ink); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; } .mk-money__note { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.9375rem; } .mk-money__item .mk-btn { margin-top: 1rem; } /* --- CTA band ----------------------------------------------------------- */ .mk-cta { background: var(--panel-wash); color: var(--panel-fg); border-top: var(--accent-bar-w) solid var(--panel-rule); } .mk-cta__inner { display: grid; gap: 1.5rem; padding-block: 2.5rem; } @media (min-width: 64rem) { .mk-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; padding-block: 3rem; } } .mk-cta__heading { max-width: 30ch; color: var(--panel-fg); } .mk-cta__lead { margin-top: 0.625rem; max-width: 52ch; color: var(--panel-fg-soft); font-size: 1.0625rem; } /* --- Footer ------------------------------------------------------------- */ .mk-footer { padding-block: 2.5rem 1.5rem; background: var(--panel-bg); color: var(--panel-fg); border-top: var(--accent-bar-w) solid var(--panel-rule); } @media (min-width: 48rem) { .mk-footer { padding-block: 3rem 1.5rem; } } .mk-footer a { color: var(--panel-fg); } .mk-footer__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .mk-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 2.5rem; } } .mk-footer__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } .mk-footer__phone { margin-top: 0.375rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--display-weight); line-height: 1.2; } .mk-footer__phone a { text-decoration: none; } .mk-footer__phone a:hover { text-decoration: underline; } .mk-footer__heading { color: var(--panel-eyebrow); font-size: 0.9375rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: var(--display-case); } .mk-footer__note, .mk-footer__areas { margin-top: 0.625rem; color: var(--panel-fg-soft); font-size: 0.9375rem; } .mk-footer__areas { max-width: 34ch; } .mk-footer__list { margin-top: 0.25rem; } .mk-footer__list a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; } .mk-footer__legal { max-width: none; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--panel-surface-rule); color: var(--panel-fg-soft); font-size: 0.75rem; /* legal line only */ } /* The owner-approved trade-name fine print: 10px in the light grey the owner approved (--panel-fine-print, 2026-09-28), which is 4.77:1 on the STL navy panel, so it still meets WCAG AA at this size. */ .mk-footer__trade-name { max-width: none; margin-top: 0.5rem; color: var(--panel-fine-print); font-size: 10px; line-height: 1.4; } @media (min-width: 48rem) { .mk-footer__legal { margin-top: 2.5rem; } } /* --- Sticky call / request bar ----------------------------------------- */ .mk-bar { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; gap: 1px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--panel-rule); box-shadow: var(--bar-shadow); } .mk-bar__btn { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 3rem; /* 48px */ padding: 0.5rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; text-align: center; text-decoration: none; } .mk-bar__btn--call { background: var(--panel-bg); color: var(--panel-fg); } .mk-bar__btn--request { background: var(--action-bg); color: var(--action-fg); } /* On the narrowest phones the two labels have to survive together in one row: "Call (314) 244-3799" plus the request label at 320 CSS px. */ @media (max-width: 22.5rem) { .mk-bar__btn { font-size: 0.9375rem; padding-inline: 0.25rem; } } @media (min-width: 48rem) { .mk-bar { display: none; } } /* --- Message pages (404, skinned 4xx/5xx, receipt) --------------------- */ .mk-message { padding-block: 3rem 4rem; max-width: 46rem; } .mk-message__brand { color: var(--ink-soft); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: var(--display-case); } .mk-message__heading { margin-top: 0.75rem; color: var(--heading-color); } .mk-message__subheading { margin-top: 2.25rem; font-size: 1.125rem; } .mk-message__lead { margin-top: 1rem; font-size: 1.125rem; text-wrap: pretty; } .mk-message__note { margin-top: 1.25rem; color: var(--ink-soft); font-size: 0.9375rem; } .mk-message .mk-actions { margin-top: 1.75rem; } .mk-message__links { margin-top: 0.875rem; max-width: 34rem; border-top: 1px solid var(--rule-soft); } .mk-message__links li { padding-block: 0.5rem; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); } .mk-message__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-weight: 700; } /* The skinned error bodies and the receipt are single-column messages with no hero, so they get a little breathing room at the top. */ .mk-body--message .mk-message { padding-top: 2rem; } /* --- The canonical inquiry form ---------------------------------------- */ .mk-form { margin-top: 1.75rem; max-width: 40rem; } .mk-form__field { margin-top: 1.25rem; } .mk-form__label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 700; } .mk-form__field input, .mk-form__field textarea { width: 100%; min-height: 3rem; padding: 0.6875rem 0.75rem; background: var(--field-bg); color: var(--ink); border: 1px solid var(--field-border); border-radius: var(--radius-md); transition: border-color 0.16s ease, box-shadow 0.16s ease; } .mk-form__field textarea { min-height: 9rem; resize: vertical; } .mk-form__field input:focus, .mk-form__field textarea:focus { border-color: var(--field-border-focus); box-shadow: 0 0 0 3px var(--field-ring); } .mk-form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 34rem) { .mk-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mk-form__row .mk-form__field { margin-top: 0; } .mk-form__row + .mk-form__hint { margin-top: 0.5rem; } .mk-form__hint { margin-top: 0.375rem; color: var(--ink-soft); font-size: 0.875rem; } .mk-form__hint a { font-weight: 700; } .mk-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } @media (max-width: 34rem) { .mk-form__actions .mk-btn { flex: 1 1 100%; } } /* An error is a border, a heading and words. Never colour on its own. */ .mk-form__error { max-width: var(--measure); margin-top: 1.25rem; padding: 0.875rem 1rem; background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--rule); border-left: 0.25rem solid var(--error-rule); border-radius: var(--radius-sm); font-weight: 600; } .mk-form__error > * + * { margin-top: 0.5rem; } .mk-form__field--invalid input, .mk-form__field--invalid textarea { border-width: 2px; border-color: var(--error-rule); } /* Off-screen, never display:none — a bot that ignores CSS still sees it, and a screen-reader user never reaches it. */ .mk-form__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* --- Motion ------------------------------------------------------------ */ @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; } /* No hover or press displacement either. */ .mk-btn:active, a.mk-card:hover { transform: none; } } /* --- Print ------------------------------------------------------------- */ @media print { .mk-bar, .mk-skip, .mk-crumbs { display: none; } .mk-body { padding-bottom: 0; } .mk-header { position: static; box-shadow: none; } /* The dark panels lose their background on paper, so everything that was light-on-dark has to come back to ink — including the links and the secondary copy, which would otherwise print white on white. */ .mk-hero, .mk-cta, .mk-footer, .mk-panel, .mk-section--panel { background: none; color: var(--ink); } .mk-hero a, .mk-cta a, .mk-footer a, .mk-panel a, .mk-section--panel a, .mk-hero__title, .mk-hero__lead, .mk-hero__note, .mk-cta__heading, .mk-cta__lead, .mk-footer__heading, .mk-footer__note, .mk-footer__areas, .mk-footer__legal, .mk-footer__trade-name { color: var(--ink); } } /* --------------------------------------------------------------------------- Package 2 additions — same token vocabulary as everything above. _testimonials mk-quotes mk-quote mk-quote__text mk-quote__by _inquiry_form section mk-form-section header payments link (reuses mk-nav__link) --------------------------------------------------------------------------- */ .mk-quotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; } .mk-quote { margin: 0; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--rule-soft); border-radius: var(--radius-md); background: var(--surface); } .mk-quote__text { margin: 0 0 0.75rem; line-height: 1.55; } .mk-quote__text::before { content: "\201C"; } .mk-quote__text::after { content: "\201D"; } .mk-quote__by { color: var(--ink-soft); font-size: 0.875rem; } /* The homepage/contact placement of the canonical form keeps the standalone page's reading measure rather than stretching inputs full-bleed. */ .mk-form-section { max-width: 46rem; } /* Orphan guard (owner note, 2026-09-26): no line of body copy should strand a lone word. `pretty` is a progressive enhancement — browsers without it keep today's wrapping — and the one flagged line is also bound with no-break spaces so the fix does not depend on it. */ .mk-facts__item span, .mk-facts__item a, .mk-hero__lead, .mk-section__lead, .mk-quote__text, .mk-figure__caption, .mk-area__fact, .mk-note { text-wrap: pretty; } /* Contact opens ON the form (owner, 2026-09-26): the compact hero is a headline and one line, tightly set, and the form section directly after it loses its top padding so the first field sits in the first screenful. */ .mk-hero--compact .mk-hero__inner { padding-block: 1.75rem 1.5rem; min-height: 0; } .mk-hero--compact .mk-hero__title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); } .mk-hero--compact .mk-hero__lead { margin-bottom: 0; } .mk-hero--compact + .mk-section { padding-top: 1rem; }