/* raptor.plumbing: the one stylesheet of the marketing site (templates/base.html). Mobile first; breakpoints 48rem (tablet) and 64rem (desktop). No shadows; motion only in the Motion section at the end. Components (class names the page templates use): layout .container .section .section-alt .band-dark .band-accent .stack type .eyebrow .lead .prose .muted buttons .btn + .btn-accent | .btn-outline | .btn-ink | .btn-light ; .btn-row header .site-header .brand .menu-toggle .site-nav .header-actions ; .call-bar (phones) blocks .hero .service-tiles .page-intro .breadcrumbs .card-grid .card .split .cta-band .facts (Quick facts
) .faq-list .faq .checklist lists .pagination .post-list .post-card .job-list .job .badge .chip forms .form .field .field-error .hp (honeypot) .form-status .input-row footer .site-footer .footer-grid .footer-bottom Rebuild branches append their page-only rules in their own section at the end of the file. */ /* ---- Font: Inter, variable, weights 400-800, Latin subset: static/font/inter-latin-wght.woff2 (48 KB, SIL OFL: static/font/inter-LICENSE.txt). Its @font-face is inline in base.html's , so the URL carries the same ?v= as the and loads once. ---- */ /* Fallback shown until Inter arrives: local Arial scaled to Inter's metrics, so the swap barely moves text. Inter: ascent 0.96875 em, descent 0.2412 em, no line gap (its hhea table); average advance 6.7% wider than Arial's over English copy (both fonts' hmtx). local() cannot name system-ui, so where Arial is missing (Android) the stack goes on to system-ui unadjusted. */ @font-face { font-family: "Inter fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.7%; ascent-override: 90.79%; descent-override: 22.61%; line-gap-override: 0%; } /* ---- Tokens (brief section 4) ---- */ :root { --brand: #415755; --accent: #66cc33; --accent-ink: #2f7a12; --ink: #0a0a0a; --muted: #555555; --paper: #ffffff; --paper-2: #f4f4f4; --line: #d9d9d9; /* decorative hairlines */ --field-line: #767676; /* form borders: 4.5:1 on white */ --on-dark: #ffffff; --on-dark-muted: #e2e6e6; /* on --brand: 6.1:1 */ --accent-light: #9fe377; /* on --brand: 5.0:1 */ --brand-tint: #e8f0ef; /* --accent-ink on it: 4.6:1 */ --focus-color: var(--accent-ink); --font: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --step-0: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); --step-sm: 0.9375rem; --step-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); --step-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); --step-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); --lh-body: 1.55; --lh-head: 1.1; --measure: 65ch; --container: 75rem; /* 1200px */ --gutter: 1.5rem; /* 24px */ --section: clamp(4rem, 3rem + 4vw, 6rem); /* 64-96px */ --gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); --radius: 12px; --hairline: 1px solid var(--line); --header-h: 64px; --bar-h: 64px; } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: var(--lh-body); font-optical-sizing: auto; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } picture { display: contents; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: var(--lh-head); font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--step-h1); } h2 { font-size: var(--step-h2); } h3 { font-size: var(--step-h3); font-weight: 700; letter-spacing: -0.01em; } h4 { font-size: 1.0625rem; font-weight: 700; } p, ul, ol, dl, figure, blockquote { margin: 0 0 1em; } p { max-width: var(--measure); text-wrap: pretty; } a { color: var(--accent-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } strong, b { font-weight: 700; } small { font-size: var(--step-sm); } hr { border: 0; border-top: var(--hairline); margin: 2rem 0; } address { font-style: normal; } :focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; border-radius: 4px; } [tabindex="-1"]:focus { outline: none; } /*
, focused by the skip link */ .icon { flex: none; width: 1.25em; height: 1.25em; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 0.75rem; } /* ---- Layout ---- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section-alt { background: var(--brand-tint); } .section > .container > :last-child, .stack > :last-child { margin-bottom: 0; } .section-head { max-width: 48rem; margin-bottom: var(--gap); } .section-head p { color: var(--muted); } .stack > * + * { margin-top: 1rem; } .band-dark, .page-intro { background: var(--brand); color: var(--on-dark); --focus-color: var(--accent); } .band-dark a:not(.btn), .page-intro a:not(.btn, .chip) { color: var(--on-dark); } .band-dark .muted, .band-dark .section-head p { color: var(--on-dark); } .band-accent { background: var(--accent); color: var(--ink); --focus-color: var(--ink); } .band-accent a:not(.btn) { color: var(--ink); } .eyebrow { display: block; margin-bottom: 0.5rem; font-size: var(--step-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); } .band-dark .eyebrow, .hero .eyebrow { color: var(--on-dark); } /* accent on brand is 3.8:1, too low for small text */ .lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.5; } .muted { color: var(--muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.25rem; border: 2px solid transparent; border-radius: var(--radius); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn-accent:hover { background: #5cbb2c; border-color: #5cbb2c; } .btn-outline { background: transparent; border-color: currentColor; color: var(--brand); } .btn-outline:hover { background: var(--paper-2); } .band-dark .btn-outline, .page-intro .btn-outline, .hero .btn-outline, .call-bar .btn-outline { color: var(--on-dark); } :is(.band-dark, .page-intro, .hero, .call-bar) .btn-outline:hover { background: rgb(255 255 255 / 0.12); } .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn-ink:hover { background: #262626; border-color: #262626; } .btn-light { background: var(--paper); border-color: var(--paper); color: var(--ink); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .band-accent .btn-outline { color: var(--ink); } .band-accent .btn-outline:hover { background: rgb(0 0 0 / 0.08); } /* ---- Header: teal like the footer ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--brand); border-bottom: 1px solid rgb(255 255 255 / 0.15); --focus-color: var(--accent); } .header-bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .brand { display: block; flex: none; margin-right: auto; padding: 0.25rem 0; } .brand img { width: auto; height: 46px; } .menu-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--radius); background: transparent; color: var(--on-dark); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; } .menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .site-nav ul { margin: 0; padding: 0; list-style: none; } .site-nav a { display: block; padding: 0.75rem 0; color: var(--on-dark); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } /* The current page, and the section's link on a page under it (a job: Careers). */ .site-nav a:hover, .site-nav a[aria-current] { color: var(--accent-light); } .site-nav a[aria-current="page"], .site-nav a[aria-current="true"] { text-decoration: underline 3px var(--accent); text-underline-offset: 0.5em; } .header-actions { display: none; align-items: center; gap: 1rem; white-space: nowrap; } .header-phone { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--on-dark); font-weight: 700; text-decoration: none; white-space: nowrap; } .header-phone .icon { color: var(--accent); } /* Phones and tablets: the nav opens under the header from the menu button. Without JS (no .js on ) there is no button and the links show as a wrapped row instead. */ @media (max-width: 63.99rem) { .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 0.5rem var(--gutter) 1.25rem; background: var(--brand); border-bottom: 1px solid rgb(255 255 255 / 0.15); } .js .menu-toggle[aria-expanded="true"] + .site-nav { display: block; } .js .site-nav li + li { border-top: 1px solid rgb(255 255 255 / 0.15); } html:not(.js) .site-header { position: static; } html:not(.js) .menu-toggle { display: none; } html:not(.js) .header-bar { flex-wrap: wrap; } html:not(.js) .site-nav { order: 3; width: 100%; padding-bottom: 0.5rem; } html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } html:not(.js) .site-nav a { padding: 0.4rem 0; } } /* Phones: fixed call bar; the body keeps its height free so it never covers the footer. */ .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.5rem; padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: var(--brand); border-top: 1px solid rgb(255 255 255 / 0.2); --focus-color: var(--accent); } .call-bar .btn { min-height: 48px; padding-inline: 0.5rem; font-size: 0.875rem; } @media (max-width: 25.99rem) { .call-bar .icon { display: none; } } body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 48rem) { .call-bar { display: none; } body { padding-bottom: 0; } :root { --header-h: 80px; } .brand img { height: 56px; } .header-actions { display: flex; } } @media (max-width: 47.99rem) { .header-actions { display: none; } } @media (min-width: 64rem) { .menu-toggle { display: none; } .header-bar { gap: 1.5rem; } .brand { margin-right: 0; } .site-nav { margin-right: auto; } .site-nav ul { display: flex; gap: 1.5rem; } .site-nav a { padding: 0.5rem 0; } :root { --header-h: 88px; } .brand img { height: 65px; } } @media (min-width: 64rem) and (max-width: 74.99rem) { .brand img { height: 54px; } .site-nav ul { gap: 1.25rem; } } /* Under 75rem the phone shows its icon only (the number stays its name). */ @media (min-width: 48rem) and (max-width: 74.99rem) { .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* ---- Hero. Phones, portrait: the photo as a band, the copy on teal under it. Landscape from 48rem: the photo fills the screen under one even overlay (white text >= 4.57:1), pinned left; the copy column ends 2.5rem before the crew (39-59.5% of the photo's width: from 0.8 x its height) ---- */ .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: var(--brand); color: var(--on-dark); --focus-color: var(--accent); } .hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 49% 60%; } .hero-body { container-type: inline-size; padding: 1.75rem var(--gutter) 0; } .hero-title { margin-bottom: 1rem; } .hero h1 { margin: 0; font-size: clamp(2.25rem, 12cqi, 4rem); letter-spacing: -0.03em; } .hero .lead { margin: 0; } .hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.75rem 0 0; padding: 1rem 0 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.25); list-style: none; font-size: var(--step-sm); font-weight: 600; } .hero-trust li { display: flex; align-items: center; gap: 0.4rem; } .hero-trust .icon { color: var(--accent); } @media (min-width: 48rem) { .hero-media img { aspect-ratio: 3 / 2; } } @media (min-width: 48rem) and (min-aspect-ratio: 5 / 4) { .hero { --hero-h: max(34rem, calc(100svh - var(--header-h))); --col: clamp(var(--gutter), 50vw - 37.5rem, 12vw); min-height: var(--hero-h); justify-content: center; } .hero-media { position: absolute; inset: 0; z-index: -1; } .hero-media img { height: 100%; aspect-ratio: auto; object-position: 0 60%; } .hero-media::after { content: ""; position: absolute; inset: 0; background: rgb(18 28 27 / 0.6); } .hero-body { width: min(34rem, max(0.8 * var(--hero-h), 39vw) - var(--col) - 2.5rem); margin-left: var(--col); padding: 3rem 0 1rem; } } /* ---- Service tiles: four photo links edge to edge; each photo at 52% on a near-black tile (white titles, large and bold, >= 3:1); inset lines on the right and bottom ---- */ .tile-grid { display: grid; margin: 0; padding: 0; list-style: none; } .tile { position: relative; isolation: isolate; display: grid; background: #121c1b; --frame: var(--on-dark); } .tile img { position: relative; z-index: -1; grid-area: 1 / 1; width: 100%; height: clamp(13rem, 22vw, 20rem); object-fit: cover; opacity: 0.52; } .tile h3 { grid-area: 1 / 1; align-self: end; margin: 0 3rem 2.5rem 2.25rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); } .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--frame) 0 0) right 20px top 20px / 1px calc(100% - 30px) no-repeat, linear-gradient(var(--frame) 0 0) left 20px bottom 20px / calc(100% - 30px) 1px no-repeat; } .tile:hover { --frame: var(--accent); } .tile-link { color: var(--on-dark); text-decoration: none; } .tile-link::after { content: ""; position: absolute; inset: 0; } .tile-link:focus-visible { outline: none; } .tile-link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -8px; } @media (min-width: 48rem) { .tile-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .tile-grid { grid-template-columns: repeat(4, 1fr); } } /* ---- Inner pages: intro (H1 + one paragraph) and breadcrumbs ---- */ .page-intro { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .page-intro h1 { max-width: 22ch; } .page-intro .lead { margin-bottom: 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: var(--step-sm); } .breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; } .page-intro :is(.breadcrumbs ol, .breadcrumbs a, .post-byline, .job-meta), .breadcrumbs li + li::before { color: var(--on-dark-muted); } .page-intro .breadcrumbs [aria-current] { color: var(--on-dark); font-weight: 600; } /* ---- Cards: division/service cards in a grid; a card whose heading holds a.card-link is clickable as a whole ---- */ .card-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; } .card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: var(--paper); border: var(--hairline); border-radius: var(--radius); } .section-alt .card { border-color: transparent; } .card p { color: var(--muted); } .card > :last-child { margin-bottom: 0; } .card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: var(--radius); background: var(--brand); color: var(--accent); } .card-icon .icon { width: 1.5rem; height: 1.5rem; } .card-link { color: var(--ink); text-decoration: none; } .card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .card-link:focus-visible { outline: none; } .card-link:focus-visible::after { outline: 3px solid var(--focus-color); outline-offset: 3px; } .card:hover { border-color: var(--brand); } .card-more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.5rem; color: var(--accent-ink); font-weight: 700; } .card-media { margin: -1.75rem -1.75rem 1.5rem; } .card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; } /* ---- Split: text beside a photo (add .split-reverse to put the photo first on wide screens) ---- */ .split { display: grid; gap: var(--gap); align-items: center; } .split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); } @media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } .split-reverse > .split-media { order: -1; } } /* ---- Checklist ---- */ .checklist { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .checklist li { display: flex; gap: 0.6rem; align-items: flex-start; } .checklist .icon { margin-top: 0.15em; color: var(--accent-ink); } .band-dark .checklist .icon { color: var(--accent); } @media (min-width: 48rem) { .checklist-2 { grid-template-columns: 1fr 1fr; } } /* ---- CTA band (every page ends with one; macros.cta_band) ---- */ .cta-band { padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem); } .cta-band .container { display: grid; gap: 1rem 2rem; align-items: center; } .cta-band h2 { margin-bottom: 0.35em; } .cta-band p { margin: 0; } .cta-band .btn-row { margin-top: 0; } @media (min-width: 64rem) { .cta-band .container { grid-template-columns: 1fr auto; } } /* ---- Quick facts
---- */ .facts { display: grid; margin: 0; border-top: var(--hairline); } .facts > div { display: grid; gap: 0.25rem 1.5rem; padding: 0.9rem 0; border-bottom: var(--hairline); } .facts dt { font-weight: 700; } .facts dd { margin: 0; color: var(--muted); } @media (min-width: 48rem) { .facts > div { grid-template-columns: 12rem 1fr; } } /* ---- FAQs:

question + answer ---- */ .faq-list { display: grid; gap: 0 var(--gap); } .faq { padding-block: 1.25rem; border-top: var(--hairline); } .faq h3 { margin-bottom: 0.4em; } .faq p { margin: 0; color: var(--muted); } @media (min-width: 64rem) { .faq-list { grid-template-columns: 1fr 1fr; } } /* ---- Service area / contact details ---- */ .place-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .contact-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .contact-list li { display: flex; gap: 0.6rem; align-items: flex-start; } .contact-list .icon { margin-top: 0.2em; color: var(--accent-ink); } .band-dark .contact-list .icon, .site-footer .contact-list .icon { color: var(--accent); } .panel { padding: 1.75rem; background: var(--paper); border: var(--hairline); border-radius: var(--radius); } /* ---- Badges and chips ---- */ .badge, .chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step-sm); font-weight: 600; line-height: 1.2; } .badge { padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--brand); color: var(--on-dark); } .chip { padding: 0.4rem 0.8rem; border: 1px solid var(--field-line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; } a.chip:hover, .chip[aria-current] { border-color: var(--brand); background: var(--brand); color: var(--on-dark); } /* ---- News: post cards and the post list ---- */ .post-list { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin: 0; padding: 0; list-style: none; } .post-card { position: relative; display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--paper); } /* Post photos are often portraits of people: the crop keeps the top, where the faces are. */ .post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 10%; background: var(--paper-2); } .post-card-body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; } .post-card h2, .post-card h3 { font-size: var(--step-h3); margin: 0; } .post-card p { margin: 0; color: var(--muted); } .post-meta { font-size: var(--step-sm); color: var(--muted); } .post-card:hover { border-color: var(--brand); } /* ---- Pagination ---- */ .pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--gap) 0 0; padding: 0; list-style: none; } .pagination a, .pagination [aria-current] { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; text-decoration: none; } .pagination a:hover { border-color: var(--brand); } .pagination [aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-dark); } /* ---- Careers: job list ---- */ .job-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } .job { position: relative; display: grid; gap: 0.5rem 1.5rem; padding: 1.25rem 1.5rem; border: var(--hairline); border-radius: var(--radius); background: var(--paper); } .job h2, .job h3 { font-size: var(--step-h3); margin: 0; } .job-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; color: var(--muted); font-size: var(--step-sm); } .job:hover { border-color: var(--brand); } @media (min-width: 48rem) { .job { grid-template-columns: 1fr auto; align-items: center; } } /* ---- Prose: a post body, legal text, a job description ---- */ .prose { max-width: var(--measure); } .prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin-top: 2em; } .prose h3 { margin-top: 1.75em; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: 0.35em; } .prose img { margin-block: 1.5rem; border-radius: var(--radius); } .prose blockquote { padding-left: 1rem; border-left: 4px solid var(--accent); color: var(--muted); } .prose table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; font-size: var(--step-sm); } .prose th, .prose td { padding: 0.5rem; border-bottom: var(--hairline); text-align: left; vertical-align: top; } /* ---- Forms ---- */ .form { display: grid; gap: 1.25rem; max-width: 40rem; } .field { display: grid; gap: 0.4rem; } .field-row { display: grid; gap: 1.25rem; } @media (min-width: 48rem) { .field-row { grid-template-columns: 1fr 1fr; } } label, .label { font-weight: 600; } .hint { font-size: var(--step-sm); color: var(--muted); } input, select, textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--field-line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; } textarea { min-height: 9rem; resize: vertical; } input[type="file"] { padding: 0.6rem; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--brand); } [aria-invalid="true"] { border-color: #b3261e; border-width: 2px; } .field-error { margin: 0; color: #b3261e; font-size: var(--step-sm); font-weight: 600; } .field-error:empty { display: none; } .form-status { margin: 0; font-weight: 600; } .form-status:empty { display: none; } .form-status[data-state="ok"] { color: var(--accent-ink); } .form-status[data-state="error"] { color: #b3261e; } .band-dark .form-status[data-state="ok"], .site-footer .form-status[data-state="ok"] { color: var(--accent); } .band-dark .form-status[data-state="error"], .site-footer .form-status[data-state="error"] { color: #ffd5d2; } .input-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .input-row input { flex: 1 1 12rem; width: auto; } /* Honeypot: off-screen for everyone and out of the tab order; people never fill it in, bots do. */ .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---- Footer ---- */ .site-footer { background: var(--brand); color: var(--on-dark); --focus-color: var(--accent); font-size: var(--step-sm); } .site-footer a { color: var(--on-dark); } .site-footer h2 { margin-bottom: 1rem; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; } .footer-grid { display: grid; gap: 2.5rem var(--gap); padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem); } .footer-name { margin-bottom: 1rem; } .footer-name img { width: auto; height: 44px; } /* the logo, 183x44; 217x52 from 64rem */ .footer-links { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1.5rem; } .footer-links li { margin-bottom: 0.35rem; break-inside: avoid; } .footer-links a, .footer-bottom a, .contact-list a, .breadcrumbs a { display: inline-block; padding-block: 0.25rem; } /* >= 24px targets */ .social { display: flex; gap: 0.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 50%; } .social a:hover { border-color: var(--accent); color: var(--accent); } .site-footer input { border-color: var(--paper); } .site-footer .form { gap: 0.6rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.25); } .footer-bottom p { margin: 0; max-width: none; } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.1fr 1.2fr 1fr 1.3fr; } .footer-name img { height: 52px; } } /* ---- Reduced motion: no animation, transition or smooth scrolling from anything in this file (the Motion section at the end adds them only under no-preference, too) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---- Print ---- */ @media print { .site-header, .call-bar, .skip-link, .site-footer form, .cta-band .btn-row { display: none; } body { padding: 0; } } /* == B12 division pages == */ /* Breadcrumbs (every inner page): the linked crumbs carry block padding for their tap targets, so line the crumbs up on their text baseline, not their tops. */ .breadcrumbs ol { align-items: baseline; } /* == B13 company, contact, careers == */ /* Contact and job pages: the form panel beside the text on wide screens, tops aligned. */ .form-layout { display: grid; gap: var(--gap); align-items: start; } .form-layout .prose > :first-child { margin-top: 0; } @media (min-width: 64rem) { .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } /* Company: the mascot at its own shape; the four "how it works" steps in one row on desktop. */ .company-glance .split-media img { aspect-ratio: auto; max-width: 26rem; margin-inline: auto; } @media (min-width: 64rem) { .company-steps { grid-template-columns: repeat(4, 1fr); } } /* Company: the team intros are portraits, so their cards are 4:5 (the box is 480x600), cropped from the top like every post card. */ .post-card-portrait img { aspect-ratio: 4 / 5; } /* Careers: a job's date, place and department, each with its icon; its summary under them. */ .job-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; } .job-body > * + * { margin-top: 0.4rem; } .job-body p, .job-summary > :last-child { margin-bottom: 0; } .job .card-more { margin-top: 0; } .page-intro .job-meta { margin-bottom: 1rem; } /* == B14 news, legal, errors == */ /* News listing: the category filter; the gap in the page links. */ .news-filter ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--gap); padding: 0; list-style: none; } .pagination .pagination-gap { display: grid; place-items: center; min-width: 1.5rem; color: var(--muted); } /* Post: a smaller H1 for long titles, the byline, the body beside a contact panel on wide screens. Legal pages: an intro with no lead. Both: the prose ends flush. */ .page-intro h1:last-child, .prose > :last-child { margin-bottom: 0; } .post-intro h1 { max-width: 30ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); } .post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0; color: var(--muted); font-size: var(--step-sm); max-width: none; } .post-layout { display: grid; gap: var(--gap); align-items: start; } .post-body { min-width: 0; max-width: var(--measure); } .post-hero { margin: 0 0 2rem; } .post-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 10%; border-radius: var(--radius); background: var(--paper-2); } .post-aside h2 { font-size: var(--step-h3); } @media (min-width: 64rem) { .post-layout { grid-template-columns: minmax(0, 1fr) 20rem; } } /* == Motion == */ /* Transform, opacity and colour only (no layout shift), one curve; none of it under reduced motion, nothing hidden in print. site.js gives .rv (faded, --rise lower; a split's sides --slide outward) to the blocks that start below the first screen, then .rv-in, staggered by --rv-delay, as each scrolls into view; data-reveal="up|left|right|none" overrides. */ :root { --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t: 0.25s var(--ease); --rise: 28px; --slide: 40px; --header-compact: 56px; --logo-small: 0.85; } @media (min-width: 48rem) { :root { --header-compact: 64px; --logo-small: 0.75; } } /* Phones: anchors and focused fields stop clear of the call bar. The bar stays away while the intro's own call button row shows (site.js's .is-away), and until base.html's "ready" on a page that has one (no flash); it slides, except under reduced motion. */ @media (max-width: 47.99rem) { html { scroll-padding-bottom: calc(var(--bar-h) + 1rem); } .js:not(.ready):has(:is(.hero, .page-intro) .btn-row > a[href^="tel:"]) .call-bar, .call-bar.is-away { visibility: hidden; --away: 100%; --away-delay: 0.25s; } } @media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) { .call-bar { transform: translateY(var(--away, 0)); transition: transform var(--t), visibility 0s var(--away-delay, 0s); } } .scroll-sentinel { position: absolute; top: 0; width: 1px; height: 1px; } .tile:has(:focus-visible) { --frame: var(--accent); } @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } .js .site-header { view-transition-name: site-header; } .call-bar { view-transition-name: call-bar; } html { scroll-behavior: smooth; } .btn, .chip, .social a, .pagination a, .site-nav a { transition: color var(--t), background-color var(--t), border-color var(--t); } :is(.card, .post-card, .job):has(.card-link) { transition: transform var(--t), border-color var(--t); } :is(.card, .post-card, .job):has(.card-link):is(:hover, :has(:focus-visible)) { transform: translateY(-4px); border-color: var(--brand); } .post-card img, .card-more .icon, .tile img { transition: transform 0.4s var(--ease); } .post-card:is(:hover, :has(:focus-visible)) img { transform: scale(1.04); } :is(.card, .job):is(:hover, :has(:focus-visible)) .card-more .icon { transform: translateX(4px); } /* Tiles: the photo zooms; the frame's lines become ::before and ::after, to draw in. */ .service-tiles { background: #121c1b; } .tile { overflow: hidden; } .tile:is(:hover, :has(:focus-visible)) img { transform: scale(1.06); } .tile::before, .tile::after { content: ""; position: absolute; background: var(--frame); transition: transform 0.65s var(--ease), background-color var(--t); } .tile::before { top: 20px; right: 20px; width: 1px; height: calc(100% - 30px); transform-origin: top; } .tile::after { inset: auto auto 20px 20px; width: calc(100% - 30px); height: 1px; transform-origin: left; } } @media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) { .js .site-nav { display: block; visibility: hidden; opacity: 0; transform: translateY(-0.5rem); transition: opacity var(--t), transform var(--t), visibility 0s 0.25s; } .js .menu-toggle[aria-expanded="true"] + .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } } @media screen and (prefers-reduced-motion: no-preference) { /* Once site.js has added the sentinel, the header keeps its height but sticks with only --header-compact on screen; .is-stuck (scrolled) moves its content down into that part. */ html:has(.scroll-sentinel) { scroll-padding-top: calc(var(--header-compact) + 1rem); } body:has(> .scroll-sentinel) > .site-header { top: calc(var(--header-compact) - var(--header-h)); --lift: calc(var(--header-h) / 2 - var(--header-compact) / 2); } .header-bar > * { transition: transform var(--t); } .brand { transform-origin: left; } .is-stuck .header-bar > :not(.site-nav) { transform: translateY(var(--lift)); } .is-stuck .header-bar > .brand { transform: translateY(var(--lift)) scale(var(--logo-small)); } main { overflow-x: clip; } /* a block sliding in from the right never widens the page */ .rv { opacity: 0; transform: translate3d(var(--rv-x, 0), var(--rv-y, var(--rise)), 0); } .rv[data-reveal="up"] { transform: translate3d(0, var(--rise), 0); } .rv[data-reveal="left"] { transform: translate3d(calc(-1 * var(--slide)), 0, 0); } .rv[data-reveal="right"] { transform: translate3d(var(--slide), 0, 0); } .rv.rv-in { opacity: 1; transform: none; transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); transition-delay: var(--rv-delay, 0s); } .tile.rv::before { transform: scaleY(0); } .tile.rv::after { transform: scaleX(0); } .tile.rv-in::before, .tile.rv-in::after { transform: none; transition-delay: calc(var(--rv-delay, 0s) + 0.3s); } } /* Home hero entrance, CSS only: from @starting-style on the first render, so it waits on nothing and can never leave anything hidden. The column slides in from the left 0.3 s apart (the H1 from 0.2 opacity: it can be the LCP); the photo slowly settles (scale only). */ @media screen and (prefers-reduced-motion: no-preference) { .hero-media { overflow: hidden; } .js .hero-media img { transition: scale 8s var(--ease); } .js .hero-body > *, .js .hero h1 { transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); } .js .hero h1 { transition-delay: 0.3s; } .js .hero .lead { transition-delay: 0.6s; } .js .hero .btn-row { transition-delay: 0.9s; } .js .hero-trust { transition-delay: 1.2s; } @starting-style { .js .hero-media img { scale: 1.08; } .js .hero-body > :not(.hero-title, h1) { opacity: 0; translate: calc(-1 * var(--slide)) 0; } .js .hero h1 { opacity: 0.2; translate: calc(-1 * var(--slide)) 0; } } } @media screen and (min-width: 48rem) and (prefers-reduced-motion: no-preference) { .split > .rv { --rv-x: calc(-1 * var(--slide)); --rv-y: 0; } .split > .rv:last-child, .split-reverse > .rv:not(.split-media) { --rv-x: var(--slide); } .split-reverse > .rv.split-media { --rv-x: calc(-1 * var(--slide)); } } @media screen and (min-width: 64rem) and (prefers-reduced-motion: no-preference) { .is-stuck .site-nav { transform: translateY(var(--lift)); } /* The current page's accent underline becomes a bar that sweeps in on hover and focus too. */ .site-nav a { position: relative; } .site-nav a[aria-current] { text-decoration: none; } .site-nav a::after { content: ""; position: absolute; inset: auto 0 4px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .site-nav a:is(:hover, :focus-visible, [aria-current])::after { transform: none; } }