/* ============================================================================= ehs-site/projects/assets/projects.css — the Projects system's presentation. OWNERSHIP (GENERATION_BRIEF §4.1, the Lane A / Lane B contract): this file owns ONLY .ehs-project* / .ehs-gallery* / .ehs-dialog* / .ehs-filter* selectors (plus the `ehs-pj` / `ehs-dialog-locked` state classes projects.js sets on ). Cards, the grid, the pager, the title band and the chrome are Lane A's. Values: docs/design/tokens.json (colours incl. the O-1 contrast pair, type roles in all three bands, motion registers), pages/project-detail.md, pages/projects.md, INTERACTIONS §6 / §9. Every size is px against the 16 px design rem — Bricks' `html{font-size:62.5%}` makes `rem` 10 px, so this file uses no rem. ⛔ NO LAYOUT DEPENDS ON transform / translate (site.css §RM zeroes both under `reduce`); they are used for motion only. ⛔ overflow-x: clip, never hidden. ============================================================================= */ .ehs-project, .ehs-dialog, .ehs-filter { --ehs-p-ground: #121212; --ehs-p-band: #222222; --ehs-p-red: #EB4036; --ehs-p-red-fill: #D83B32; /* O-1 (a): text-bearing red fills, white 4.57:1 */ --ehs-p-red-on-band: #ED554C; /* O-1 (a): red text on #222222, 4.55:1 */ --ehs-p-white: #FFFFFF; --ehs-p-grey: #A5A5A5; --ehs-p-strip-ink: #9B9B9B; --ehs-p-display: "Oswald", sans-serif; --ehs-p-body: "Raleway", sans-serif; --ehs-p-dur-fast: 150ms; --ehs-p-dur-base: 300ms; --ehs-p-dur-gallery: 180ms; --ehs-p-dur-modal: 200ms; --ehs-p-ease-out: cubic-bezier(0, 0, 0.2, 1); } /* --------------------------------------------------------------------------- The article wrapper and its container ladder (layout.containerLadder): 1280 cap ≥1280 · full-bleed + 20 px $edgeSafe at 1025–1279 · 90 % at ≤1024. Lane A places [ehs_project_article] in a full-width, unpadded section. --------------------------------------------------------------------------- */ .ehs-project { background: var(--ehs-p-ground); color: var(--ehs-p-grey); font-family: var(--ehs-p-body); font-size: 16px; line-height: 25.6px; overflow-x: clip; } .ehs-project__wrap { width: min(100%, 1280px); margin-inline: auto; box-sizing: border-box; } @media (min-width: 1025px) and (max-width: 1279px) { .ehs-project__wrap { padding-inline: 20px; } } @media (max-width: 1024px) { .ehs-project__wrap { width: 90%; } } .ehs-project a:focus-visible, .ehs-project button:focus-visible, .ehs-dialog a:focus-visible, .ehs-dialog button:focus-visible, .ehs-filter a:focus-visible, .ehs-filter select:focus-visible, .ehs-filter button:focus-visible, .ehs-gallery:focus-visible { outline: 2px solid var(--ehs-p-white); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ehs-p-red); } .ehs-project__title:focus { outline: none; } /* programmatic focus target only (tabindex=-1) */ /* back link */ .ehs-project__back { margin: 0 auto; padding-top: 48px; } .ehs-project__back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ehs-p-white); text-decoration: none; font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; letter-spacing: 1.6px; text-transform: uppercase; transition: color var(--ehs-p-dur-fast); } .ehs-project__back-link:hover { color: var(--ehs-p-red); } /* project header — eyebrow (type.eyebrow), h1 (type.personName), location (type.lead) */ .ehs-project__header { padding-top: 16px; padding-bottom: 40px; } .ehs-project__eyebrow { margin: 0 0 18px; font-family: var(--ehs-p-display); font-weight: 600; font-size: 16px; line-height: 14.4px; letter-spacing: 3.8px; text-transform: uppercase; color: var(--ehs-p-red); } .ehs-project__title { margin: 0; font-family: var(--ehs-p-display); font-weight: 600; font-size: 56px; line-height: 67.2px; text-transform: uppercase; color: var(--ehs-p-white); overflow-wrap: anywhere; } .ehs-project__location { margin: 10px 0 0; font-size: 19.2px; line-height: 30.72px; color: var(--ehs-p-grey); } /* the record — 7 : 5 at ≥1025, stacked below */ .ehs-project__record { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; padding-bottom: 96px; } .ehs-project__description { margin: 0 0 24px; } .ehs-project__description p { margin: 0 0 16px; } .ehs-project__description p:last-child { margin-bottom: 0; } /* facts (E-65) — dt eyebrow-sized Oswald #9B9B9B, dd stripValue-sized Oswald white */ .ehs-project__facts { margin: 0; padding: 32px; background: var(--ehs-p-band); display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 14px 20px; } .ehs-project__fact { display: contents; } .ehs-project__facts dt { font-family: var(--ehs-p-display); font-weight: 600; font-size: 16px; line-height: 21.6px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ehs-p-strip-ink); padding-top: 2px; } .ehs-project__facts dd { margin: 0; font-family: var(--ehs-p-display); font-weight: 600; font-size: 18px; line-height: 21.6px; text-transform: uppercase; color: var(--ehs-p-white); overflow-wrap: anywhere; } .ehs-project__facts .ehs-project__fact-list ul { margin: 0; padding-left: 18px; font-family: var(--ehs-p-body); font-weight: 400; font-size: 16px; line-height: 25.6px; text-transform: none; } /* previous / next project */ .ehs-project-nav { border-top: 1px solid var(--ehs-p-band); padding: 28px 0; } .ehs-project-nav__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ehs-project-nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ehs-p-white); text-decoration: none; font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; transition: color var(--ehs-p-dur-fast); } .ehs-project-nav__link:hover { color: var(--ehs-p-red); } .ehs-project-nav__link--next { margin-left: auto; text-align: right; } /* CTA band (E-26) — #222222, 460 at ≥1025; the button is redFill with the I-03 register */ .ehs-project-cta { background: var(--ehs-p-band); min-height: 460px; display: flex; align-items: center; } .ehs-project-cta__in { display: flex; justify-content: space-between; align-items: center; gap: 32px; } .ehs-project-cta__title { margin: 0; max-width: 615px; font-family: var(--ehs-p-display); font-weight: 600; font-size: 56px; line-height: 67.2px; text-transform: uppercase; color: var(--ehs-p-white); } .ehs-project-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; flex: none; background: var(--ehs-p-red-fill); color: var(--ehs-p-white); text-decoration: none; font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 1.6px; text-transform: uppercase; transition: background-color var(--ehs-p-dur-base), transform var(--ehs-p-dur-base); } .ehs-project-cta__btn:hover { background: transparent; transform: skewX(-10deg); } .ehs-project-cta__btn:focus-visible { transform: none; } /* focus is not hover (INTERACTIONS §11 rule 4) */ /* --------------------------------------------------------------------------- The gallery (E-66). Without projects.js (`ehs-pj` absent): every photo stacked, no control bar. With it: one 3:2 #121212 stage, the current photo letterboxed. --------------------------------------------------------------------------- */ .ehs-gallery { outline-offset: 3px; } .ehs-gallery__stage { display: grid; gap: 12px; justify-items: center; } .ehs-gallery__img { display: block; width: auto; height: auto; /* ⛔ never above the master's own pixels (B-32): --ehs-w/--ehs-h are set per image */ max-width: min(100%, var(--ehs-w, 100%)); max-height: var(--ehs-h, none); background: var(--ehs-p-ground); } .ehs-gallery__bar { display: none; } .ehs-pj .ehs-gallery__stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--ehs-p-ground); border: 1px solid var(--ehs-p-band); overflow: hidden; touch-action: pan-y; } .ehs-pj .ehs-gallery__img { max-height: min(100%, var(--ehs-h, 100%)); transition: opacity var(--ehs-p-dur-gallery) var(--ehs-p-ease-out); } .ehs-pj .ehs-gallery__img:not(.is-current) { display: none; } .ehs-pj .ehs-gallery__img.is-entering { opacity: 0; transition: none; } .ehs-pj .ehs-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } /* Owner-requested sizing (2026-09-25, EHS-D-23 gallery line; options: keep 44 · enlarge; chosen: enlarge): 48 × 48 at ≤1024, 56 × 56 at ≥1025 (I-72's 44 floor kept everywhere); the chevron is an inline SVG, 24 px, flex-centred; the whole control is the hit area; the counter centres on the control row. */ .ehs-gallery__btn { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; line-height: 1; background: transparent; border: 1px solid var(--ehs-p-red); color: var(--ehs-p-white); font: 600 24px/1 var(--ehs-p-display); cursor: pointer; transition: background-color var(--ehs-p-dur-fast), border-color var(--ehs-p-dur-fast); } .ehs-gallery__icon { display: block; flex: none; width: 24px; height: 24px; pointer-events: none; } @media (min-width: 1025px) { .ehs-gallery__btn { width: 56px; height: 56px; } } .ehs-gallery__btn:hover:not([aria-disabled="true"]) { background: var(--ehs-p-red-fill); } .ehs-gallery__btn[aria-disabled="true"] { border-color: #5F5F5F; color: #6F6F6F; cursor: default; } .ehs-gallery__count { margin: 0; font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ehs-p-grey); } .ehs-gallery__count b { color: var(--ehs-p-white); font-weight: 600; } /* --------------------------------------------------------------------------- The dialog (E-67) — scrim rgba(0,0,0,.80), panel ≤1200 × ≤90vh, #121212, 1 px #222222 outline. Opened with show() by projects.js; it is its own scrim. --------------------------------------------------------------------------- */ .ehs-dialog { position: fixed; inset: 0; z-index: 100000; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: rgba(0, 0, 0, 0.80); color: var(--ehs-p-grey); box-sizing: border-box; } .ehs-dialog:not([open]) { display: none; } .ehs-dialog[open] { display: flex; align-items: center; justify-content: center; } .ehs-dialog__panel { position: relative; box-sizing: border-box; width: min(1200px, 100%); max-height: 90vh; overflow: auto; overscroll-behavior: contain; background: var(--ehs-p-ground); border: 1px solid var(--ehs-p-band); padding: 32px; } .ehs-dialog__close { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; padding: 0; background: var(--ehs-p-ground); border: 1px solid #444444; color: var(--ehs-p-white); font: 400 26px/1 var(--ehs-p-body); cursor: pointer; /* owner report 2026-09-25 (EHS-D-23 dialog row): the glyph is centred in the 44 × 44 control */ display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; } .ehs-dialog__close-icon { display: block; flex: none; width: 24px; height: 24px; pointer-events: none; } .ehs-dialog__close:hover { border-color: var(--ehs-p-red); } .ehs-dialog .ehs-project__wrap { width: auto; padding-inline: 0; } .ehs-dialog .ehs-project__header { padding: 0 56px 24px 0; } .ehs-dialog .ehs-project__title { font-size: 44.8px; line-height: 53.76px; } .ehs-dialog .ehs-project__record { padding-bottom: 0; } .ehs-dialog__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--ehs-p-band); margin-top: 28px; padding-top: 20px; } .ehs-dialog__nav { display: flex; flex-wrap: wrap; gap: 12px; } .ehs-dialog__open, .ehs-dialog__navlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box; background: transparent; border: 1px solid #444444; color: var(--ehs-p-white); text-decoration: none; font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; } .ehs-dialog__open { background: var(--ehs-p-red-fill); border-color: var(--ehs-p-red-fill); } .ehs-dialog__open:hover, .ehs-dialog__navlink:not([aria-disabled="true"]):hover { border-color: var(--ehs-p-red); } .ehs-dialog__navlink[aria-disabled="true"] { border-color: #5F5F5F; color: #6F6F6F; cursor: default; } html.ehs-dialog-locked { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .ehs-dialog.is-animated[open] { animation: ehs-dialog-in var(--ehs-p-dur-modal) var(--ehs-p-ease-out); } .ehs-dialog.is-animated[open] .ehs-dialog__panel { animation: ehs-dialog-rise var(--ehs-p-dur-modal) var(--ehs-p-ease-out); } } @keyframes ehs-dialog-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ehs-dialog-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } } /* --------------------------------------------------------------------------- The sector filter (E-62) — a link row ≥768, a GET form ≤767. --------------------------------------------------------------------------- */ .ehs-filter { margin: 0 0 28px; } .ehs-filter__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .ehs-filter__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--ehs-p-band); color: var(--ehs-p-white); text-decoration: none; font-family: var(--ehs-p-display); font-weight: 500; font-size: 15px; letter-spacing: 1.2px; text-transform: uppercase; transition: border-color var(--ehs-p-dur-fast); } .ehs-filter__link:hover { border-color: var(--ehs-p-red); } .ehs-filter__link[aria-current] { background: var(--ehs-p-band); border-color: var(--ehs-p-red); box-shadow: inset 0 -3px 0 var(--ehs-p-red); } .ehs-filter__form { display: none; flex-wrap: wrap; gap: 8px; } .ehs-filter__label { display: block; width: 100%; color: var(--ehs-p-white); font-family: var(--ehs-p-display); font-weight: 500; font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; } .ehs-filter__select { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 0 10px; box-sizing: border-box; background: var(--ehs-p-band); color: var(--ehs-p-white); border: 1px solid #444444; font: 400 16px/1.2 var(--ehs-p-body); } .ehs-filter__submit { min-height: 44px; min-width: 44px; padding: 0 20px; border: 0; cursor: pointer; background: var(--ehs-p-red-fill); color: var(--ehs-p-white); font-family: var(--ehs-p-display); font-weight: 500; font-size: 14.4px; letter-spacing: 1.6px; text-transform: uppercase; } /* --------------------------------------------------------------------------- 768–1024 (type.*.bands["768-1024"], authored where given) --------------------------------------------------------------------------- */ @media (max-width: 1024px) { .ehs-project__title { font-size: 44.8px; line-height: 53.76px; } .ehs-project__eyebrow { font-size: 14.4px; line-height: 12.96px; } .ehs-project__location { font-size: 17.6px; line-height: 28.16px; } .ehs-project__record { grid-template-columns: 1fr; padding-bottom: 72px; } .ehs-project-cta { min-height: 0; padding: 72px 0; } .ehs-project-cta__title { font-size: 44.8px; line-height: 53.76px; } .ehs-project-cta__btn { font-size: 14.4px; line-height: 14.4px; min-height: 44px; } .ehs-dialog { padding: 0; } .ehs-dialog__panel { width: 100%; max-height: 100vh; max-height: 100dvh; padding: 24px; } } /* --------------------------------------------------------------------------- ≤767 (type.*.bands["<=767"] / authored) --------------------------------------------------------------------------- */ @media (max-width: 767px) { .ehs-project__back { padding-top: 24px; } .ehs-project__header { padding-top: 8px; padding-bottom: 24px; } .ehs-project__title { font-size: 35.2px; line-height: 42.24px; } .ehs-project__record { padding-bottom: 56px; gap: 28px; } /* the gallery goes full-bleed out of the 90 % container. ⛔ Hotfix (Lane A, PR #10, TL ruling 2026-09-24): a -5vw margin made the gallery 100vw inside a 90 % record box, so the box's content overflowed it (official B-15 ink tier +18/+20 at 360–390 on the project pages). Same full-bleed intent, no overflow: the record is unpadded and full width at ≤767, and its non-gallery children take the 5vw inset the 90 % box used to give them (no JS dependency). */ .ehs-project__record.ehs-project__wrap { width: 100%; } .ehs-project__record.ehs-project__wrap > :not(.ehs-gallery) { padding-inline: 5vw; } .ehs-project .ehs-gallery { margin-inline: 0; } /* the dialog keeps its own panel padding (it never opens at phone width — I-64 — but stay inert) */ .ehs-dialog .ehs-project__record.ehs-project__wrap { width: auto; } .ehs-dialog .ehs-project__record.ehs-project__wrap > :not(.ehs-gallery) { padding-inline: 0; } .ehs-pj .ehs-project .ehs-gallery__stage { border-inline: 0; } .ehs-pj .ehs-project .ehs-gallery__bar { padding-inline: 5vw; } .ehs-project__facts { grid-template-columns: 1fr; gap: 4px; padding: 20px; } .ehs-project__facts dd { margin-bottom: 12px; } .ehs-project-nav__in { flex-direction: column; gap: 4px; } .ehs-project-nav__link { min-height: 56px; } .ehs-project-nav__link--next { margin-left: 0; text-align: left; } .ehs-project-cta { padding: 56px 0; } .ehs-project-cta__in { flex-direction: column; align-items: stretch; } .ehs-project-cta__title { font-size: 35.2px; line-height: 42.24px; } .ehs-filter__row { display: none; } .ehs-filter__form { display: flex; } } /* --------------------------------------------------------------------------- Reduced motion (INTERACTIONS §9) — this lane's registers. site.css §RM is the sitewide floor on top of this; nothing here may defeat it. gallery crossfade (I-71) instant dialog open (I-80, I-88) instant CTA hover (I-03) fill kept, no skew --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ehs-project *, .ehs-dialog, .ehs-dialog *, .ehs-filter * { transition-duration: 0s !important; animation: none !important; } .ehs-pj .ehs-gallery__img.is-entering { opacity: 1; } .ehs-project-cta__btn:hover { transform: none; } }