/* ========================================================================= /partners/ + /fr/partners/ — Coalition An editorial roster of allies. Sibling to /labs/'s Atelier Manifest: shared typographic system (mono stamps, hairlines, hanging numerals, ember accent, paper field, deep-blue closing band) so the two research pages read as a series. Where labs is text-first, partners is logo-first — each card surfaces a logo tile then the partner's name, country and description. Three rosters: Institutional, Technical, We support them. Naming: .id30-partners-page__* ========================================================================= */ .id30-partners-page { /* Paper inherited from . */ } .id30-partners-page__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Manifest hero shared with the other deep pages — see components/page-manifest.css and template-parts/page-manifest.php. */ /* ========================================================================= Rosters — three stacked sections, each with hanging numeral + grid ========================================================================= */ .id30-partners-page__rosters { padding: 56px 0 96px; border-top: 1px solid var(--color-line); } .id30-partners-page__rosters-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-graphite); margin: 32px 0 64px; display: flex; align-items: center; gap: 14px; } .id30-partners-page__rosters-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background-color: var(--color-line); max-width: 380px; } .id30-partners-page__roster { position: relative; padding: 56px 0 64px; border-top: 1px solid var(--color-line); } .id30-partners-page__roster:last-child { border-bottom: 1px solid var(--color-line); } .id30-partners-page__roster-head { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 32px; align-items: baseline; margin-bottom: 44px; } .id30-partners-page__roster-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); display: block; margin-left: -4px; } .id30-partners-page__roster-meta { max-width: 64ch; padding-top: 6px; } .id30-partners-page__roster-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-graphite); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; } .id30-partners-page__roster-eyebrow-text { color: var(--color-ember); } .id30-partners-page__roster-eyebrow-sep { color: var(--color-line); } .id30-partners-page__roster-count { color: var(--color-graphite); font-feature-settings: "tnum" 1; } .id30-partners-page__roster-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--color-ink); margin: 0 0 14px; max-width: 26ch; } .id30-partners-page__roster-manifest { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--color-slate); margin: 0; max-width: 60ch; } /* ---- Card grid --------------------------------------------------------- */ .id30-partners-page__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .id30-partners-page__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (min-width: 1024px) { .id30-partners-page__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .id30-partners-page__card { position: relative; background-color: #fff; border: 1px solid var(--color-line); border-radius: 4px; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; box-shadow: 0 1px 0 rgba(2,71,104,0.04); transition: transform 320ms var(--ease-spring), border-color 320ms, box-shadow 320ms; scroll-margin-top: 96px; } .id30-partners-page__card:hover { transform: translateY(-3px); 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); } /* Fallback highlight for browsers without cross-document View Transitions: * a brief outline pulse on the targeted card after smooth-scroll arrival. */ .id30-partners-page__card:target { animation: id30-partner-card-pulse 1400ms ease-out; } @keyframes id30-partner-card-pulse { 0% { box-shadow: 0 0 0 0 rgba(226,39,1,0.45); } 60% { box-shadow: 0 0 0 10px rgba(226,39,1,0); } 100% { box-shadow: 0 1px 0 rgba(2,71,104,0.04); } } /* Cross-document View Transition: card logo morphs from the homepage marquee. * The matching `view-transition-name` is set inline per partner. */ @view-transition { navigation: auto; } /* Vertical ember rule — slides in from the left edge on hover. */ .id30-partners-page__card-rule { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: var(--color-ember); transition: width 320ms var(--ease-spring); } .id30-partners-page__card:hover .id30-partners-page__card-rule { width: 4px; } /* Catalog ref — mono micro pinned top-right. */ .id30-partners-page__card-ref { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-graphite); opacity: 0.5; transition: color 320ms, opacity 320ms; } .id30-partners-page__card:hover .id30-partners-page__card-ref { color: var(--color-ember); opacity: 1; } /* Logo tile — white inset 3:2, contain any logo proportion. */ .id30-partners-page__card-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 18px; background-color: var(--color-paper); border-radius: 6px; margin-top: 10px; /* breathing room from the catalog ref */ } .id30-partners-page__card-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(0.15); transition: filter 320ms; } .id30-partners-page__card:hover .id30-partners-page__card-logo img { filter: none; } .id30-partners-page__card-name { font-family: var(--font-title); font-weight: 500; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.005em; color: var(--color-deep); margin: 4px 0 0; } .id30-partners-page__card-country { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; 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); margin: 0; } .id30-partners-page__card-desc { font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: var(--color-slate); margin: 0; } /* Closing band — moved to assets/css/components/page-cta.css and shared across /partners/, /labs/, /team/, /publications/. */ /* ========================================================================= Mobile (≤720px) ========================================================================= */ @media (max-width: 720px) { .id30-partners-page__rosters { padding: 40px 0 72px; } .id30-partners-page__roster { padding: 40px 0 48px; } .id30-partners-page__roster-head { grid-template-columns: 96px 1fr; gap: 18px; margin-bottom: 32px; } .id30-partners-page__roster-num { font-size: 2.8rem; } .id30-partners-page__card { padding: 22px 20px 20px; } .id30-partners-page__card-ref { top: 16px; right: 16px; } } /* ========================================================================= Reduced motion ========================================================================= */ @media (prefers-reduced-motion: reduce) { .id30-partners-page__card, .id30-partners-page__card-rule, .id30-partners-page__card-ref, .id30-partners-page__card-logo img { transition: none; } }