/** * Plugin landing pages. * * Loaded only on /plugins/ and the six plugin landing pages. Every colour here * derives from --agp-accent, which is set once per page by the body class in * functions.php, so a palette change is a one-line edit below. * * Deliberately no theme.json tokens are redefined. Sizes and families come from * the presets WordPress already generates. * * Scope: hero and closing CTA band. Remaining blocks land with the generator. */ /* ----------------------------------------------------------------------------- * 1. Accent system * -------------------------------------------------------------------------- */ /* The six ink colours, declared once. Every accent anywhere on these pages — * including the index page's six-stop gradient — references one of these, so a * palette change is a single edit and no hex is repeated. Each clears 6:1 on * white, which is why they are darker than the icon colours they came from. */ .agp-plugin, .agp-plugins-index { --agp-ink-listenup: #B31468; --agp-ink-guard-dog: #264F76; --agp-ink-lumenare-search: #15696E; --agp-ink-open-accessibility: #B32E06; --agp-ink-the-hits-list: #0250B4; --agp-ink-set-tag-order: #63418D; } .agp-plugin { --agp-accent: #111111; /* fallback: an unmapped page stays monochrome */ --agp-g1: #111111; --agp-g2: #111111; } /* Set on for a landing page, and on each card of the index page, where * six accents have to coexist. Custom properties cascade either way. */ .agp-plugin--listenup { --agp-accent: var(--agp-ink-listenup); --agp-g1: #FD51A3; --agp-g2: #DE40CC; } .agp-plugin--guard-dog { --agp-accent: var(--agp-ink-guard-dog); --agp-g1: #3C84C1; --agp-g2: #264F76; } .agp-plugin--lumenare-search { --agp-accent: var(--agp-ink-lumenare-search); --agp-g1: #C5FC47; --agp-g2: #30BFC7; } .agp-plugin--open-accessibility { --agp-accent: var(--agp-ink-open-accessibility); --agp-g1: #ED530D; --agp-g2: #E52409; } .agp-plugin--the-hits-list { --agp-accent: var(--agp-ink-the-hits-list); --agp-g1: #1FCFFA; --agp-g2: #0250B4; } .agp-plugin--set-tag-order { --agp-accent: var(--agp-ink-set-tag-order); --agp-g1: #7A52AC; --agp-g2: #63418D; } /* Two body tones between Contrast and Accent 4. Local to these pages on * purpose — they are not general-purpose theme tokens. */ .agp-plugin, .agp-plugins-index { --agp-body: #4A4A4A; /* 8.9:1 on white */ --agp-lede: #3C3C3C; /* 11.0:1 on white */ /* Ghost button boundary. 45% composites to #949494 = 3.03:1 on white, * which clears the 3:1 minimum for a UI component with no margin at all. * Raise this, not the border colour, if it ever needs more room. */ --agp-rule-strong: 45%; } /* ----------------------------------------------------------------------------- * 2. Buttons * -------------------------------------------------------------------------- */ .agp-btn { /* The theme does not put border-box on raw anchors, and min-height on a * content box would add its full 44px on top of the padding. */ box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; min-height: 44px; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; } .agp-btn--primary { padding: 1rem 2.25rem; background: var(--agp-accent); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--agp-accent) 26%, transparent); } .agp-btn--primary:hover { background: color-mix(in srgb, var(--agp-accent) 85%, transparent); color: #fff; } .agp-btn--ghost { /* Subtract the border, exactly as theme.json's outline variation does. */ padding: calc(1rem - 1px) calc(2.25rem - 1px); border: 1px solid color-mix(in srgb, #111 var(--agp-rule-strong), transparent); color: var(--wp--preset--color--contrast); } .agp-btn--ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent); } .agp-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent-4); outline-offset: 2px; } /* ----------------------------------------------------------------------------- * 3. Hero * -------------------------------------------------------------------------- */ .agp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 72px; align-items: center; padding-top: 76px; } /* Phase 1 for pages with no drawn visual: one column, no empty slot. */ .agp-hero--solo { grid-template-columns: minmax(0, 1fr); } .agp-hero--solo .agp-hero__title { max-width: 16em; } .agp-hero--solo .agp-hero__lede { max-width: 34em; } .agp-hero__tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(140deg, var(--agp-g1), var(--agp-g2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--agp-accent) 34%, transparent); color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 26px; } .agp-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--agp-accent); margin: 0 0 14px; } .agp-hero__title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 400; line-height: 1.06; /* hero-only; theme heading default is 1.125 */ letter-spacing: -0.9px; margin: 0 0 20px; } /* The marked phrase is a background gradient, not a border. One per headline. * * Sized in em, not percent. A is an inline box whose height comes from * the font metrics (~65px here), not from the 1.06 line-height (~51px), so a * percentage stop lands mid-glyph and reads as a strikethrough. Anchoring the * band to the font size keeps it under the text at any scale. */ .agp-hero__title mark { /* background-image alone does not reset the UA's yellow mark background. */ background-color: transparent; background-image: linear-gradient( to top, color-mix(in srgb, var(--agp-accent) 24%, #fff), color-mix(in srgb, var(--agp-accent) 24%, #fff) ); background-repeat: no-repeat; background-size: 100% var(--agp-swash-depth, 0.46em); background-position: 0 calc(100% - var(--agp-swash-lift, 0.13em)); color: inherit; padding: 0 3px; } .agp-hero__lede { font-size: 19px; font-weight: 300; line-height: 1.5; color: var(--agp-lede); margin: 0 0 30px; } .agp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; } .agp-fineprint { font-size: 13.5px; font-weight: 300; color: var(--wp--preset--color--accent-4); margin: 0; } /* ----------------------------------------------------------------------------- * 4. Closing CTA band * -------------------------------------------------------------------------- */ .agp-cta-band { background: var(--agp-accent); padding: 76px 0; text-align: center; margin-top: 96px; } .agp-cta-band__title { font-size: 36px; font-weight: 400; line-height: 1.125; letter-spacing: -0.4px; color: #fff; max-width: 18em; margin: 0 auto 28px; } .agp-cta-band .agp-btn--primary { background: #fff; color: var(--agp-accent); box-shadow: none; } .agp-cta-band .agp-btn--primary:hover { background: color-mix(in srgb, #fff 90%, var(--agp-accent)); color: var(--agp-accent); } .agp-cta-band .agp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ----------------------------------------------------------------------------- * 4b. Section headings * -------------------------------------------------------------------------- */ .agp-section-title { font-size: var(--wp--preset--font-size--x-large); font-weight: 400; line-height: 1.125; letter-spacing: -0.4px; margin: 96px 0 28px; } /* ----------------------------------------------------------------------------- * 4c. Spec strip * -------------------------------------------------------------------------- */ .agp-specs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 64px 0 0; padding: 22px 0; border-top: 1px solid var(--wp--preset--color--accent-6); border-bottom: 1px solid var(--wp--preset--color--accent-6); } .agp-spec { margin: 0; } .agp-spec__label { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--accent-4); margin: 0 0 7px; } .agp-spec__value { font-family: var(--wp--preset--font-family--fira-code); font-size: 15px; font-weight: 500; margin: 0; } /* The fifth cell is the differentiator, and the only one that takes colour. */ .agp-spec__value--accent { color: var(--agp-accent); } /* ----------------------------------------------------------------------------- * 4d. Highlight cards * -------------------------------------------------------------------------- */ .agp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .agp-card { padding: 28px; border: 1px solid color-mix(in srgb, #111 13%, transparent); border-radius: 14px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } /* A trailing row of two would leave a hole; the last card fills it. */ .agp-card--wide { grid-column: span 2; } .agp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--agp-accent) 45%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, #111 8%, transparent); } .agp-card__icon { display: block; color: var(--agp-accent); margin-bottom: 16px; } .agp-card__title { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; margin: 0 0 9px; } .agp-card__body { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--agp-body); margin: 0; } .agp-card__body code { font-family: var(--wp--preset--font-family--fira-code); font-size: 0.88em; background: var(--wp--preset--color--accent-5); padding: 1px 5px; border-radius: 4px; } /* ----------------------------------------------------------------------------- * 4e. Feature table * -------------------------------------------------------------------------- */ .agp-table { width: 100%; border-collapse: collapse; margin: 0; } .agp-table th { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--accent-4); text-align: left; padding: 0 0 12px 16px; border-bottom: 1px solid var(--wp--preset--color--contrast); } .agp-table td { padding: 17px 0 17px 16px; border-bottom: 1px solid var(--wp--preset--color--accent-6); vertical-align: top; font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--agp-body); } .agp-table th:first-child, .agp-table td:first-child { width: 32%; } .agp-table__feature { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; color: var(--wp--preset--color--contrast); } .agp-table tbody tr { transition: background-color .16s ease; } .agp-table tbody tr:hover td { background: color-mix(in srgb, var(--agp-accent) 4%, transparent); } /* The 16px left padding is what makes room for this without shifting text. */ .agp-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--agp-accent); } .agp-table code { font-family: var(--wp--preset--font-family--fira-code); font-size: 0.88em; background: var(--wp--preset--color--accent-5); padding: 1px 5px; border-radius: 4px; } /* ----------------------------------------------------------------------------- * 4f. Audience grid * -------------------------------------------------------------------------- */ .agp-audience { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .agp-audience__item { border-top: 2px solid color-mix(in srgb, var(--agp-accent) 55%, #fff); padding-top: 16px; } .agp-audience__item:first-child { border-top-color: var(--agp-accent); } .agp-audience__numeral { display: block; font-family: var(--wp--preset--font-family--fira-code); font-size: 12px; color: var(--agp-accent); margin-bottom: 10px; } .agp-audience__label { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.1px; margin: 0 0 8px; } .agp-audience__body { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--agp-body); margin: 0; } /* ----------------------------------------------------------------------------- * 4g. Release note * -------------------------------------------------------------------------- */ .agp-release { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; background: var(--wp--preset--color--accent-5); border-radius: 16px; padding: 40px 44px; margin-top: 96px; } .agp-release__heading { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.2px; margin: 0 0 12px; } .agp-release__chip { display: inline-block; font-family: var(--wp--preset--font-family--fira-code); font-size: 13px; color: #fff; background: var(--agp-accent); border-radius: 999px; padding: 3px 12px; margin: 0; } .agp-release__lead { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--agp-body); margin: 0 0 16px; } /* Heavier and darker than the lead: this is the "why update today" line. */ .agp-release__punch { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--wp--preset--color--contrast); margin: 0; } /* ----------------------------------------------------------------------------- * 4h. /plugins/ index * -------------------------------------------------------------------------- */ .agp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The only multi-colour device in the system, and it appears exactly once. */ .agp-plugins-index .agp-hero__title mark { background-image: linear-gradient( to right, color-mix(in srgb, var(--agp-ink-listenup) 30%, #fff), color-mix(in srgb, var(--agp-ink-guard-dog) 30%, #fff), color-mix(in srgb, var(--agp-ink-lumenare-search) 30%, #fff), color-mix(in srgb, var(--agp-ink-open-accessibility) 30%, #fff), color-mix(in srgb, var(--agp-ink-the-hits-list) 30%, #fff), color-mix(in srgb, var(--agp-ink-set-tag-order) 30%, #fff) ); } .agp-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 72px 0 0; padding: 0; } /* Flex column with the footer pushed down is what fixes the ragged link * baselines the old grid had. * * No `height: 100%` here, despite the handoff calling for it. Grid items * already stretch to the row, and adding height:100% on top resolves against a * content-sized row that the item itself defines — the cards then overflow * their own grid area and overlap the row below by ~40px. Stretch alone gives * equal heights correctly. */ .agp-index-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid color-mix(in srgb, #111 13%, transparent); border-radius: 16px; transition: border-color .18s ease, box-shadow .18s ease; } .agp-index-card:hover { border-color: color-mix(in srgb, var(--agp-accent) 45%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, #111 8%, transparent); } /* The card is not a link, so it must not claim the pointer. */ .agp-index-card:focus-within { border-color: color-mix(in srgb, var(--agp-accent) 45%, transparent); } .agp-index-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .agp-index-card__tile { margin-bottom: 0; } .agp-index-card__category { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp--preset--color--accent-4); } .agp-index-card__title { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.2px; margin: 0 0 9px; } .agp-index-card__body { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--agp-body); margin: 0 0 22px; } .agp-index-card__foot { margin: auto 0 0; } /* An accent text link rather than a black pill: six black buttons compete with * each other and flatten the grid, and the icon tiles now carry the colour. * Padded to a 44px target because it is the card's only control. */ .agp-index-card__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--agp-accent); text-decoration: none; } .agp-index-card__link:hover { text-decoration: underline; } .agp-index-card__arrow { transition: transform .18s ease; } .agp-index-card__link:hover .agp-index-card__arrow { transform: translateX(3px); } .agp-index-card__link:focus-visible { outline: 2px solid var(--agp-accent); outline-offset: 3px; border-radius: 4px; } /* ----------------------------------------------------------------------------- * 5. Responsive * -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .agp-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); gap: 48px; } .agp-hero--solo { grid-template-columns: minmax(0, 1fr); } .agp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agp-card--wide { grid-column: auto; } .agp-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agp-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .agp-audience { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } } @media (max-width: 781px) { .agp-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 48px; } .agp-hero__title { font-size: 33px; } .agp-section-title { font-size: 25px; margin-top: 64px; } .agp-cta-band { padding: 56px 0; } .agp-cta-band__title { font-size: 28px; } .agp-cards { grid-template-columns: minmax(0, 1fr); } .agp-index-grid { grid-template-columns: minmax(0, 1fr); margin-top: 48px; } .agp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agp-audience { grid-template-columns: minmax(0, 1fr); } .agp-release { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 28px; margin-top: 64px; } } /* Feature table below 600px. * * The content is prose, not data, so a horizontal scroller would hide half of * it. Stacking is the right answer — but changing `display` on table elements * drops their implicit roles, which is why every element carries an explicit * ARIA role in the markup. The header row is visually hidden rather than * display:none so the column headers stay in the accessibility tree. */ @media (max-width: 599px) { .agp-table, .agp-table thead, .agp-table tbody, .agp-table tr, .agp-table th, .agp-table td { display: block; } .agp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .agp-table tr { padding: 16px 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); } .agp-table tr:last-child { border-bottom: 0; } .agp-table th:first-child, .agp-table td:first-child { width: auto; } .agp-table td { padding: 0; border-bottom: 0; } .agp-table__feature { font-size: 16px; margin-bottom: 4px; } .agp-table tbody tr:hover td { background: none; } .agp-table tbody tr:hover td:first-child { box-shadow: none; } } /* ----------------------------------------------------------------------------- * 6. Motion * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .agp-btn, .agp-card, .agp-index-card, .agp-index-card__arrow, .agp-table tbody tr { transition: none; } .agp-card:hover { transform: none; } .agp-index-card__link:hover .agp-index-card__arrow { transform: none; } }