/* ============================================================ Product page chrome — shared by every /products/{slug}/ page. Almost all of this was originally in mathpaint.css, where it was reachable only on the hardcoded /mathpaint/ page even though nothing in it is MathPaint-specific: .p-hero, .spec-list, .trio, .lead-2col, .exp-grid, .cta and the renderer panel are generic product-page components. single-product.php serves all products, so they live here now. Generated from mathpaint.css to guarantee identical values. That file still carries its own copy while the old /mathpaint/ page remains published as the Phase 4c diff reference; both are never loaded on the same page. Phase 9 removes the duplicates when the old page is retired. World accent (violet / teal) is NOT set here — it comes from data-world on via site.css. ============================================================ */ .p-hero { padding-top: clamp(40px,6vw,80px); position:relative; } .p-hero-h1 { font-family:var(--serif); font-weight:300; font-size:clamp(44px,6.6vw,92px); line-height:1.0; letter-spacing:-0.03em; max-width:15ch; } .p-hero-h1 em { font-style:italic; color:var(--accent); } .hero-cta { display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; } /* full-bleed gallery strip */ .gallery-strip { margin-top: clamp(40px,5vw,64px); } .strip { display:flex; gap:14px; overflow-x:auto; padding: 4px var(--gut) 18px; scroll-snap-type:x proximity; scrollbar-width:thin; } .strip::-webkit-scrollbar{ height:8px; } .strip::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:100px; } .strip img { height: clamp(220px,28vw,330px); aspect-ratio:1; width:auto; object-fit:cover; border-radius:14px; border:1px solid var(--rule); scroll-snap-align:start; flex:none; } .strip img.wide { aspect-ratio: 16/9; } .section-tight { padding-block: clamp(52px,6.5vw,96px); } .lead-2col { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,5vw,72px); align-items:center; } /* mac window frame */ .macwin { border-radius:14px; overflow:hidden; border:1px solid var(--rule); box-shadow: 0 40px 90px -40px rgba(40,20,80,.4); background:var(--paper-2); } .macbar { display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--paper-3); border-bottom:1px solid var(--rule); } .macbar i { width:12px;height:12px;border-radius:100px;display:block; } .macwin img { width:100%; display:block; } /* layer models grid — compact glyph + name tiles that drive the detail panel */ .models { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:44px; } .model { font:inherit; color:inherit; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; border:1px solid var(--rule); border-radius:14px; padding:18px 12px; background:var(--paper); position:relative; transition:border-color .2s, transform .2s, background .2s; } .model:hover { border-color:var(--accent); transform:translateY(-2px); } .model .gico { width:28px; height:28px; color:var(--accent); } .model-name { font-size:13px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; } .model[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in oklch,var(--accent) 10%,var(--paper)); box-shadow: inset 0 0 0 1px var(--accent); } .model .new { position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 40%,transparent); border-radius:100px; padding:2px 6px; } /* renderer detail panel — 1/3 text, 2/3 image */ .rdetail { display:grid; grid-template-columns:1fr 2fr; margin-top:16px; border:1px solid var(--rule); border-radius:16px; overflow:hidden; background:var(--paper); } .rdetail-text { padding:clamp(22px,3vw,34px); align-self:center; color:var(--ink-soft); font-size:15px; line-height:1.62; } .rdetail-text > :first-child { margin-top:0; } .rdetail-text h3, .rdetail-text h4 { font-family:var(--serif); font-weight:500; color:var(--ink); margin:0 0 8px; } .rdetail-text p { margin:0 0 10px; } .rdetail-text strong { color:var(--ink); } .rdetail-media { display:grid; background:var(--paper-2); border-left:1px solid var(--rule); } .rdetail-media img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; } .rdetail-media:empty, .rdetail-media:not(:has(img)) { min-height:280px; } /* teaser single image (replaces the thumbnail grid when set) */ .teaser-img img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--rule); display:block; } /* feature trio */ .trio { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; } .feat .fh { font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); } .feat h4 { font-family:var(--serif); font-weight:400; font-size:23px; margin-top:10px; } .feat p { color:var(--ink-soft); font-size:15px; margin-top:10px; } .compose-art { border-radius:16px; overflow:hidden; border:1px solid var(--rule); margin-top:48px; aspect-ratio:21/9; } .compose-art img { width:100%; height:100%; object-fit:cover; } /* export spec */ .exp-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; } .spec-list { border-top:1px solid var(--rule); } .spec-row { display:grid; grid-template-columns:34% 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule); } .spec-row dt { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); } .spec-row dd { margin:0; font-size:15px; color:var(--ink); } /* gallery teaser */ .teaser { border:1px dashed var(--rule); border-radius:18px; padding: clamp(28px,4vw,44px); display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center; background:var(--paper-2); } .teaser .thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .teaser .thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--rule); } .coming { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in oklch,var(--accent) 40%,transparent); border-radius:100px; padding:5px 12px; display:inline-block; } /* CTA band */ .cta { text-align:center; border-radius:24px; margin: 0 var(--gut); padding: clamp(32px,4.5vw,56px) 24px; position:relative; overflow:hidden; background: radial-gradient(120% 140% at 50% -20%, color-mix(in oklch,var(--accent) 26%,var(--paper)) 0%, var(--paper-2) 60%); border:1px solid var(--rule); } .cta h2 { font-family:var(--serif); font-weight:300; font-size:clamp(24px,3vw,38px); letter-spacing:-0.02em; } .cta h2 em { font-style:italic; color:var(--accent); } .arrow-link { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--accent); } .arrow-link svg { width:16px;height:16px; transition:transform .2s ease; } .arrow-link:hover svg { transform:translateX(4px); } @media (max-width: 980px){ .models{grid-template-columns:repeat(4,1fr);} .lead-2col,.exp-grid,.teaser{grid-template-columns:1fr;} .trio{grid-template-columns:1fr;} } @media (max-width: 760px){ .rdetail{grid-template-columns:1fr;} .rdetail-media{border-left:0; border-top:1px solid var(--rule);} .rdetail-media img{min-height:220px;} } @media (max-width: 560px){ .models{grid-template-columns:repeat(3,1fr);} } /* ---- Additions for the generated header (single-product.php) ---- */ .p-icon { width:44px; height:44px; border-radius:23%; display:block; border:1px solid var(--rule); } .p-icon-lg { width:52px; height:52px; margin:0 auto 16px; } .platform-pills { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none; } .platform-pills li { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); border:1px solid var(--rule); border-radius:100px; padding:5px 12px; } .price-tag { font-family:var(--mono); font-size:13px; color:var(--ink-mute); } .p-hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,60px); align-items:center; padding-block: clamp(40px,5vw,72px); } .p-hero-art { display:grid; place-items:center; } .p-hero-art img { width:100%; max-width:560px; border-radius:18px; border:1px solid var(--rule); box-shadow:0 30px 70px -34px rgba(30,50,60,.4); display:block; } @media (max-width: 900px) { .p-hero-grid { grid-template-columns:1fr; } .p-hero-art { margin-top: clamp(28px,4vw,48px); } } /* The authored block body. Mirrors .ma-prose rhythm without imposing it on the pattern-built sections, which bring their own layout. */ .ma-product-body > p, .ma-product-body > ul, .ma-product-body > ol, .ma-product-body > h2, .ma-product-body > h3 { max-width: 68ch; margin-inline:auto; padding-inline:var(--gut); } .ma-product-body > * + * { margin-top:1.25em; } .ma-product-body > section + section { margin-top:0; } /* ---- .artgrid — image grid used by the product-body pattern. Duplicated from home.css, which is front-page-only; the image grid is a general product-body component. Values kept identical. ---- */ .artgrid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; } .artgrid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--rule); display:block; } .artgrid .wide { grid-column: span 2; aspect-ratio: 2/1; } @media (max-width: 900px){ .artgrid { grid-template-columns: repeat(2,1fr); } } /* ---- Block-pattern support (Phase 4b) ---------------------------- Pattern containers are core/group blocks, so WordPress gives them `is-layout-flow` and theme.json's blockGap adds a top margin to every child. Inside a grid that offsets the items. These class selectors beat the zero-specificity `:where(.is-layout-flow) > *` rule that sets it. */ .trio > *, .artgrid > *, .lead-2col > *, .exp-grid > *, .spec-list > * { margin-block-start: 0; } /* core/image renders

; the grid item is the figure. */ .artgrid figure, .art-frame figure { margin: 0; } .art-frame figure img { display: block; width: 100%; } /* Spec rows authored as blocks. The field-driven header spec uses real dt/dd; a block-built row can't (dl is not a core block), so paragraphs carrying these classes get the identical treatment. */ .spec-row .spec-dt { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); margin:0; } .spec-row .spec-dd { margin:0; font-size:15px; color:var(--ink); } .spec-list .spec-row:last-child { border-bottom: 1px solid var(--rule); } /* ---- .ma-band — full-bleed tinted section for block-authored bodies. Reproduces the inline background/border treatment the old product page templates applied to their Compose and "Everywhere" sections. Escapes .ma-product-body's inline padding so it spans the viewport. ---- */ .ma-band { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: clamp(52px,6.5vw,96px); padding-inline: var(--gut); margin-block: clamp(52px,6.5vw,96px); } .ma-band > * { max-width: var(--maxw); margin-inline: auto; } .ma-band-center { text-align: center; } .ma-band-center .lede, .ma-band-center .muted { margin-inline: auto; } .compose-art { margin-top: 48px; } /* ---- .strip with block-authored images ---------------------------- The original markup put directly inside .strip, so the flex sizing above targets `img`. Block markup wraps each image in a

, which becomes the flex item instead — and without these rules the figures shrink to fit, truncating every image. The figure now carries the size and frame; the img just fills it. ---- */ .strip > figure { flex: none; margin: 0; height: clamp(220px,28vw,330px); aspect-ratio: 1; scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); } .strip > figure.wide { aspect-ratio: 16/9; } .strip > figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; border: 0; border-radius: 0; } /* ---- Block

wrappers, generally -------------------------- Same root cause as the .strip fix above, and it affects every ported image: these containers style a single `img` directly, but block markup inserts a

between them. `display:contents` removes the figure from layout so the img is once again the container's layout child and every existing rule applies unchanged. ---- */ .macwin > figure, .compose-art > figure, .teaser .thumbs > figure, .drill-shot > figure, .lx-everywhere > figure, .lx-intel-img > figure, .art-frame > figure { display: contents; } /* .artgrid is the exception: the figure must stay a grid item, because the `.wide` span is carried on the figure, not the image. */ .artgrid > figure { margin: 0; } .artgrid > figure img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--rule); display:block; } .artgrid > figure.wide img { aspect-ratio: 2/1; }