/* ========================================================================== pages/pages.css — Louis Fire & Safety page templates (company, contact, careers, legal, customers, case studies, blog index, search, errors, auth). Load order: `stylesheet_link_tag :app` sorts by logical path, so this file loads BEFORE pages/site.css and pages/theme.css ("pages" < "site"). Every rule is therefore scoped under `.site` (the class) so it wins over the shared foundation at equal specificity without editing the shared files. Tokens and modifiers: tmp/design-system.md. 1. Masthead variants 5. Legal (privacy) 9. Errors 2. Company 6. Customers 10. Auth (sign in) 3. Contact 7. Blog pager 4. Careers 8. Search ========================================================================== */ /* ---------- 1. Masthead variants -------------------------------------------- A long grey continuation after a short title (customers, case studies, 500) drops to a lead paragraph — the same rule .row__big follows. */ .site :is(.masthead-long, .error-head) .masthead__title .grey { display: block; max-width: var(--measure-lead); margin-block-start: var(--s-5); font-size: var(--t-lead); line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--ink-2); text-wrap: pretty; } /* ---------- 2. Company ------------------------------------------------------ */ /* Story: the first paragraph leads (t-lead, ink); the rest read at t-read. */ .site .company-story { max-width: var(--measure); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink-2); } .site .company-story > p:first-child { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); } .site .company-story strong { color: var(--ink); } .site .company-story > * + * { margin-block-start: 1.1em; } .site .company-aside { gap: var(--s-3); } .site .company-aside__label { font-size: var(--t-s); line-height: var(--lh-s); font-weight: 500; letter-spacing: var(--track-body); color: var(--ink); } .site .company-aside .cert__label { color: var(--ink-2); } @media (max-width: 63.99rem) { .site .company-aside { margin-block-start: var(--s-7); } } /* Capabilities: title + lead on the left, the item list on the same top line. */ .site .capability { align-items: start; } .site .capability__lead { max-width: 30ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); } .site .capability__items { align-self: start; padding-block-start: 0.35em; font-size: var(--t-body); } /* ---------- 3. Contact ------------------------------------------------------ Row 1: label · form (cols 3–8) · details card (cols 10–12, sticky). Row 2 "Find us": office addresses (cols 3–5) · map (cols 6–12). The card comes first in the source so phones see phone/WhatsApp first. */ .site .contact-form-row .row__label { grid-row: 1; } .site .contact-main { grid-row: 1; grid-column: 3 / span 5; } .site .contact-card { grid-row: 1; grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: clamp(24px, 2.2vw, 32px); border-radius: var(--radius-l); background: var(--field); } .site .contact-card .contact-lines { border-top: 0; } .site .contact-card .contact-lines > div { padding-block: var(--s-4); border-color: rgb(0 0 0 / 0.08); } .site .contact-card .contact-lines > div:first-child { padding-block-start: 0; } .site .contact-card .contact-lines dd { font-size: var(--t-m); overflow-wrap: anywhere; } .site .contact-card .contact-actions { margin-block-start: var(--s-5); } .site .contact-card .contact-actions .btn { flex: 1 1 auto; } .site .contact-card .btn--outline { background: var(--paper); } .site .contact-main .contact-form { margin-block-start: 0; } .site .contact-map-row { align-items: start; } .site .contact-map-row .row__label { align-self: start; } .site .contact-offices { grid-column: 3 / span 3; align-self: start; } .site .contact-offices dd { font-size: var(--t-body); } .site .contact-offices address { color: var(--ink-2); } .site .contact-map { grid-column: 6 / -1; } .site .contact-map .map-frame { display: block; aspect-ratio: 16 / 9; max-height: none; background: var(--field); } @media (max-width: 63.99rem) { .site .contact-form-row .row__label { grid-row: auto; } .site .contact-card, .site .contact-main { grid-row: auto; grid-column: 1 / -1; } .site .contact-card { position: static; margin-block-end: var(--s-7); } .site .contact-offices, .site .contact-map { grid-column: 1 / -1; } .site .contact-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin-block-end: var(--s-6); } .site .contact-map .map-frame { aspect-ratio: 4 / 3; } } @media (max-width: 47.99rem) { .site .contact-offices { grid-template-columns: 1fr; } } /* ---------- 4. Careers ------------------------------------------------------ */ /* Where we hire: numbered hairline grid, three across. */ .site .careers-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin: 0; padding: 0; list-style: none; } .site .careers-depts li { display: grid; align-content: start; gap: var(--s-4); padding-block: var(--s-4) var(--s-7); border-top: 1px solid var(--rule); } .site .careers-depts__num { font-size: var(--t-s); font-weight: 500; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .site .careers-depts__title { max-width: 18ch; font-size: var(--t-m); line-height: var(--lh-m); } /* Why join us: check rows, three across. */ .site .careers-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); } .site .careers-perks li { display: flex; align-items: flex-start; gap: 14px; padding-block: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); color: var(--ink); } .site .careers-perks li::before { content: ""; flex: none; width: 10px; height: 6px; margin-block-start: 0.5em; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); } /* Apply: invitation (cols 3–6, sticky) beside the form panel (cols 7–12). */ .site .careers-apply { align-items: start; } .site .careers-apply__intro { grid-column: 3 / span 4; align-self: first baseline; position: sticky; top: calc(var(--header-h) + var(--s-5)); } .site .careers-apply__title { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 500; letter-spacing: var(--track-xl); text-wrap: balance; } .site .careers-apply__text { max-width: 26rem; margin-block-start: var(--s-4); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .site .careers-apply__actions { margin-block-start: var(--s-6); } .site .careers-apply__form { grid-column: 7 / -1; padding: clamp(24px, 3vw, 44px); border-radius: var(--radius-l); box-shadow: inset 0 0 0 1px var(--rule); } .site .careers-apply__form-label { margin-block-end: var(--s-6); font-size: var(--t-m); line-height: var(--lh-m); } .site .careers-apply__form .contact-form { margin-block-start: 0; } .site .careers-apply__form .field__hint { max-width: 34rem; } @media (max-width: 63.99rem) { .site .careers-depts, .site .careers-perks { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .site .careers-apply__intro, .site .careers-apply__form { grid-column: 1 / -1; } .site .careers-apply__intro { position: static; align-self: auto; margin-block-end: var(--s-7); } } @media (max-width: 47.99rem) { .site .careers-depts li { gap: var(--s-2); padding-block: var(--s-4) var(--s-5); } .site .careers-perks { grid-template-columns: 1fr; } .site .careers-apply__form { padding: var(--s-5) var(--s-4); } } @media (max-width: 29.99rem) { .site .careers-depts { grid-template-columns: 1fr; } } /* ---------- 5. Legal (privacy): one hairline section per heading ------------ */ .site .legal-page { padding-block-end: var(--row-y); } .site .legal-page__meta, .site .legal-page__foot { font-size: var(--t-s); } .site .legal-page__meta > span, .site .legal-page__foot > span { grid-column: 3 / -1; } .site .legal-page__meta { padding-block-end: var(--s-5); } .site .legal-page__foot { padding-block-start: var(--s-5); } .site .legal-page .legal__section { padding-block: var(--s-6) var(--s-7); } .site .legal-page .legal__section:last-of-type { border-bottom: 1px solid var(--rule); } .site .legal-page .legal__title { align-self: start; max-width: 16ch; } .site .legal-page .legal__text { max-width: var(--measure); color: var(--ink-2); line-height: 1.65; } .site .legal-page .legal__text strong { color: var(--ink); } .site .legal-page .legal__text a { color: var(--ink); } @media (max-width: 63.99rem) { .site .legal-page__meta > span, .site .legal-page__foot > span { grid-column: 1 / -1; } .site .legal-page .legal__text { margin-block-start: var(--s-3); } } /* ---------- 6. Customers ---------------------------------------------------- */ .site .client-grid { margin: 0; } @media (min-width: 64rem) { .site .client-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .site .client { grid-template-rows: 1fr auto; min-height: 176px; padding: var(--s-5) var(--s-4) var(--s-4); } .site .client img { max-width: 72%; max-height: 60px; align-self: center; } .site .client__name { align-self: center; font-size: var(--t-m); line-height: var(--lh-m); } .site .client__label { font-size: 0.8125rem; line-height: 1.35; } @media (max-width: 47.99rem) { .site .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .site .client { min-height: 136px; padding: var(--s-4) var(--s-3) var(--s-3); } .site .client img { max-height: 44px; } } /* ---------- 7. Blog pager: prev · numbered pages · next ---------------------- */ .site .pager--numbered { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; } .site .pager--numbered > :first-child { justify-self: start; } .site .pager--numbered > :last-child { justify-self: end; } .site .pager__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .site .pager__page { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 6px; border-radius: var(--radius); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); transition: background-color 200ms var(--ease), color 200ms var(--ease); } a.pager__page:hover { background: var(--field); color: var(--ink); } .site .pager__page[aria-current="page"] { background: var(--ink); color: var(--paper); text-decoration: none; } .site .pager__count { display: none; } @media (max-width: 47.99rem) { .site .pager__pages { display: none; } .site .pager__count { display: block; } .site .pager--numbered .btn { padding-inline: 16px; } } /* ---------- 8. Search: a labelled row per group, two columns of hairline rows -- */ .site .search-group .row__label .muted { display: inline; margin: 0 0 0 4px; padding: 0; } .site .search-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); } .site .search-list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); height: 100%; min-height: 56px; padding-block: 14px; border-top: 1px solid var(--rule); font-weight: 500; line-height: 1.35; transition: color 200ms var(--ease); } .site .search-list a:hover { color: var(--accent-ink); } .site .search-list .arrow { color: var(--grey); } .site .search-list a:hover .arrow { color: var(--accent); } @media (max-width: 63.99rem) { .site .search-list { grid-column: 1 / -1; } } @media (max-width: 47.99rem) { .site .search-list { grid-template-columns: 1fr; } } /* ---------- 9. Errors --------------------------------------------------------- */ .site .error-head { padding-block-end: clamp(48px, 5vw, 80px); } .site .error-head__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); margin-block-start: var(--s-4); } .site .error-head__search { grid-column: auto; max-width: 34rem; } .site .error-head__search input { font-size: var(--t-m); } @media (max-width: 47.99rem) { .site .error-head__search input { font-size: var(--t-body); } } .site .error-head + .row .index-row__blurb { color: var(--ink-2); } /* ---------- 10. Auth (sign in, password reset) ------------------------------- */ .site .auth { align-items: center; padding-block: clamp(40px, 5vw, 80px) clamp(56px, 6vw, 96px); } .site .auth__panel { grid-column: 1 / span 5; } .site .auth__form { max-width: 24rem; } .site .auth__form h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); } .site .auth__sub { color: var(--ink-2); } .site .auth__media { grid-column: 7 / -1; } .site .auth__media img { aspect-ratio: 5 / 4; border-radius: var(--radius-l); } @media (max-width: 63.99rem) { .site .auth__panel { grid-column: 1 / -1; } .site .auth__form { max-width: none; } }