/* * V2: the static nebula backdrop. * * One fixed layer behind the whole site, carrying the picture. Everything else * here exists because the V1 site is light: seventeen opaque bands, dark Ink * body copy and a dark header lockup would each have hidden or broken on a dark * ground. * * THE VEIL IS GONE, removed by instruction on 2026-09-04 so the backdrop shows * its own colours. It was a flat rgba(0, 18, 20, 0.62) laid over the picture in * the same declaration, and it used to be the site's contrast floor: the * 6.13:1 tightest pair measured across four pages and 54 text elements at * 1280x900 was measured through it. * * What replaced it as the floor is the backdrop asset itself. Since 2026-09-04 * technical/generate-site-backdrop.py compresses the source's luminance to a * 0.26 cap and verifies that cap on the encoded WebP, so the picture arrives * already dark and the veil was darkening an image that no longer needed it. * Measured on the shipped asset with no veil at all: Off White body copy holds * 4.5:1 across 99.84% of the frame and never drops under the 3:1 large-text * floor anywhere in it, and the pixels that do fail are star cores and single * nebula filaments rather than any patch wide enough to sit behind a word. * * WHAT THIS DID COST, and it is not fixed: Light Aqua. It was 4.65:1 at the * brightest pixel through the veil and is 1.42:1 without one, failing 4.5:1 * over 13% of the frame on a plain band and 27% on a glass card. That lands on * the fee amounts, which is the tightest pair on the site and is commented * where it sits below. Moving those to Off White is the fix and it has not been * made, because the accent colour is the client's call. If the veil is ever * reinstated, or the 0.26 cap in the generator is raised, re-measure both * colours on a glass card as well as on a plain band before shipping. * * Do not move the backdrop to `background-attachment: fixed` on html. iOS Safari * sizes a fixed attachment to the document rather than the viewport, which both * breaks the framing and reintroduces the bug this replaced: on a 1543px-tall * mobile hero the old cover image magnified 3.95x and showed 14% of the frame, * so the lower half of the phone hero was empty sky. */ /* scrollbar-gutter reserves the scrollbar's width whether or not a scrollbar is drawn. Core locks body scroll when the menu opens, which removed the scrollbar and widened the viewport by its width, so the whole page jumped sideways on every open and back on every close. Reserving the gutter means nothing moves. Overlay scrollbars, which is every iOS device and any trackpad Mac, never had the problem and are unaffected. */ html { background: #001416; } /* Reserve the scrollbar's width so the page cannot shift sideways when core locks body scroll to open the menu. Desktop only: phones and tablets draw overlay scrollbars that take no width, so there is nothing to reserve, and reserving anyway cost 15px of the right gutter on a 390px screen, which is what pushed the lockup's strapline up against the edge. */ @media (min-width: 601px) { html { scrollbar-gutter: stable; } } body { background: transparent !important; color: var(--wp--preset--color--off-white) !important; } /* One fixed layer carries the nebula, and nothing over it. background-attachment: fixed is unreliable on iOS Safari, which sizes it to the document rather than the viewport; a position: fixed pseudo-element behaves correctly everywhere. The flat rgba(0, 18, 20, 0.62) gradient that used to sit over the image in this same declaration was removed on 2026-09-04, so the picture shows its own colours. The contrast reasoning is in the file header: the floor now lives in the generator's 0.26 luminance cap rather than here. */ body::before { content: ""; position: fixed; left: 0; right: 0; z-index: 0; pointer-events: none; background: /* The ?v= is not decoration. 20i edge-caches static assets under the plain path and goes on serving the previous build after the file is replaced on disk, so bump this number every time the backdrop is regenerated or visitors keep the old picture. v=2 is HeroBg3, the client's 2026-09-03 source. Do NOT use ?w=, which is a core WordPress query var meaning week number and returns a genuine 404. */ #001416 url('../images/site-nebula-backdrop.webp?v=2') center center / cover no-repeat; /* Parallax headroom. The layer is drawn 48vh taller than the viewport and hung 24vh above it so motion.js can drift it downwards by 24vh without ever pulling an edge into frame. inset:0 plus a translate would show the flat #001416 fallback along the top. The travel was doubled on 2026-08-31 and these two numbers were doubled with it; they must always be twice the travel in initBackdropParallax() and the same again in height. translate3d, not top/margin: it stays on the compositor, which is what keeps a full-viewport layer at 60fps while the whole document scrolls. */ top: -24vh; height: 148vh; transform: translate3d(0, var(--eft-matrix-backdrop-y, 0px), 0); will-change: transform; } /* A reader who prefers reduced motion gets the layer pinned flat, matching the module in motion.js, which creates no tween for them at all. This also covers the case where the script never runs. */ @media (prefers-reduced-motion: reduce) { body::before { top: 0; height: 100%; transform: none; will-change: auto; } } .wp-site-blocks { position: relative; z-index: 1; } /* Bands now only tint for variation. The light bands are fully transparent, so the backdrop runs through them at its own strength, as it does behind the header. The dark bands and the footer sit at 0.50, and that difference is now the whole of the section alternation. Since the veil was removed on 2026-09-04 these 0.50 tints are the only thing between the picture and the text on a dark band, and the light bands have nothing at all. Contrast there rests entirely on the 0.26 luminance cap baked into the backdrop asset by technical/generate-site-backdrop.py. Raise that cap and the light bands are the first thing to re-measure. */ .wp-block-group.has-off-white-background-color, .wp-block-group.has-white-background-color, .wp-block-group.has-pale-mint-background-color, .wp-block-group.has-soft-mint-background-color { background-color: transparent !important; } .wp-block-group.has-deep-teal-background-color, .wp-block-group.has-deepest-teal-background-color { background-color: rgba(0, 16, 18, 0.50) !important; } /* Header and footer. */ /* The header has no ground of its own: the backdrop runs behind the menu. The override is still required, because parts/header.html sets backgroundColor "off-white" on this group and would otherwise paint an opaque band across the top. The submenu panel below keeps its own solid ground, since a dropdown over a picture is unreadable without one. */ /* The selector must outrank the band rule above, not just carry !important. This element is
, so it also matches .wp-block-group.has-off-white-background-color at 0-2-0. A plain .eft-matrix-header is 0-1-0 and loses even with !important, which is why the header kept painting a band tint after the tint was "removed". */ header.wp-block-group.eft-matrix-header { background-color: transparent !important; } /* The header logo is the original artwork again, at the client's request on 2026-08-31. It is dark teal on a dark ground and measures about 2.4:1, so the wordmark is hard to read; the recoloured light lockup is still on disk at assets/images/eft-matrix-logo-horizontal-light.webp if it is wanted back. */ .eft-matrix-header a:not(.wp-block-button__link) { color: var(--wp--preset--color--off-white) !important; } /* The header CTA keeps its off-white pill and dark label; the rule above must not repaint it, or it becomes off-white on off-white. */ .eft-matrix-header .wp-block-button__link { color: var(--wp--preset--color--ink) !important; } .eft-matrix-header .wp-block-navigation__submenu-container { background-color: rgba(0,18,20,.96) !important; border-color: rgba(250,252,251,.18) !important; } /* The footer is TWO nested elements: the template-part wrapper and the .eft-matrix-footer group inside it. Veiling both stacked 0.70 over 0.70 for roughly 0.91 effective, far darker than intended. Only the inner group is painted, and its selector has to outrank .wp-block-group.has-deepest-teal-background-color (0-2-0) for the same reason the header did. */ footer.wp-block-group.eft-matrix-footer { background-color: rgba(0, 14, 16, 0.50) !important; } /* Text inversion. */ .has-ink-color, .has-deepest-teal-color, .has-deep-teal-color, .has-muted-color, h1, h2, h3, h4, p, li, td, th, figcaption, strong, em { color: var(--wp--preset--color--off-white) !important; } /* Brand gold on every h1 and h2, by instruction on 2026-09-04. #d4af37 is the gold this site already uses as a colour rather than as a plate: the strapline separators in the header take it, and it is the base the filled buttons are drawn from. IT NEEDS A DESCENDANT SELECTOR, not a bare h1, h2. Almost every heading on the site carries .has-deepest-teal-color from its block attributes, and WordPress emits those preset classes with !important, so a 0-0-1 tag selector loses on specificity even carrying !important of its own. .wp-site-blocks h1 is 0-1-1 and clears it. Verified on the rendered page across all ten heading shapes rather than assumed, because core block output outranks this stylesheet in more than one place. CONTRAST, measured on the shipped backdrop with the veil gone. Display headings are large text, so the AA threshold is 3:1, and gold holds it across 98.84% of the frame on a plain band and 96.23% on a glass card. It does not reach 4.5:1: it is under that across 11% of a plain band. That is the same trade as the button label, accepted for the brand rather than overlooked. THE FOOTER IS THE ONE PLACE TO LOOK AT AGAIN. Its 26 headings are 12px, so they are NOT large text and 4.5:1 applies to them. They pass anyway, because the footer keeps its own 0.50 tint and gold is under 4.5:1 across only 0.06% of that ground. They were Light Aqua and are now gold, which is a visible change to the footer rather than a contrast problem. Scope this rule out of `footer` if that was not wanted. */ .wp-site-blocks h2 { color: #d4af37 !important; } /* h1 is white, by instruction on 2026-09-04, replacing the #008B89 it carried for part of the same day. That value sat inside the backdrop's own luminance range, so roughly two fifths of every page title was on ground it could not be told apart from; white is the one value that clears 3:1 across 100% of the ground behind every h1 on the site, measured rather than assumed. It is pure #ffffff rather than the Off White token, so the h1 reads a step brighter than the body copy the rule above sets to Off White. Swap in var(--wp--preset--color--off-white) if headings and body should match; it measures the same 100% coverage, at a worst pixel of 3.95:1 rather than 4.07:1. GOLD SINCE 2026-10-02, by instruction ("all page titles to Gold"). Same #d4af37 as the h2 rule above, so the measurement there applies: 3:1 across about 99% of the backdrop, which is the threshold for display-size text. Titles on the LIGHT heroes (home, contact) cannot take this gold, which is 1.98:1 on cream; home.css and contact.css give those a deeper gold. To go back to white, restore #ffffff here. */ .wp-site-blocks h1 { color: #d4af37 !important; } .has-primary-teal-color, .has-mid-teal-color { color: var(--wp--preset--color--light-aqua) !important; } /* The fee amounts were Deep Teal for 8.36:1 on a white card. On the dark ground that is 1.5:1, so they move to Light Aqua, which is the accent this theme already uses for emphasis on dark grounds (the footer headings). THIS IS THE TIGHTEST PAIR ON THE SITE and since the veil came off on 2026-09-04 it no longer passes. Light Aqua on the glass card over the bare backdrop measures 1.29:1 at the brightest pixel and is under 4.5:1 across 27% of the frame, so an amount that lands on a bright nebula is hard to read. Off White holds 4.5:1 over 99.6% of the same card and is the one line fix: swap the token below. It was left as it is because the accent colour is the client's call, not a defect to be tidied away. The footer headings use the same colour and are fine, because the footer keeps its own 0.50 tint. */ .eft-matrix-fee-amount { color: var(--wp--preset--color--light-aqua) !important; } /* Cards: glass rather than white slabs. */ /* The two alphas are custom properties so the hover can reach them. Both declarations carry !important, which an inline style from GSAP cannot outrank; a variable inside the value can be set inline and is resolved at computed-value time, so the tween moves the variable rather than the property. The defaults here are the resting glass, unchanged. */ .is-style-eft-matrix-card { background-color: rgba(250, 252, 251, var(--eft-matrix-card-fill, 0.07)) !important; border: 1px solid rgba(250, 252, 251, var(--eft-matrix-card-edge, 0.16)) !important; box-shadow: none !important; } /* The foil, defined once. The buttons, the outline-button ring and the image frames all draw the same treatment, so it lives here rather than being repeated three times and drifting apart. */ :root { /* The supplied photograph of rough gold leaf, used as the button ground since 2026-08-31. technical/generate-button-texture.py transcodes it, LOSSLESSLY and with no grading at all: the client asked for a 100% match to the image as supplied, and the measured channel delta against the source is 0. WHAT IT COSTS, measured on rendered pixels across 36 buttons at 1440, 1280, 768, 390 and 360, with the label hidden so only the plate is sampled: the Ink label reads about 4.9:1 on the median pixel and 2.76:1 at worst. For dark text it is the DARKEST pixel that sets contrast, which is the reverse of everywhere else on this site, so the button is UNDER WCAG AA 4.5:1 wherever the grain runs dark, and under the 3:1 large-text floor on most of them. No label colour fixes it. Pure black on the photograph's darkest pixel is 4.06:1, and a lighter label is worse, because the plate's median is 0.31 luminance. No crop fixes it either: the dark grain is spread through the image rather than sitting at its edges, so the centre 30% still only reaches 2.93:1. The one thing that does fix it is lifting the photograph's shadows, which the earlier version of this asset did: a 0.32 luminance floor held 4.80:1 everywhere and still read as the same rough gold. That grading was removed by instruction on 2026-08-31. Putting it back is one line in technical/generate-button-texture.py. The synthetic foil below still draws the outline button's ring and the photo frames, where a 2px band would show nothing of a photograph. */ /* The ?v= is not decoration. 20i edge-caches static assets under the plain path and went on serving a previous build of this file after it had been replaced on disk: measured, the bare URL returned 15,380 bytes while the file was 85,190. Bump the number whenever the texture is regenerated, or visitors keep the old one. Do NOT use ?w=, which is a core WordPress query var meaning week number. */ --eft-foil-image: url("../images/eft-matrix-gold-foil-button-texture.webp?v=2"); --eft-foil-base: #C9A83F; --eft-foil-layers: radial-gradient(ellipse 120px 40px at 15% 30%, rgba(232, 217, 138, .55), transparent 70%), radial-gradient(ellipse 180px 50px at 45% 70%, rgba(168, 134, 47, .5), transparent 70%), radial-gradient(ellipse 140px 45px at 70% 25%, rgba(232, 217, 138, .45), transparent 70%), radial-gradient(ellipse 160px 40px at 90% 60%, rgba(168, 134, 47, .45), transparent 70%), radial-gradient(ellipse 100px 35px at 30% 85%, rgba(212, 180, 74, .6), transparent 70%), repeating-linear-gradient( 0deg, rgba(168, 134, 47, .08) 0 1px, transparent 1px 3px, rgba(232, 217, 138, .07) 3px 4px, transparent 4px 7px ); } /* Filled buttons are a matte gold foil: mottled patches, a horizontal brush grain, and a crinkle micro-noise layer in ::after. * * The label is INK, not Deepest Teal, and that is the one change made to the * supplied treatment. This base is darker than the previous gold and the four * mottled patches are darker still, so the darkest pixel under the label * measured 0.3442 luminance. Against Deepest Teal that is 3.85:1 on rendered * pixels, a fail. Ink is one step darker and takes the same worst case to * 5.36:1. For dark text the DARKEST pixel sets contrast, which is the reverse * of everywhere else on this site, so lightening the label would have made it * worse, not better. * * The ::after carries z-index auto, so it paints above the label as well as * the plate. Measured, overlay at 0.35 barely moves dark text (Deepest Teal * rendered at 0.0523 against a specified 0.0485), so it is left as authored. * The quiet outline button is excluded and keeps its transparent ground. */ .wp-block-button__link:not(.is-style-eft-matrix-quiet .wp-block-button__link) { /* The colour is the fallback, not decoration: if the texture fails to load, Ink still reads 6.22:1 on #C9A83F. A button whose contrast depends on an image arriving is not a button. */ background-color: var(--eft-foil-base) !important; background-image: var(--eft-foil-image); /* cover, not repeat. The plate is 640x217 against buttons measured from 180 to 320px wide, so cover crops rather than scales up, and there is no tile seam to line up across buttons of different widths. */ background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: normal; box-shadow: none; position: relative; overflow: hidden; color: var(--wp--preset--color--ink) !important; } /* The crinkle noise layer that used to sit here was removed on 2026-08-31, with the texture, and it could not simply be left in place. mix-blend-mode: overlay DARKENS every ground pixel below 0.5 luminance, and the texture's floor is 0.3028 by design: it is set exactly where Ink still clears 4.5:1 and nowhere lower. Multiplying that floor would have taken the label under AA on the darkest grain in the photograph. The photograph also supplies the grain the layer was faking. */ .is-style-eft-matrix-quiet .wp-block-button__link) { background-color: #d4af37 !important; background-image: radial-gradient(circle at 30% 30%, rgba(255, 245, 195, 0.42) 0%, transparent 60%), radial-gradient(circle at 80% 80%, rgba(160, 110, 30, 0.38) 0%, transparent 70%), url('data:image/svg+xml;utf8,'); background-blend-mode: overlay; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05); color: var(--wp--preset--color--deepest-teal) !important; } .is-style-eft-matrix-quiet .wp-block-button__link { color: var(--wp--preset--color--off-white) !important; border-color: rgba(250,252,251,.5) !important; background: transparent !important; } /* Hero: the site backdrop serves it, so the baked hero asset is switched off. The eyebrow moves to Off White. Light Aqua needs a background under 0.0558 luminance for 4.5:1 and the exposed nebula sits well above that. */ .eft-matrix-hero { background-color: transparent !important; } .eft-matrix-hero .wp-block-cover__image-background { opacity: 0 !important; } .eft-matrix-hero .has-light-aqua-color { color: var(--wp--preset--color--off-white) !important; } /* --------------------------------------------------------------------------- * Light surfaces the band and card selectors above do not reach. * * Found by scanning all 13 pages for any element with an opaque background * over 0.25 luminance, rather than by guessing. Each one had off-white body * copy painted onto it by the text rules above, which made the text invisible: * the testimonial quotes measured 1.03:1 and the Calendly intro 1.0:1. * ------------------------------------------------------------------------- */ /* Testimonial quotes are blockquotes carrying their own white card, so they match neither the band selectors nor .is-style-eft-matrix-card. They become the same glass as the other cards so the inverted text reads on them. */ .is-style-eft-matrix-testimonial { background-color: rgba(250, 252, 251, 0.07) !important; border-color: rgba(250, 252, 251, 0.16) !important; } .eft-matrix-calendly-intro { background-color: rgba(250, 252, 251, 0.07) !important; border-color: rgba(250, 252, 251, 0.16) !important; } /* Form fields stay light on purpose: a pale input on a dark page is the conventional, more usable pairing, and it marks the field as writable. They therefore need their OWN dark text, because the inversion above would otherwise give them off-white on white. */ .eft-matrix-form input, .eft-matrix-form textarea, .eft-matrix-form select, input[type="text"], input[type="email"], input[type="tel"], textarea, select { color: var(--wp--preset--color--ink) !important; -webkit-text-fill-color: var(--wp--preset--color--ink) !important; } /* The contact form has no card of its own: it sits straight on the band, so every colour form.css sets for a light ground is wrong here. Ink and Deepest Teal labels measured 1.3:1 and 1.47:1 on the dark band. The fields themselves stay light and keep their dark text, set above. */ .eft-matrix-field label, .eft-matrix-radio label, .eft-matrix-consent label { color: var(--wp--preset--color--off-white) !important; } .eft-matrix-hint, .eft-matrix-optional { color: var(--wp--preset--color--soft-mint) !important; } .eft-matrix-required { color: var(--wp--preset--color--light-aqua) !important; } /* The two notice boxes keep their own light grounds, so their text must stay dark rather than inherit the inversion. */ .eft-matrix-notice--ok, .eft-matrix-notice--ok *, .eft-matrix-notice--error, .eft-matrix-notice--error * { color: var(--wp--preset--color--ink) !important; } /* Testimonial attributions are Muted #3F4E4E, chosen to sit quietly under a quote on a white card. On the glass card that is 1.81:1. Soft Mint keeps them subordinate to the quote while clearing AA. */ .wp-block-quote.is-style-eft-matrix-testimonial cite { color: var(--wp--preset--color--soft-mint) !important; } /* Content links keep theme.json's Deep Teal, which is 1.84:1 on the dark ground and is what took Lighthouse accessibility from 100 to 96. The header, footer and button links are handled separately above, so this is scoped to links inside content that still carry the element style. */ :where(main, .wp-block-post-content, .wp-site-blocks) p a, :where(main, .wp-block-post-content, .wp-site-blocks) li a, :where(main, .wp-block-post-content, .wp-site-blocks) h1 a, :where(main, .wp-block-post-content, .wp-site-blocks) h2 a, :where(main, .wp-block-post-content, .wp-site-blocks) h3 a, :where(main, .wp-block-post-content, .wp-site-blocks) h4 a { color: var(--wp--preset--color--light-aqua) !important; } :where(main, .wp-block-post-content, .wp-site-blocks) p a:hover, :where(main, .wp-block-post-content, .wp-site-blocks) li a:hover, :where(main, .wp-block-post-content, .wp-site-blocks) h1 a:hover, :where(main, .wp-block-post-content, .wp-site-blocks) h2 a:hover, :where(main, .wp-block-post-content, .wp-site-blocks) h3 a:hover, :where(main, .wp-block-post-content, .wp-site-blocks) h4 a:hover { color: var(--wp--preset--color--off-white) !important; } /* Two the rules above did not reach, both on the contact page. The fieldset legend is Deepest Teal and is not a