/* ========================================================================= /labs/ + /fr/labs/ — Atelier Manifest Editorial research index. Paper field with surgical ember accents. Hanging mono numerals 01–05 break the column grid as the page's signature visual rhythm. Dark surface-deep band at the bottom seals the page with the documented output(s). Naming: .id30-labs-page__* ========================================================================= */ .id30-labs-page { /* Paper inherited from ; no background needed here. */ } .id30-labs-page__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---- Reveal cascade per-row -------------------------------------------- */ /* The numbered rows share data-reveal; their delay is set inline in the template so we don't need to override --reveal-delay here. */ /* Manifest hero (stamp/title/subtitle/lead + 2-col grid + ember rule) lives in components/page-manifest.css and template-parts/page-manifest.php — shared with /partners/, /team/, /about/, /publications/, /contact/. */ /* ========================================================================= Research streams index — the page's signature ========================================================================= */ .id30-labs-page__streams { padding: 56px 0 48px; border-top: 1px solid var(--color-line); } .id30-labs-page__streams-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-graphite); margin: 32px 0 56px; display: flex; align-items: center; gap: 14px; } .id30-labs-page__streams-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--color-line); max-width: 380px; } .id30-labs-page__index { list-style: none; margin: 0; padding: 0; } .id30-labs-page__row { position: relative; display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 32px; align-items: baseline; padding: 40px 0 36px; border-top: 1px solid var(--color-line); scroll-margin-top: 96px; } .id30-labs-page__row:last-child { border-bottom: 1px solid var(--color-line); } .id30-labs-page__num { font-family: var(--font-mono); font-size: clamp(3.4rem, 6.4vw, 5.6rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.02em; color: var(--color-ember); transition: color 380ms var(--ease-spring), transform 380ms var(--ease-spring); display: block; margin-left: -4px; /* optical alignment for the leading 0 */ } .id30-labs-page__row-body { max-width: 60ch; padding-top: 6px; } .id30-labs-page__row-title { position: relative; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--color-ink); margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; } .id30-labs-page__row-title-text { position: relative; display: inline-block; } .id30-labs-page__row-title-text::after { /* Ember scan-line that sweeps in on hover — left to right. */ content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background-color: var(--color-ember); transform: scaleX(0); transform-origin: left center; transition: transform 520ms var(--ease-spring); } .id30-labs-page__row-desc { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-slate); margin: 0; } /* Hover state: scan-line in, numeral shifts ember → deep-blue */ .id30-labs-page__row:hover .id30-labs-page__num, .id30-labs-page__row:focus-within .id30-labs-page__num { color: var(--color-deep); transform: translateX(-3px); } .id30-labs-page__row:hover .id30-labs-page__row-title-text::after, .id30-labs-page__row:focus-within .id30-labs-page__row-title-text::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .id30-labs-page__num { transition: none; } .id30-labs-page__row-title-text::after { transition: none; } } /* ========================================================================= 3) Output — paper-toned "filed documents". Each row is a tactile, obviously-clickable card with a mono catalog reference, year stamp, type badge, large Lexend title and explicit CTA. An ember vertical bar on the left edge widens on hover; the whole card lifts. ========================================================================= */ .id30-labs-page__output { position: relative; padding: 56px 0 128px; background-color: var(--color-paper); } .id30-labs-page__output-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-graphite); margin: 0 0 56px; display: flex; align-items: center; gap: 14px; } .id30-labs-page__output-eyebrow::before { content: ""; width: 28px; height: 1px; background-color: var(--color-ember); display: inline-block; } .id30-labs-page__output-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; } .id30-labs-page__output-row { background-color: #fff; border: 1px solid var(--color-line); border-radius: 4px; box-shadow: 0 1px 0 rgba(2,71,104,0.04); transition: transform 320ms var(--ease-spring), border-color 320ms, box-shadow 320ms; overflow: hidden; position: relative; } .id30-labs-page__output-row:hover { transform: translateY(-4px); border-color: rgba(2,71,104,0.18); box-shadow: 0 22px 48px -28px rgba(2,71,104,0.28), 0 4px 10px -6px rgba(2,71,104,0.10); } .id30-labs-page__output-link { display: grid; grid-template-columns: 6px 1fr auto; align-items: stretch; gap: 0; padding: 0; color: var(--color-ink); text-decoration: none; } /* Vertical ember rule (column 1) — widens on hover for the "open document" cue. */ .id30-labs-page__output-rule { background-color: var(--color-ember); width: 6px; transition: width 320ms var(--ease-spring); align-self: stretch; } .id30-labs-page__output-row:hover .id30-labs-page__output-rule { width: 10px; } /* Body — column 2 — meta row + title stacked. */ .id30-labs-page__output-link > .id30-labs-page__output-meta, .id30-labs-page__output-link > .id30-labs-page__output-title { grid-column: 2; } .id30-labs-page__output-meta { padding: 26px 28px 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-slate); } .id30-labs-page__output-meta-sep { color: var(--color-line); } .id30-labs-page__output-ref { color: var(--color-ember); } .id30-labs-page__output-year { color: var(--color-graphite); } .id30-labs-page__output-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--color-ember); padding: 4px 9px; border-radius: 9999px; border: 1px solid rgba(226, 39, 1, 0.28); background-color: rgba(226, 39, 1, 0.04); } .id30-labs-page__output-title { padding: 14px 28px 26px; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--color-deep); margin: 0; max-width: 36ch; } .id30-labs-page__output-title-text { position: relative; display: inline; background-image: linear-gradient(var(--color-ember), var(--color-ember)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 520ms var(--ease-spring); padding-bottom: 2px; } .id30-labs-page__output-row:hover .id30-labs-page__output-title-text { background-size: 100% 1px; } /* Action — column 3 — CTA + arrow disc, vertically centered. */ .id30-labs-page__output-action { grid-column: 3; align-self: stretch; display: flex; align-items: center; gap: 18px; padding: 0 28px; border-left: 1px solid var(--color-line); } .id30-labs-page__output-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-graphite); white-space: nowrap; } .id30-labs-page__output-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--color-line); color: var(--color-graphite); background-color: var(--color-paper); transition: transform 280ms var(--ease-spring), border-color 280ms, color 280ms, background-color 280ms; flex-shrink: 0; } .id30-labs-page__output-row:hover .id30-labs-page__output-arrow { transform: translate(2px, -2px); border-color: var(--color-ember); color: var(--color-ember); background-color: rgba(226,39,1,0.06); } .id30-labs-page__output-row:hover .id30-labs-page__output-cta { color: var(--color-ember); } @media (prefers-reduced-motion: reduce) { .id30-labs-page__output-row, .id30-labs-page__output-rule, .id30-labs-page__output-arrow, .id30-labs-page__output-title-text { transition: none; } } /* ========================================================================= Mobile (≤720px) ========================================================================= */ @media (max-width: 720px) { .id30-labs-page__streams { padding: 40px 0 96px; } .id30-labs-page__output { padding: 88px 0 96px; } .id30-labs-page__row { grid-template-columns: 96px 1fr; gap: 18px; padding: 30px 0 26px; } .id30-labs-page__num { font-size: 2.8rem; } .id30-labs-page__output-link { grid-template-columns: 6px 1fr; } .id30-labs-page__output-meta { padding: 22px 22px 0; } .id30-labs-page__output-title { padding: 12px 22px 18px; } .id30-labs-page__output-action { grid-column: 2; grid-row: 3; border-left: 0; border-top: 1px solid var(--color-line); padding: 16px 22px; justify-content: space-between; } }