/* ========================================================================== I3C Interface (/products/design/design-ip/i3c/) The MIPI I3C controller and target cores, built like ROM Compiler. NO NEW COMPONENTS: .pf-cap for the capabilities, the shared .pf-parts / .pf-ptable for the five cores, with no filter bar. Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and --ps-color-neutral-2-100; --ps-color-neutral-2-000 is reserved for the conversion band. No two adjacent bands share a tint. §1 banner white §5 proof white §2 capabilities neutral-2-100 §6 evaluate neutral-2-000 §3 applications white §7 FAQ white §4 cores neutral-2-100 §8 related neutral-2-100 ========================================================================== */ /* -------------------------------------------------------------------------- Section anchors - 96px clears the sticky header -------------------------------------------------------------------------- */ #capabilities,#applications,#parts,#resources{scroll-margin-top:96px} /* -------------------------------------------------------------------------- §2 Capabilities: six blocks, two across from 640 (2 x 3) and three from 1024 (3 x 2) -------------------------------------------------------------------------- */ @media (min-width:640px){ .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){ .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* -------------------------------------------------------------------------- §4 Cores: each part number links its brief (PDF) -------------------------------------------------------------------------- */ .i3c-parts__table .pf-ptable__part a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px} .i3c-parts__table .pf-ptable__part a:hover{color:var(--ps-color-brand-500)} /* -------------------------------------------------------------------------- §5 Proof: five figures (five across from 1024), then three resources, two across from 640 with the last taking its row, three across from 1024 -------------------------------------------------------------------------- */ @media (min-width:1024px){ .pf-facts{grid-template-columns:repeat(5,minmax(0,1fr))} } @media (min-width:640px){ .i3c-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:640px) and (max-width:1023.98px){ .i3c-res__grid > .pf-res-card:last-child:nth-child(odd){grid-column:1 / -1} } @media (min-width:1024px){ .i3c-res__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* -------------------------------------------------------------------------- §8 Related: three tiles, two across from 640 with the last taking its row, three from 1024 -------------------------------------------------------------------------- */ @media (min-width:640px) and (max-width:1023.98px){ .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))} .pf-related__list > li:last-child:nth-child(odd){grid-column:1 / -1} } @media (min-width:1024px){ .pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))} } /* phones: the large button can be wider than a 375px column; let it wrap */ @media (max-width:639.98px){ .page-banner__ctas .ps-btn--large{max-width:100%} .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0} } /* the closing band's button sits beside a text link; let it wrap at every width */ .section-headings__ctas .ps-btn--large{max-width:100%} .section-headings__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0} /* -------------------------------------------------------------------------- §7 FAQ - sits on white, below the conversion band -------------------------------------------------------------------------- */ .faq{background:var(--sv-white)} /* -------------------------------------------------------------------------- Band run for this page -------------------------------------------------------------------------- */ .pf-cap,.pf-parts,.pf-related{ background:var(--ps-color-neutral-2-100); border-block:1px solid var(--ps-color-neutral-2-300); } /* stated explicitly rather than left transparent */ .pf-applist,.pf-res{background:var(--sv-white)} /* the conversion band takes the tint the site reserves for it site-wide */ .section-headings__wrapper--cta{background:var(--ps-color-neutral-2-000)} /* I3C Interface round, 2026-09-28. I3C-01 holds the sixth capabilities card. While five show: from 640 the odd last card takes its row; from 1024 three then two, the two sharing the row (a six-column track). The six-card 3 x 2 grid above returns with it. */ @media (min-width:640px) and (max-width:1023.98px){ .pf-cap__grid > .pf-cap-block:last-child:nth-child(odd){grid-column:1 / -1} } @media (min-width:1024px){ .pf-cap__grid:has(> .pf-cap-block:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))} .pf-cap__grid:has(> .pf-cap-block:nth-child(5):last-child) > .pf-cap-block{grid-column:span 2} .pf-cap__grid:has(> .pf-cap-block:nth-child(5):last-child) > .pf-cap-block:nth-child(n+4){grid-column:span 3} } /* I3C-03: the part-number heading, table and note sit in Proof, after the figures and before the resource cards */ .pf-res .i3c-parts__head{margin-top:24px;margin-bottom:24px} .pf-res .i3c-parts__wrap{margin-bottom:40px} /* I3C-04 to -06: each group opens with its name across the table */ .i3c-parts__group th{ font:500 12px/16px var(--ps-font);letter-spacing:.08em;text-transform:uppercase; color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-100); } .pf-ptable tbody tr.i3c-parts__group:hover{background:none} .i3c-parts__table tbody + tbody .i3c-parts__group th{border-top:1px solid var(--ps-color-neutral-2-300)} /* the cores band is gone, so proof would sit white against white applications: while section#parts is absent it takes the tint. Banner white, capabilities neutral-2-100, applications white, proof neutral-2-100, the conversion band neutral-2-000, FAQ white, Related neutral-2-100. */ body:not(:has(section#parts)) .pf-res{ background:var(--ps-color-neutral-2-100); border-block:1px solid var(--ps-color-neutral-2-300); }