/* ================================================================= products.css - page-specific styles for /products. Loaded AFTER site.css (linked from products.php's own ). Only the product-portfolio-specific bits live here: the DTC layer palette chips, the "at a glance" summary table, the group labels, and the per-layer accordion header tints. Everything else uses the shared foundation vocabulary in css/site.css. ================================================================= */ /* Section labels: the "at a glance" H2 and the per-group H3 headings */ .products-label { margin-top: 30px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 1rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; } .group-heading { margin-top: 34px; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .group-heading h3 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); } /* Layer palette chips - mirror the DTC CPT colours used on /platform */ .layer-tag { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #333; vertical-align: middle; } .layer-saas { background: #f7f1c7; } .layer-core { background: #D0DCEA; } /* DS palette */ .layer-ux { background: #D5E4E1; } /* UX palette */ .layer-intel { background: #E3DDEC; } /* IC palette */ .layer-edge { background: #FAEAD5; } /* IR palette */ .layer-authoring { background: #f2e3d0; } .layer-trust { background: #EDD9D5; } /* TW palette */ .layer-template { background: #ddeede; } /* "The platform at a glance" summary table */ .summary-table { width: 100%; margin-bottom: 30px; border-collapse: collapse; } .summary-table th { background: #f8f9fa; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #555; text-align: left; padding: 10px 12px; border-bottom: 2px solid #ddd; } .summary-table td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: top; font-size: 14px; } .summary-table tr:hover td { background: #fafafa; } .summary-table td.product { font-weight: 600; color: #222; white-space: nowrap; } /* Per-layer tint on the accordion summary header */ .accordion-item.layer-bg-core > summary { background: #D0DCEA; } .accordion-item.layer-bg-ux > summary { background: #D5E4E1; } .accordion-item.layer-bg-intel > summary { background: #E3DDEC; } .accordion-item.layer-bg-edge > summary { background: #FAEAD5; } .accordion-item.layer-bg-authoring > summary { background: #f2e3d0; } .accordion-item.layer-bg-trust > summary { background: #EDD9D5; } .accordion-item.layer-bg-template > summary { background: #ddeede; } @media (max-width: 575px) { .summary-table th, .summary-table td { padding: 8px; font-size: 13px; } details.accordion-item > summary { font-size: 1rem; } }