cards, so on a white page that card was invisible and the same component read as a raised surface on one page and as nothing at all on another. The surface ladder is exactly three steps, and there is no fourth: field #f0f5fa -> card #fff -> inset --ipt-surface, where the inset may only ever appear INSIDE a card. #f2f7fc against this field is a two-point difference AND lighter than the thing it sits in, so on the field it is both invisible and inverted. This exact value is load-bearing, not a preference: --ipt-muted-light was resolved against it as the worst of its three backgrounds (4.63:1). A different grey re-opens that. */ --ipt-red-fill: #c93a3a; /* red BEHIND WHITE TEXT. --ipt-red is only 3.21:1 with white, so it fails the 4.5 minimum on every button under 18.66px bold — which was all of them except the homepage hero. This is 5.06:1. --ipt-red stays as the accent colour for fills that carry no text. */ --ipt-red-fill-hover: #ad2f2f; /* 6.51:1 — deepens, matching the hover rule. Replaces --ipt-red-hover #e04f4f, which was LIGHTER than the new fill and would have inverted the hover. */ --ipt-red-ink: #b52d2d; /* red AS TEXT, on a pale ground. --ipt-red-fill is a FILL — the comment above says so — and it was being used as an ink in six places, where it measures 4.49:1 on the red badge's own #fdeeee and clears 4.5 only just on the others. A fill and an ink are different jobs and now have different tokens. 5.52 on #fdeeee, 5.59 on the notice #fdf0f0, 5.67 on the page field, 6.22 on white — which also puts the red state in line with its siblings rather than below them: --good 4.58, --wait 5.53. */ --ipt-muted-light: #56718c; /* tertiary text: file hints, dates, counts, percentages. Now IDENTICAL to --ipt-muted, and that is the finding, not an oversight. It was #7d94ab (3.14:1 on white). #5b748d fixed white and --ipt-surface but still missed on the page background #f0f5fa (4.42). The lightest value clearing 4.5 on all three is #5a738c, which clears the worst case by 0.01 — no margin at all. So there is no room for a third grey: the accessible range between --ipt-muted and unreadable is narrower than one perceptible step. Tertiary rank comes from size and weight (11-14px against 15-16px), which the CSS already does. The token is kept so its ~35 declarations keep their intent; a later pass could fold them into --ipt-muted. Backgrounds checked: #fff 5.08, --ipt-surface 4.71, page bg #f0f5fa 4.63. */ --ipt-line-strong: #b9d2ea; /* dashed dropzone border */ --ipt-surface: #f2f7fc; /* inset panel fill */ } /* Astra title-cases button labels; respect what was actually written. */ .wp-block-button__link, .ast-custom-button { text-transform: none; letter-spacing: 0; } /* --------------------------------------------------------------------------- Header branding — treat logo + wordmark as ONE target. Astra renders them as two separate elements (a.custom-logo-link and an anchor inside span.site-title), both pointing home, so hovering either one left the other looking inert. Hang the hover state on the shared parent so the pair lights up together. :focus-within does the same for keyboard users. Hover direction is DEEPEN, never dim — matching the buttons, which darken. Fading an element on hover is the visual language of "disabled", and brightening the wordmark to --ipt-blue dropped its contrast on white from 7.8:1 to 4.0:1, i.e. hovering made it harder to read. Deepening raises contrast instead. The logo gets a slight scale rather than an opacity change: movement reads as responsive without dimming anything. --------------------------------------------------------------------------- */ .site-branding .custom-logo-link img, .site-branding .site-title a { transition: color 0.18s ease, transform 0.18s ease; } .site-branding:hover .site-title a, .site-branding:focus-within .site-title a { color: var(--ipt-blue-deep); } .site-branding:hover .custom-logo-link img, .site-branding:focus-within .custom-logo-link img { transform: scale(1.04); } /* Respect users who have asked for less motion. */ @media (prefers-reduced-motion: reduce) { .site-branding .custom-logo-link img, .site-branding .site-title a { transition: none; } .site-branding:hover .custom-logo-link img, .site-branding:focus-within .custom-logo-link img { transform: none; } } /* --------------------------------------------------------------------------- Primary navigation. Was inheriting Astra's stock slate (#334155) at body weight in the BODY font, so it read as page text rather than site chrome. Montserrat 600 matches the headings and gives it presence without enlarging the header, which would crowd the Go Pro button. --------------------------------------------------------------------------- */ .main-header-menu > .menu-item > .menu-link, .ast-nav-menu > .menu-item > .menu-link, .main-header-menu .menu-link { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; color: var(--ipt-ink); transition: color 0.18s ease; } /* --------------------------------------------------------------------------- The narrowest desktop width. Astra's mobile header takes over at 921px, so 1024 is the tightest the full row ever gets — and there it squeezed the Go Pro button from 118px to 88px, breaking "Go Pro" onto two lines and pushing the header to 161px tall. With a cart in the header the chip dropped to a second row instead. Neither element should be the one that gives: the menu hands back the space. --------------------------------------------------------------------------- */ .ast-custom-button, .ipt-cart-chip { white-space: nowrap; flex-shrink: 0; } /* The row needs 845px for eight items at the default 16px of link padding, and stops having it just under 1280 — worst case being a signed-in visitor with something in the cart, where "My Account" and the cart chip are both present. Two tiers so the type only drops a point at the very bottom of the desktop range. */ @media (min-width: 1121px) and (max-width: 1280px) { body .main-header-menu > .menu-item > .menu-link { padding-left: 10px; padding-right: 10px; } } @media (min-width: 922px) and (max-width: 1120px) { body .main-header-menu > .menu-item > .menu-link { padding-left: 7px; padding-right: 7px; font-size: 15px; } body .ast-header-button-1 .ast-custom-button { padding-left: 20px; padding-right: 20px; font-size: 15px; } .ipt-cart-chip { padding-left: 14px; padding-right: 14px; } } /* Below 1024 the row runs out of space in one state only: signed in AND holding something, where "My Account" and the cart chip are both in the menu. The word "Cart" goes rather than the type size — a trolley with a count on it is not ambiguous, and the link keeps its accessible name. */ @media (min-width: 922px) and (max-width: 1023px) { body .main-header-menu > .menu-item > .menu-link { padding-left: 5px; padding-right: 5px; } .ipt-cart-chip .ipt-cart-chip__t { display: none; } .ipt-cart-chip { padding-left: 12px; padding-right: 12px; gap: 6px; } .main-header-menu > .ipt-nav-account::before, .main-header-menu > .ipt-nav-utility::before { margin-left: 4px; margin-right: 4px; } .main-header-menu .ipt-nav-account__my { display: none; } } .main-header-menu > .menu-item > .menu-link:hover, .main-header-menu > .menu-item > .menu-link:focus-visible, .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-nav-menu .menu-item.current-menu-item > .menu-link { color: var(--ipt-blue-link); } /* --------------------------------------------------------------------------- Footer. Headings were Astra's stock #1e293b; links were the one element already using a brand colour. Unified: headings in logo blue, links in ink, both hovering to the same accessible blue as the nav so there is ONE interaction language. --------------------------------------------------------------------------- */ .ast-builder-footer-grid .widget-title, .site-footer .widget-title, .site-footer h2 { color: var(--ipt-blue-dark); font-family: 'Montserrat', sans-serif; font-weight: 600; } .site-footer .menu-link, .site-footer .widget a, .ast-builder-footer-grid a { color: var(--ipt-ink); transition: color 0.18s ease; } .site-footer .menu-link:hover, .site-footer .widget a:hover, .ast-builder-footer-grid a:hover, .site-footer .menu-link:focus-visible, .site-footer .widget a:focus-visible { color: var(--ipt-blue-link); } /* =========================================================================== HOME / LANDING SECTIONS Moved here from an inline