/* ========================================================================== pages/pages.css: page-template styles (home, company, customers, contact, careers, blog index, catalogue, search, errors, sign in, privacy). Builds on the foundation (01-tokens, 02-components, pages/site.css, pages/theme.css) without changing it. NOTE: this file sorts BEFORE site.css and theme.css, so rules that override those files are scoped with `.site` (the class) to win on specificity. ========================================================================== */ /* ---------- Shared helpers ------------------------------------------------- */ /* Rows whose content starts with media or cards (no text baseline to share): the label sits on the top edge instead of the first text baseline. */ .site .row--top > .row__label { align-self: start; } /* A quiet "← back" line directly under a masthead. */ .site .category-back { padding-block: 0 var(--s-2); border-top: 0; } .site .category-back + .row { border-top: 0; padding-block-start: var(--s-5); } .site .category-back .more { min-height: 40px; font-size: var(--t-s); } /* Cards: a hairline edge on the media so white product shots don't float, and poster images (text baked in on the left) anchored left, not centred. */ .site .tiles .card .tile__media::after, .site .blog-lead .card .tile__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.06); pointer-events: none; } .site .tiles--posters .card .tile__media img, .site .blog-lead .card .tile__media img { object-position: 0 50%; } /* ---------- Home ----------------------------------------------------------- */ /* Customer logo wall: whole rows only, logos blended into the tile. */ .site .logo-wall--home { gap: var(--s-3); } .site .logo-wall--home li { aspect-ratio: 16 / 9; padding: var(--s-5); } .site .logo-wall--home img { max-height: 60px; max-width: 78%; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: 0.82; } .site .logo-wall--home li:hover img { filter: none; opacity: 1; } @media (max-width: 47.99rem) { .site .logo-wall--home li { padding: var(--s-4); } .site .logo-wall--home img { max-height: 44px; } } /* Accreditations register: head + text (cols 3–6) beside a hairline list of code · label · detail (cols 7–12). */ .site .row > .register-intro { grid-column: 3 / span 4; } .site .register-intro .row__head { max-width: 14ch; } .register { grid-column: 7 / -1; align-self: start; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); } .register li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: baseline; padding-block: 15px; border-bottom: 1px solid var(--rule); } .register b { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; letter-spacing: var(--track-head); color: var(--ink); white-space: nowrap; } .register span { display: contents; } .register span, .register li { font-size: 0.9375rem; line-height: 1.4; } .register small { font-size: var(--t-s); color: var(--grey-text); text-align: end; } @media (min-width: 64rem) { .register { margin-block-start: 8px; } } @media (max-width: 63.99rem) { .site .row > .register-intro, .register { grid-column: 1 / -1; } .site .register-intro .row__head { max-width: 26ch; } .register { margin-block-start: var(--head-gap); } } @media (max-width: 47.99rem) { .register li { grid-template-columns: 5.5rem minmax(0, 1fr); row-gap: 2px; } .register small { grid-column: 2; text-align: start; } } /* ---------- Company -------------------------------------------------------- */ .site .company-text { font-size: var(--t-read); line-height: 1.65; color: var(--ink-2); } .site .company-text > p:first-child { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); } .site .company-text strong { color: var(--ink); } /* "What drives us": a pull quote (statement + continuation) with a photo. */ .pull-quote { margin: 0; } .pull-quote blockquote { position: relative; margin: 0; padding: 0; } .pull-quote blockquote::before { content: "\201C"; display: block; height: 0.5em; margin-block-end: var(--s-4); font-size: clamp(4rem, 3rem + 3vw, 6.5rem); line-height: 0.9; font-weight: 500; color: var(--accent); } .pull-quote__lead { max-width: 20ch; font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: 500; letter-spacing: var(--track-hero); color: var(--ink); text-wrap: balance; } .pull-quote__text { max-width: 32ch; margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-top: 2px solid var(--accent); font-size: var(--t-l); line-height: 1.34; font-weight: 400; letter-spacing: var(--track-head); color: var(--ink-2); text-wrap: pretty; } .site .company-drives > .row__label { align-self: start; margin-block-start: clamp(4.5rem, 3.4rem + 3.2vw, 7rem); } .pull-quote__media { margin: 0; align-self: end; } .pull-quote__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--field); } @media (max-width: 63.99rem) { .site .company-drives > .row__label { margin-block-start: 0; } .pull-quote__media img { aspect-ratio: 4 / 3; } } /* ---------- Customers ------------------------------------------------------ */ .site .client-grid--cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; } .site .client-grid--cards .client { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; overflow: hidden; border-radius: var(--radius-l); text-align: start; } .client__logo { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s-5) var(--s-6); } .site .client-grid--cards .client img { max-height: 64px; max-width: 72%; mix-blend-mode: multiply; } .site .client-grid--cards .client__name { font-size: var(--t-m); line-height: var(--lh-m); color: var(--ink); text-align: center; } .site .client-grid--cards .client__label { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 52px; padding: 12px var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-s); font-weight: 500; line-height: 1.35; color: var(--ink); transition: color 200ms var(--ease); } .site .client-grid--cards .client__label > span::first-letter { text-transform: uppercase; } .site .client-grid--cards .client__label .arrow { color: var(--grey); } .site .client-grid--cards .client:hover .client__label { color: var(--accent-ink); } .site .client-grid--cards .client:hover .client__label .arrow { color: var(--accent); transform: translateX(3px); } @media (max-width: 63.99rem) { .site .client-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 47.99rem) { .site .client-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .client__logo { padding: var(--s-4); } .site .client-grid--cards .client img { max-height: 44px; max-width: 80%; } .site .client-grid--cards .client__label { padding: 10px var(--s-4); font-size: 0.8125rem; } .site .client-grid--cards .client__label .arrow { display: none; } } /* ---------- Contact: form · details card · map ----------------------------- */ .site .contact-form-row { align-items: start; } .site .contact-form-row > .row__main { padding-block-start: var(--s-2); } .contact-card { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: clamp(24px, 2.4vw, 36px); border-radius: var(--radius-l); background: var(--coal); color: #fff; } .site .contact-card .contact-lines { border-top: 0; } .site .contact-card .contact-lines > div { padding-block: var(--s-4); border-bottom: 1px solid rgb(255 255 255 / 0.14); } .site .contact-card .contact-lines > div:first-child { padding-block-start: 0; } .site .contact-card .contact-lines dt { font-size: var(--t-s); color: rgb(255 255 255 / 0.6); } .site .contact-card .contact-lines dd { color: #fff; } .site .contact-card .contact-lines__call dd:not(.contact-lines__alt) { font-size: var(--t-l); line-height: var(--lh-head); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; } .site .contact-card .contact-lines dd a { overflow-wrap: anywhere; } .site .contact-card .contact-lines dd a:hover { color: var(--accent-lite); } .site .contact-card .contact-lines address, .site .contact-card .contact-lines .contact-lines__alt { color: rgb(255 255 255 / 0.78); } .contact-card__dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgb(255 77 0 / 0.22); vertical-align: 0.12em; } .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 { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); } .site .contact-card .btn--outline:hover { box-shadow: inset 0 0 0 1px #fff; background: rgb(255 255 255 / 0.06); } .site .contact-card .btn:focus-visible { outline-color: #fff; } .site .contact-form-row .contact-form__submit { margin-block-start: var(--s-2); } .contact-map { position: relative; } .site .contact-map .map-frame { display: block; height: clamp(320px, 30vw, 440px); aspect-ratio: auto; max-height: none; background: var(--field); } .contact-map__link { position: absolute; left: var(--s-4); bottom: var(--s-4); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(17 17 17 / 0.08), 0 8px 24px rgb(17 17 17 / 0.14); font-size: var(--t-s); font-weight: 500; color: var(--ink); transition: color 200ms var(--ease); } .contact-map__link:hover { color: var(--accent-ink); } @media (max-width: 63.99rem) { .contact-card { position: static; } .site .contact-form-row > .row__side { margin-block-start: var(--s-7); } } @media (max-width: 47.99rem) { .site .contact-map .map-frame { height: 300px; } .site .contact-card .contact-actions .btn { width: 100%; } } /* ---------- Careers -------------------------------------------------------- */ /* Departments: each row jumps to the application form. */ .site .careers-list--links li { display: block; padding: 0; } .site .careers-list--links a { display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding-block: 12px; transition: color 200ms var(--ease); } .site .careers-list--links .careers-list__name { flex: 1; } .site .careers-list--links .arrow { color: var(--grey); } .site .careers-list--links a:hover { color: var(--accent-ink); } .site .careers-list--links a:hover .arrow { color: var(--accent); } .careers-photo { margin: 0; align-self: start; } .careers-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--field); } @media (max-width: 63.99rem) { .careers-photo img { aspect-ratio: 16 / 10; } } /* Why join us: six benefits on a 3 × 2 hairline grid with accent ticks. */ .perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--col-gap); margin: 0; padding: 0; list-style: none; } .perks li { position: relative; padding: var(--s-5) 0 var(--s-6) 36px; border-top: 1px solid var(--rule); font-size: var(--t-m); line-height: var(--lh-m); font-weight: 500; letter-spacing: var(--track-head); text-wrap: pretty; } .perks li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-5) + 0.2em); width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); } .perks li::after { content: ""; position: absolute; left: 6px; top: calc(var(--s-5) + 0.2em + 6px); width: 8px; height: 4px; border: solid var(--accent-ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); } @media (max-width: 63.99rem) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99rem) { .perks { grid-template-columns: 1fr; } .perks li { padding-block: var(--s-4); } .perks li::before { top: calc(var(--s-4) + 0.1em); } .perks li::after { top: calc(var(--s-4) + 0.1em + 6px); } } /* Apply: intro (cols 3–6) beside the form panel (cols 7–12). */ .site .careers-apply { align-items: start; } .careers-apply__intro { grid-column: 3 / span 4; align-self: first baseline; } .site .careers-apply__intro .row__head { max-width: 14ch; } .site .careers-apply__intro .careers-apply__actions { margin-block-start: var(--s-5); } .careers-apply__panel { grid-column: 7 / -1; padding: clamp(24px, 3vw, 44px); border-radius: var(--radius-l); background: var(--field); } .site .careers-apply__panel .contact-form { margin: 0; } .site .careers-apply__panel input[type="file"]::file-selector-button { background: #fff; box-shadow: inset 0 0 0 1px var(--rule-strong); } .site .careers-apply__panel .field__hint { max-width: 40em; } .site .careers-apply__panel--inline { margin-block-start: var(--s-4); } .site .article-prose .careers-apply__panel--inline { font-size: var(--t-body); line-height: var(--lh-body); } @media (max-width: 63.99rem) { .careers-apply__intro, .careers-apply__panel { grid-column: 1 / -1; } .careers-apply__panel { margin-block-start: var(--s-6); } } @media (max-width: 47.99rem) { .careers-apply__panel { margin-inline: calc(var(--gutter) * -0.5); padding: var(--s-5) var(--s-4); } } /* ---------- Blog index: an editorial lead (1 large + 2 stacked) ---------- */ .blog-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--stack-gap) var(--col-gap); margin-block-end: var(--stack-gap); padding-block-end: var(--stack-gap); border-bottom: 1px solid var(--rule); } .blog-lead__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-6); } .site .blog-lead__main .card .tile__media img { aspect-ratio: 16 / 9; } .site .blog-lead__main .card .tile__title { font-size: var(--t-xl); line-height: var(--lh-xl); letter-spacing: var(--track-xl); -webkit-line-clamp: 3; } .site .blog-lead__main .card .tile__text { max-width: var(--measure-lead); font-size: var(--t-body); color: var(--ink-2); -webkit-line-clamp: 2; } .site .blog-lead__side .card .tile__media img { aspect-ratio: 16 / 9; } .site .blog-lead__side .card .tile__text { display: none; } .site .blog-lead__side .card .card__more { padding-block-start: var(--s-3); } @media (max-width: 63.99rem) { .blog-lead { grid-template-columns: 1fr; } .blog-lead__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: var(--col-gap); } } @media (max-width: 47.99rem) { .blog-lead__side { grid-template-columns: 1fr; gap: var(--s-7); } .site .blog-lead__main .card .tile__title { font-size: var(--t-l); line-height: var(--lh-head); } .site .blog-lead__side .card .tile__text { display: -webkit-box; } } /* ---------- Catalogue: category cards + product grid ----------------------- */ .site .category-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; } .site .category-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: var(--radius-l); box-shadow: inset 0 0 0 1px var(--rule); } .site .category-card:hover { box-shadow: inset 0 0 0 1px var(--accent); } .site .category-card__media { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0; border-radius: 0; background: var(--field); transition: background-color var(--dur) var(--ease); } .site .category-card:hover .category-card__media { background: var(--accent-soft); } .site .category-card__media img { position: absolute; inset: 13%; width: 74%; height: 74%; max-width: none; max-height: none; object-fit: contain; mix-blend-mode: multiply; transition: transform 900ms var(--ease); } .site .category-card:hover .category-card__media img { transform: scale(1.04); } .site .category-card__text { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); } .site .category-card__title { font-size: var(--t-m); line-height: var(--lh-m); text-wrap: balance; } .site .category-card__more { margin-block-start: auto; padding-block-start: var(--s-3); font-weight: 500; color: var(--ink); } .site .category-card:hover .category-card__more { color: var(--accent-ink); } @media (max-width: 63.99rem) { .site .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99rem) { .site .category-cards { gap: var(--s-3); } .site .category-card__text { padding: var(--s-4); } .site .category-card__title { font-size: var(--t-body); } .site .category-card__more { font-size: 0.8125rem; } } /* Products: field panels (white shots multiply into the panel), 5 across. */ .site .tiles.catalogue { gap: var(--s-7) var(--col-gap); } @media (min-width: 75rem) { .site .tiles.catalogue { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .site .catalogue .tile__media { margin-block-end: var(--s-3); border-radius: var(--radius-l); background: var(--field); transition: background-color var(--dur) var(--ease); } .site .catalogue .tile:hover .tile__media { background: var(--accent-soft); } .site .catalogue .tile__media::after { display: none; } .site .catalogue.tiles .tile--contain .tile__media img { padding: 12%; background: none; mix-blend-mode: multiply; } .site .catalogue .tile__meta { display: block; min-height: 0; margin-block-end: 4px; } .site .catalogue .card__tag { display: block; max-width: 100%; padding: 0; border-radius: 0; background: none; color: var(--grey-text); font-size: 0.6875rem; } .site .catalogue .tile__title { font-size: var(--t-body); line-height: 1.35; } @media (max-width: 47.99rem) { .site .tiles.catalogue { gap: var(--s-6) var(--s-3); } .site .catalogue .tile__title { font-size: 0.9375rem; } } /* ---------- Search: one hairline list per kind, kind in the label column --- */ .site .results-row { display: grid; row-gap: var(--s-8); } .results-group { row-gap: 0; } .site .results-group > .row__label { align-self: start; padding-block-start: 13px; } .site .results-group > .row__label .muted { display: inline; margin-inline-start: 6px; padding: 0; font-variant-numeric: tabular-nums; } .site .results-group .article-aside__list a { min-height: 52px; font-size: var(--t-body); } /* ---------- Errors: a large outlined code behind the masthead -------------- */ .masthead--error { position: relative; overflow: hidden; } .error-code { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; margin: 0; font-size: clamp(7rem, 4rem + 14vw, 17rem); line-height: 1; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--rule-strong); pointer-events: none; user-select: none; } .masthead--error > :not(.error-code) { position: relative; } @media (max-width: 63.99rem) { .error-code { position: static; translate: none; grid-column: 1 / -1; order: -1; font-size: 6rem; -webkit-text-stroke-width: 1px; } } /* ---------- Sign in / password pages --------------------------------------- */ .site .auth { align-items: center; padding-block: clamp(40px, 5vw, 80px) clamp(64px, 7vw, 112px); } .site .auth__panel { grid-column: 1 / span 5; } .site .auth__head { gap: var(--s-3); } .auth__kicker { font-size: var(--t-s); line-height: var(--lh-s); } .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 img { aspect-ratio: 4 / 3; border-radius: var(--radius-l); } @media (max-width: 63.99rem) { .site .auth__panel { grid-column: 1 / -1; } } /* ---------- Privacy -------------------------------------------------------- */ .legal__n { grid-column: 1 / span 2; align-self: first baseline; font-size: var(--t-s); font-weight: 500; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .site .legal__title { align-self: first baseline; } .site .legal__text { align-self: first baseline; font-size: var(--t-read); line-height: 1.65; } .site .legal__updated { padding-block: 0 var(--s-5); } @media (max-width: 63.99rem) { .legal__n { grid-column: 1 / -1; margin-block-end: var(--s-2); } } /* Photos in the side column need the row__side gap back once they stack. */ @media (max-width: 63.99rem) { .site .pull-quote__media, .site .careers-photo { margin-block-start: var(--s-7); } }