/* Theme Name: Aqua Studio Theme URI: https://egfishstore.com Description: Aqua Studio — English-only WooCommerce child theme for egfishstore.com (Aqua Studio brand, Egypt-based aquarium e-commerce; Arabic planned as a later phase). Built on Storefront (see README.md for parent-theme justification). Implements the G2-approved design-token system (build/tokens.json) and the UX-spec structural requirements (lead-time-honesty at 5 checkpoints, single header/footer system, CPL 181/2018 disclosure blocks). Author: Aqua Studio / Ali (Claude Code build lane) Author URI: https://egfishstore.com Template: storefront Version: 2.9.6 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 Requires Plugins: woocommerce Text Domain: aqua-studio Domain Path: /languages License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================== 1. Tokens All color/type/spacing/radii/elevation/surface/badge values come from assets/css/tokens.css (compiled from build/tokens.json). Nothing in this file or any other theme CSS file should hardcode a hex/px value that already exists as a token — reference var(--token-name) instead. v2.9.0 — THE `@import url("assets/css/tokens.css")` THAT USED TO SIT HERE IS REMOVED, and this is the most consequential change in this release. ROOT CAUSE (confirmed by reading the LIVE computed styles on aquastudio.me while it served v2.8.0, not inferred): a CSS @import carries no `?ver=` query string. `style.css?ver=2.8.0` was cache-busted on every release; the token file it imported never was. Behind LiteSpeed Cache, production was therefore still serving the PRE-REBRAND "Living Water" token set — every value on build/tokens.json's own "refuses" blacklist: --color-ink-text-primary #0D2A44 navy (locked: #3A2A40 ink) --color-base-clear-mid #2E8FB8 blue (locked: #78417D violet) --color-base-luminous-deep #123E63 navy (locked: #673272) --color-base-lagoon-light #DCEEF4 blue (locked: #EFD8AC sand) --color-ink-text-inverse #EAF6FB (locked: #F9FDEC paper) --color-semantic-success-eco #2FA36B (locked: #438F49) --cta-signal-primary #C6402E rust (locked: #673272) --type-display-en Fraunces serif (locked: Baloo 2) --surfaces-lifted-tint #F4FAFC (locked: #F9FDEC) --radii-card 14px (current: 18px) --spacing-nav-height 92px (current: 148px) That single stale file is the true origin of the rust buttons (D4), the "display serif" product titles (D1 — the live face was Fraunces, never Baloo 2), the blue category-tile link (D7) and the pale blue-grey body copy (D9: navy ink at reduced opacity over bluish paper). Every palette correction shipped since v2.5.0 has been invisible on production. THE FIX: tokens.css is now enqueued as a real, VERSIONED stylesheet (functions.php, handle `aqua-studio-tokens`, a dependency of `aqua-studio-style`), so it is cache-busted by every release and heals itself. The block below then re-declares the LOCKED brand values here, in the file that is guaranteed cache-busted — so even if a stale tokens.css survives in a cache layer we do not control, the brand can no longer come out wrong. tokens.css / build/tokens.json remain the generated single source of truth; this block is a deliberate, documented mirror of the locked subset and must be updated with them. ========================================================================== */ :root { /* Locked palette — BRAND.md / master-plan §1. Never change these six. */ --color-base-lagoon-light: #EFD8AC; /* sand */ --color-base-clear-mid: #78417D; /* violet */ --color-base-luminous-deep: #673272; /* deep purple */ --color-ink-text-primary: #3A2A40; /* ink */ --color-ink-text-inverse: #F9FDEC; /* paper */ --color-semantic-success-eco: #438F49; /* emerald */ --color-semantic-reef-coral-magenta: #78417D; /* Six distinct category hues (v2.5.0 palette-collapse fix). */ --color-category-keys-main-brand: #673272; --color-category-keys-freshwater: #1C5F4F; --color-category-keys-freshwater-tint: #DDEEEA; --color-category-keys-planted-accent: #57772C; --color-category-keys-planted-pip: #374F17; --color-category-keys-marine: #673272; --color-category-keys-coral-accent: #BF4A6D; --color-category-keys-coral-pip: #7E2540; --color-category-keys-coral-tag: #E6BCC9; --color-category-keys-automation: #656383; --color-category-keys-livestock: #EFD8AC; /* v2.9.0 D4 — primary action. Deep Purple (8.9:1 on paper). The old #941E75 was off-palette; production was serving the banned #C6402E. */ --cta-signal-primary: #673272; --cta-pip-livestock: #EFD8AC; /* Locked type — Baloo 2 (display) + Inter (text). No other faces. v2.9.0 BUG FIX: these MUST be quoted. A CSS is a sequence of identifiers and an identifier cannot begin with a digit, so the previous unquoted `Baloo 2` expanded to `font-family: Baloo 2, Georgia, serif` — invalid, and browsers drop the entire declaration. Verified in a live browser: the unquoted form computed to the INHERITED family, meaning the locked display face never actually applied to any heading; the quoted form resolves correctly. Both generators (build/tokens-to-css.php and its Python stand-in) now emit these quoted too, so a regeneration cannot reintroduce it. */ --type-display-en: "Baloo 2"; --type-text-en: "Inter"; --type-hero-h1-en-px: 52px; --type-section-title-en-px: 28px; --type-body-en-px: 16.5px; --type-price-px: 23px; --type-badge-label-px: 12px; --spacing-board-padding-x: 48px; --spacing-nav-height: 96px; /* v2.9.4 TASK A — was 120px (v2.9.2 C5); 148px v2.9.0 D8; 124px v2.5.0; 92px orig. The tight-crop logo derivative is 2.16:1 instead of 1:1, so a 69px-tall box now carries a 69px-tall MARK (it was a 34px mark inside a 138px box). The band no longer has to be tall enough to hold three-quarters of empty canvas. */ --spacing-card-gap: 22px; --spacing-card-body-padding: 18px 20px 22px 20px; --spacing-card-img-height: 168px; --radii-card: 18px; --radii-card-small: 12px; --radii-cta-button: 999px; --radii-badge-pill: 20px; --radii-nav-cat-chip: 20px; --elevation-card-shadow: 0 10px 28px rgba(103, 50, 114, .12); --elevation-hairline: rgba(103, 50, 114, .18); --surfaces-lifted-opaque: #FFFFFF; --surfaces-lifted-tint: #F9FDEC; --surfaces-lifted-deep-opaque: #673272; --surfaces-reef-darkest-gutter: #3A2A40; } /* v2.2.0: assets/css/rtl.css deleted (English-only conversion, task #50) — RTL-only CSS + its conditional enqueue no longer exist. */ /* ========================================================================== 2. Reset / base box model ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--surfaces-lifted-tint); color: var(--color-ink-text-primary); font-family: var(--type-text-en), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--type-body-en-px); line-height: 1.55; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-base-clear-mid); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* ========================================================================== 3. Typography scale Display face (Baloo 2) is reserved for hero H1 and section titles only — never body copy, never buttons, per token set + brand rule. ========================================================================== */ h1, h2, h3, .aqua-display { /* v2.9.1 — D1 P0 (audit row 1.1). This stack used to fall back to `Georgia, serif`. Baloo 2 is a rounded SANS — so every time Google Fonts was slow, blocked, offline, or simply beaten by the render, the whole site's headings and card titles fell through to a SERIF. That is the actual mechanism behind the reported "giant serif titles" defect: not a wrong token, a wrong fallback. Corrected to a sans stack. NEVER use a serif fallback anywhere in this theme — if you are adding a font-family declaration and the fallback chain does not end in `sans-serif`, it is wrong. */ font-family: var(--type-display-en), 'Trebuchet MS', system-ui, sans-serif; color: var(--color-ink-text-primary); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; } .aqua-hero-h1 { /* v2.4.0 — premium-finish pass: the flat 52px token read small/timid against the rebuilt hero's generous board width on large desktops ("big confident headline" instruction). Responsive clamp keeps the 52px token as the informed floor-ish baseline at typical widths but lets it grow with confidence on wide viewports; never edits the token itself (build/tokens.json stays the source of truth for the base value — this is a presentation-layer override, same pattern as the logo/page-title clamps elsewhere in this file). */ font-size: clamp(var(--type-hero-h1-en-px), 4.6vw, 68px); letter-spacing: -0.01em; } .aqua-section-title { font-size: var(--type-section-title-en-px); } /* v2.9.1 — D1 P2 (audit row 6.5). Checkout carried bare `

`/`

` with no class, so they rendered at the raw browser heading scale in the display face while every other template used `.aqua-section-title` — checkout, of all pages, was the one that looked untouched. Those headings now carry the class; this modifier gives the genuinely subordinate one ("Estimated ship times", an h4 inside the order-review block) a smaller step so adding the class does not flatten the hierarchy by making every checkout heading the same size. */ .aqua-section-title--sub { font-size: 18px; font-weight: 600; } .aqua-price { font-size: var(--type-price-px); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-ink-text-primary); } .aqua-badge-label { font-size: var(--type-badge-label-px); font-weight: 500; letter-spacing: 0.01em; } /* ========================================================================== 4. Layout primitives ========================================================================== */ .aqua-board { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: var(--spacing-board-padding-x); padding-right: var(--spacing-board-padding-x); } /* v2.9.0 (Ali) — D8 ROOT CAUSE: this was a FIXED `height`, but `.aqua-site-header__inner` (§17) sets `flex-wrap: wrap`. Whenever the branding + nav + utilities row wrapped (any viewport narrow enough, and at the logo's own clamp maximum), the wrapped content grew taller than the 124px band while the band itself stayed 124px — so the branding block, whose logo SVG carries an opaque white 1024x1024 backing plate as its first (the asset is LOCKED, we must not edit it), spilled out past the header's bottom hairline and painted a white box over the hero. `min-height` lets the band grow with its own content instead, so nothing can ever escape it; the fixed value stays the FLOOR so the header keeps its designed presence on a normal single-row layout. Vertical padding added for the same reason — the logo now has real breathing room inside the band rather than sitting flush against its edges. */ .aqua-nav { position: relative; min-height: var(--spacing-nav-height); /* v2.9.2 (Ali) — C5. Band padding cut 10px -> 4px and the --spacing-nav-height FLOOR cut 148px -> 120px, so the band is sized by the logo box it contains instead of by a fixed value that exceeded it. Measured live before: band 160.07px around a 132px logo box. After: 146px around a 138px box. See the .aqua-site-branding__logo rule below for the honest limit on how far this can go. */ /* v2.9.4 (Ali) — TASK A. Padding restored 4px -> 12px. v2.9.2 had to squeeze it to 4px because the logo box was 138px tall inside a band that could not grow much further; with the tight-crop derivative the box is 69px, so the band can be BOTH shorter overall and more generously padded around the mark at the same time. Measured, all three checked widths: tallest flex child is the 69px logo (desktop) / the 46px logo and 40px hamburger (mobile), and the tallest utility is the 38px search toggle — so content + 24px padding = 93px desktop, 70px mobile, both under the 96px floor. Band resolves to a flat 96px at 390 / 768 / 1440, down from 120 / 120 / 146px. `min-height` (NOT height) is retained deliberately: it is the v2.9.0 D8 fix that stops a wrapped row from spilling the branding block past the header's bottom hairline and painting over the hero. */ padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; border-bottom: 1px solid var(--elevation-hairline); background: var(--surfaces-lifted-opaque); } .aqua-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-card-gap); } /* v2.9.2 (Ali) — C3. The v2.5.0 bento above (node 1 spanning 2x2, node 6 a full-width banner) is REPLACED by an even 3-column grid. Reason, measured live on https://aquastudio.me/ at a 1512px viewport rather than inferred: the featured tile rendered 601x795px while its own content — a 601px square photo plus a 107px caption body — totalled 708px, leaving 87px of empty white card below the caption; every other tile measured a gap of exactly 0. Nothing in the theme can legitimately fill that 87px: a tile is a photo plus a one-line label, and inventing an ornament, motif or filler graphic to occupy it is barred outright by the no-authored- graphics rule. So the span is dropped rather than padded. Six equal tiles resolve to two clean rows of three, every card flush and the same height, which is the deliberate-plain option the brief asks for over a ragged asymmetric one. Markup and source order are untouched — this stays CSS-only, and removing the grid-template-areas also retires the nth-child(1)/nth-child(6) special cases (the 16/5 banner ratio and the featured-caption size bump) that only existed to service the bento. */ .aqua-home__category-grid { grid-template-columns: repeat(3, 1fr); } /* v2.9.2 — the homepage tiles are an editorial showcase, so their caption may run a little larger than the 15px commerce-grid title, but it must scale with the tile. The shared `.aqua-card__title` rule (§4) already guarantees wrapping, a 2-line reservation and left alignment. NOTE: this caption is now the ONLY name on the tile — see the v2.9.2 note in functions.php aqua_studio_render_category_tile() for why the second, clipped copy the owner reported was never DOM text at all. */ .aqua-home__category-grid .aqua-card__title { font-size: clamp(15px, 1.15vw, 18px); } @media (max-width: 900px) { .aqua-home__category-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .aqua-home__category-grid { grid-template-columns: 1fr; } } .aqua-card { background: var(--surfaces-lifted-opaque); border-radius: var(--radii-card); box-shadow: var(--elevation-card-shadow); overflow: hidden; } .aqua-card-small { border-radius: var(--radii-card-small); } .aqua-card__img { /* v2.7.0 (Ali) — owner-reported defect: product-grid thumbnails were an inset circular "specimen" avatar with a framing drop-shadow — reported as "a circle with a photo inside, a strange texture behind/beneath it." Reverted to a plain edge-to-edge rounded-top rectangle: no invented shape, no separate frame shadow (the card itself already carries its own shadow). Used by the category grid, homepage category tiles, and PDP "Pairs well with" cross-sell cards — all three already share this one class via aqua_studio_product_image_or_placeholder() / front-page.php's direct wp_get_attachment_image() call, so one rule reaches all three consistently. object-fit:cover means any real photo aspect ratio still crops safely. v2.8.0 §9 render-QA fix: when this class is merged onto the new ".aqua-photo" wrapper (front-page.php's category tiles / the archive header thumb call site — aqua_studio_render_category_tile()'s $extra_class param), ":where(.aqua-photo)"'s own `height: 100%` (zero specificity, by design — see that rule's own comment) was resolving against the stretched CSS-grid-item height of the PARENT `.aqua-card`, forcing the photo to consume the card's ENTIRE height and pushing `.aqua-card__body` (title) entirely out of the overflow:hidden card — captions rendered completely invisible, a more severe version of the "clipped caption" defect this same wave fixes. Explicit `height: auto` here — higher specificity than `:where()` — wins that conflict and lets `aspect-ratio` alone govern this element's own height, exactly the ":where() ... callers that merge an existing sizing class must always win" contract this file already documents. Contexts where .aqua-photo has NO extra class and sits inside an already-sized parent (.aqua-world-card__media, .aqua-archive__thumb, .aqua-world__gallery-item — all set their own explicit width/height or aspect-ratio) are unaffected and still rely on .aqua-photo's height:100% to fill that parent, unchanged. */ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; /* v2.9.2 (Ali) — C8, "two different systems". VERIFIED LIVE on https://aquastudio.me/shop/: a card WITH a photo painted this box in the flat paper tint (computed rgb(249,253,236), no border), while a card WITHOUT one painted .aqua-img-placeholder in the sand->paper wash PLUS a hairline border — so the same grid read as two unrelated components, and any product photo with a transparent background sat on bare white next to a sand neighbour. Both slots now carry the IDENTICAL wash + hairline, so the frame behind every image in the grid is one system. Same tokens, no new colour. */ background: linear-gradient(155deg, var(--color-base-lagoon-light) 0%, var(--surfaces-lifted-tint) 72%); border: 1px solid var(--elevation-hairline); border-radius: var(--radii-card) var(--radii-card) 0 0; display: block; margin: 0; } /* v2.9.2 (Ali) — C8, the real cause of the reported ~23px title misalignment. MEASURED LIVE, not inferred: Storefront ships `ul.products li.product img { margin: 0 auto 1.618em }` (specificity 0,2,3) which OUTRANKS `.aqua-card__img { margin: 0 }` (0,1,0) above, so every card with a real photo carried a computed margin-bottom of 23.36px under its image while placeholder cards (a
, not an , so the rule never matched) carried none. Both image boxes were already exactly 227.2px tall — the boxes were never the problem, this margin was, and it pushed the title of every photo card 23.4px below its placeholder neighbours in the same row. Re-stated here at 0,3,3 so it beats the parent rule instead of losing to it. */ ul.products li.product img.aqua-card__img, ul.products li.product .aqua-card__img { margin: 0; } .aqua-card__body { padding: var(--spacing-card-body-padding); } /* v2.9.0 (Ali) — D1 + D5 + D7, the single biggest "amateur" signal on the shop grid. ROOT CAUSE: archive-product.php renders the loop title as `

`, and v2.8.0's rule below set no family, size, weight or alignment — so every product title inherited §3's `h1,h2,h3` DISPLAY face (Baloo 2) at the browser's default h2 size (~1.5em ≈ 25px). A 60-character product name ("Blue Leg Hermit Crab x5 — Marine Cleanup Crew") therefore rendered as display type over 5 wrapped lines, blowing the card's height out and dropping the viewport to ~4 cards. Benchmark (BulkReefSupply and every serious commerce grid): a compact SANS title, ~15px, max 2 lines, left-aligned. Fix, at the one class every caller already shares: - Inter (text face) explicitly — the display face is reserved for real page headings only, which is what §3's comment already claims but could not enforce through the h2 inheritance above. - 15px / 600 / 1.35, letter-spacing reset (Baloo 2's tracking is wrong for dense UI type), margin reset (h2 carries `margin: 0 0 .5em`). - Hard 2-line clamp PLUS a reserved min-height of exactly 2 lines, so every card's title block is the SAME height whether the title is one word or sixty characters — that reserved box is what makes a row of cards line up instead of going ragged. - text-align: left (D5 — the whole card stack was centred, which is what reads as an unconfigured template demo). The clamp box is exactly its own min-height, so unlike the v2.8.0 situation it cannot be cropped by `.aqua-card`'s overflow:hidden — the element never exceeds the room reserved for it. Reaches category tiles, archive header thumb, Worlds cards and product/cross-sell cards alike. Previously v2.8.0 — fixed clipped category-tile labels (no explicit wrap/height rule); that fix is folded into the min-height below. */ .aqua-card__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--type-text-en), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--color-ink-text-primary); text-align: left; white-space: normal; overflow-wrap: break-word; word-break: normal; line-height: 1.35; min-height: calc(1.35em * 2); margin: 0 0 6px; } /* v2.9.0 — D5: left-align the ENTIRE card content stack (title, brand, price, badge, button). Applied at the card/body/actions level rather than per-element so nothing centred can survive anywhere this component is used, and applied to WooCommerce's own default loop item too (which Storefront centres) so non-theme loops — related products, upsells, any plugin-rendered [products] shortcode — match. */ .aqua-card, .aqua-card__body, .aqua-card__actions, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align: left; } /* v2.9.0 — D2, second half: uniform card heights. The card is a flex column, the image slot is a fixed 1:1 box, the title block reserves a fixed 2 lines (above), and the actions row is pinned to the bottom with `margin-top: auto`. Result: every card in a row is the same height and every Add to Cart button sits on the same baseline, regardless of how long the title is or whether the product has a photo yet. */ ul.products li.aqua-card, .aqua-card-grid > .aqua-card { display: flex; flex-direction: column; } .aqua-card__link { flex: 1 1 auto; display: flex; flex-direction: column; } .aqua-card__actions { margin-top: auto; } /* v2.8.0 — VISUAL EMERGENCY FIX: plain photo wrapper, replaces the deleted assets/css/aqua-mask.css duotone+grain+vignette treatment (functions.php aqua_studio_photo_wrap() / aqua_studio_photo_placeholder() emit this markup — see those docblocks). Full, crisp colour by default, always — category tiles, Worlds cards, product images, hero. The only interaction kept is a gentle hover/focus zoom (transform only, opt-in via --hover-zoom) — never a colour/saturation change. Same layout-agnostic contract the old mask had: border-radius is inherited from whatever sizing class the caller merges on (e.g. .aqua-card__img), so this file's own card/thumb shapes are unaffected. */ :where(.aqua-photo) { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .aqua-photo__media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .aqua-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .aqua-photo__media--empty { display: flex; align-items: center; justify-content: center; background: var(--color-base-luminous-deep); } .aqua-photo--hover-zoom .aqua-photo__media img { transition: transform 0.35s ease; } .aqua-photo--hover-zoom:hover .aqua-photo__media img, .aqua-photo--hover-zoom:focus-within .aqua-photo__media img, a:hover .aqua-photo--hover-zoom .aqua-photo__media img, a:focus-visible .aqua-photo--hover-zoom .aqua-photo__media img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .aqua-photo--hover-zoom .aqua-photo__media img { transition: none; } } /* ========================================================================== 5. CTA buttons — fill is ALWAYS the signal-primary token. Never the livestock pip color, never yellow/amber (refused zone, see tokens.json). ========================================================================== */ .aqua-cta, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button, .woocommerce-page a.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; background-color: var(--cta-signal-primary); color: var(--color-ink-text-inverse); border: none; border-radius: var(--radii-cta-button); /* v2.9.0 (Ali) — D4: buttons were oversized (0.85em/1.4em on inherited 16.5px body type gave a ~48px tall pill for an in-card action). Brought down to a normal control height and pinned to the text face at an explicit 14.5px so a button never inherits the display face or the body size. --cta-signal-primary itself moved #941E75 -> #673272 at the token source this version (see build/tokens.json): the old value was a wine/rust magenta that is NOT one of the six locked brand colours, and it was the "rust-red block" the owner flagged on both Add to cart and the hero CTA. Deep Purple is the pick for primary actions sitewide — Emerald (#438F49) was the alternative but only reaches 3.89:1 against the paper text token, failing WCAG AA for control-sized text; Deep Purple reaches 8.9:1 and stays the brand's dominant hue. Emerald keeps its existing, distinct jobs (success/eco semantics, the WhatsApp pill). */ padding: 0.62em 1.15em; font-family: var(--type-text-en), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14.5px; line-height: 1.3; font-weight: 600; cursor: pointer; transition: filter 0.15s ease; } .aqua-cta:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #respond input#submit:hover, .woocommerce input.button:hover { filter: brightness(0.92); color: var(--color-ink-text-inverse); } .aqua-hero__cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .aqua-cta--secondary { background: transparent; color: var(--cta-signal-primary); border: 2px solid var(--color-base-lagoon-light); box-shadow: inset 0 0 0 1px var(--elevation-hairline); } .aqua-cta--secondary:hover { filter: none; background: var(--color-base-lagoon-light); color: var(--cta-signal-primary); } /* v2.8.0 — VISUAL EMERGENCY FIX: commerce signals. The shop/category product-grid card (templates/woocommerce/archive-product.php) already showed price; it was missing an Add to Cart control. This wraps a real woocommerce_template_loop_add_to_cart() call in its own row, a sibling to the card's (not nested inside it — nesting an interactive WooCommerce button inside the card's own link would be invalid HTML). No new colour: the button itself already inherits the solid, high-contrast ".woocommerce a.button" fill above. Full-width so it reads as a clear, prominent action, same treatment applied to the PDP cross-sell card's existing button (.aqua-pairs-card__cta, §10) for consistency. */ .aqua-card__actions { padding: 0 20px 20px; } /* v2.9.0 (Ali) — D4 + D5: v2.8.0 made these buttons full-width blocks, which — once they were also rust-coloured — turned the loudest thing on every card into a solid bar. A normal-width control aligned to the card's LEFT edge (matching the title, price and badge above it) reads as a considered commerce card instead of a template demo. */ .aqua-card__actions, .aqua-pairs-card__cta { display: flex; justify-content: flex-start; } .aqua-card__actions .button, .aqua-pairs-card__cta .button { display: inline-flex; width: auto; max-width: 100%; } /* v2.1.0 — Advisory Commerce homepage */ .aqua-home__intent-dek, .aqua-home__guides-dek { margin: 0 0 24px; font-size: var(--type-body-en-px); color: var(--color-base-clear-mid); } .aqua-intent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-card-gap); } .aqua-intent-card { background: var(--surfaces-lifted-opaque); border: 1px solid var(--elevation-hairline); border-radius: var(--radii-card); padding: 22px 20px; box-shadow: var(--elevation-card-shadow); display: flex; flex-direction: column; gap: 8px; min-height: 148px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .aqua-intent-card:hover, .aqua-intent-card:focus-within { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(103, 50, 114, 0.14); } /* v2.9.1 — D9 P0 (audit rows 2.1-2.4 / 8.2). The circular badge that used to hold four hand-authored inline SVG icons (equalizer / DRAWN FISH / open book / chat bubble) is gone along with the artwork itself — see template-parts/home-intent-cards.php. What replaces it is TYPOGRAPHY on a flat tinted panel: the card's step number, set in the theme's own text face, on a rounded rectangle washed with a locked-palette tint. A digit is not a drawing and a rectangle is not a motif, so this carries no representational meaning and cannot regress the standing rule. The numeral is deep-purple on every variant (6.63:1 on sand, the tightest of the four) rather than per-variant colour, so no tint can push it under AA. Squared off, not circular, so it reads as a panel/ label rather than as an icon slot waiting for an icon. */ .aqua-intent-card__step { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radii-card-small); flex: none; font-family: var(--type-text-en), Inter, system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--color-base-luminous-deep); user-select: none; } .aqua-intent-card__step--violet { background: rgba(120, 65, 125, .14); } .aqua-intent-card__step--emerald { background: rgba(67, 143, 73, .14); } .aqua-intent-card__step--sand { background: var(--color-base-lagoon-light); } .aqua-intent-card__step--purple { background: rgba(103, 50, 114, .12); } .aqua-intent-card__title { margin: 0; font-size: 16px; font-weight: 700; } .aqua-intent-card__desc { margin: 0; flex: 1; font-size: 13px; line-height: 1.45; color: var(--color-base-clear-mid); } /* v2.9.1 — D7 (audit row 8.1). Emerald --color-semantic-success-eco (#438F49) on the card's white surface measures 3.99:1, and 13px/700 does not qualify as large text (that needs >=18.66px bold), so this declaration was below AA as written. Repointed to --cta-signal-primary (deep-purple #673272, 9.23:1 on white). Emerald itself is NOT darkened — it is a locked primary, used correctly elsewhere at larger sizes and on darker grounds, so the fix belongs at the call site, not in the palette. NOTE: this rule does not actually win the cascade — `.aqua-board a` (§ near the end of this file, 0,2,0) outranks it and always has. The rule that genuinely paints this link lives there, declaring the same value. Both are kept deliberately so the component still states its own intent at the point of definition; see that block's comment for the full writeup, including why the register's "3.99:1 live" reading was a cascade artefact. */ .aqua-intent-card__link { font-size: 13px; font-weight: 700; color: var(--cta-signal-primary); text-decoration: none; } .aqua-intent-card__link--chat { color: var(--cta-signal-primary); } .aqua-intent-card__link::after, .aqua-guide-card__read-text::after, .aqua-home__guides-more .aqua-guide-card__read-text::after { content: " →"; } .aqua-guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-card-gap); } .aqua-guide-card { background: var(--surfaces-lifted-opaque); border: 1px solid var(--elevation-hairline); border-radius: var(--radii-card); box-shadow: var(--elevation-card-shadow); padding: 0 0 4px; } .aqua-guide-card__tag { display: inline-block; margin: 18px 18px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cta-signal-primary); background: var(--color-base-lagoon-light); padding: 4px 10px; border-radius: 12px; } .aqua-guide-card__title { font-size: 17px; margin: 12px 18px 8px; line-height: 1.3; } .aqua-guide-card__title a { color: var(--color-ink-text-primary); text-decoration: none; } .aqua-guide-card__excerpt { font-size: 13px; margin: 0 18px 12px; color: var(--color-base-clear-mid); line-height: 1.45; } .aqua-guide-card__read, .aqua-home__guides-more a { font-size: 13px; font-weight: 700; color: var(--cta-signal-primary); text-decoration: none; } .aqua-home__guides-more { margin-top: 18px; font-size: 14px; font-weight: 600; } .aqua-tool-back-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--surfaces-lifted-opaque); border-bottom: 1px solid var(--elevation-hairline); } .aqua-tool-back-bar__home img { display: block; height: 44px; width: auto; } .aqua-tool-back-bar__shop { font-size: 14px; font-weight: 600; color: var(--cta-signal-primary); text-decoration: none; } .aqua-tool-app__content { min-height: 60vh; } @media (max-width: 900px) { .aqua-intent-grid { grid-template-columns: repeat(2, 1fr); } .aqua-guides-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .aqua-intent-grid { grid-template-columns: 1fr; } } /* ========================================================================== 6. Badge pills (lead-time / trust) — see template-parts/leadtime-badge-partial.php Colors below are consumed as var() only; the plugin decides copy/state, the theme decides presentation. ========================================================================== */ .aqua-badge { display: inline-flex; align-items: center; gap: 0.4em; border-radius: var(--radii-badge-pill); padding: 0.3em 0.85em; } .aqua-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .aqua-badge--in-region { background: var(--badge-in-region-lagoon-bg); color: var(--badge-in-region-lagoon-text); } .aqua-badge--in-region .aqua-badge__dot { background: var(--badge-in-region-lagoon-dot); } .aqua-badge--sourced { background: var(--badge-sourced-to-order-lagoon-bg); color: var(--badge-sourced-to-order-lagoon-text); } .aqua-badge--sourced .aqua-badge__dot { background: var(--badge-sourced-to-order-lagoon-dot); } .aqua-badge--import { background: var(--badge-import-sourced-to-order-lagoon-bg); color: var(--badge-import-sourced-to-order-lagoon-text); border: 1px solid var(--badge-import-sourced-to-order-lagoon-border); } .aqua-badge--import .aqua-badge__dot { background: var(--badge-import-sourced-to-order-lagoon-dot); } /* ========================================================================== 7. Category-key theming Body classes added by aqua_studio_body_class_category_key() in functions.php. Each node gets a distinct accent used for header rules, nav-chip active state, and category-page hero tint. Green (--color-semantic-success-eco) must NEVER appear as a category accent — it is reserved solely for success/eco semantic states. v2.5.0 P0 FIX (F01, Ali): TWO separate defects, both invisible to a code-only read because tokens.json's hex values were also collapsed (see build/tokens.json header history) — only a real render surfaced it. (1) VALUE bug: 4 of 6 category-key tokens + --cta-signal-primary had all collapsed to the same #673272 in build/tokens.json — tokens.css inherited the collapse. Fixed at the source (tokens.json), all 6 category hues + CTA are now independently distinct AA-safe hexes; vestigial coral-reef/planted "_blue/_orange/_darkblue/_red/_magenta" names (leftover from an earlier, since-superseded blue "Reef"/"Lagoon" palette register — see this file's v2.3.0 changelog note) are renamed to true semantic names (accent/pip/tag); the unused, never-referenced coral_reef_darkblue token is dropped. (2) WIRING bug, independent of (1) and NOT mentioned in the original defect report — would have silently survived a naive value-only fix: automation's selector below pointed at --color-category-keys-marine instead of its own --color-category-keys-automation token (so automation pages would have kept rendering marine's color even after (1) was fixed); freshwater's selector pointed at --color-category-keys-main-brand instead of --color-category-keys-freshwater (so freshwater pages would have kept rendering plain brand-purple, not green, even after (1) was fixed). Both now point at their own correctly-named, correctly-valued tokens. `.cat-key-accessories` is dead code (no live product_cat slug maps to 'accessories' in aqua_studio_category_key_map()) — left as a harmless explicit fallback to --color-category-keys-main-brand rather than deleted, in case a future taxonomy term needs a neutral default. ========================================================================== */ /* v2.9.1 — D4 P1 (audit row 1.4). The `.cat-key-*` rules below supply only a `background-color`. `.aqua-category-accent` had NO base rule anywhere — no display, no width, no height — and the markup that carries it (front-page.php's homepage tiles, archive-product.php's category header) is an EMPTY ``. An empty inline element with a background and no box is zero-by-zero: it paints nothing. So the six distinct category hues introduced by the v2.5.0 P0 palette fix have never actually been visible on those two surfaces — the token fix was real, the wiring was real, and the result was still invisible for want of a box. `.aqua-archive__accent-bar` likewise had no rule at all (grep: zero hits), so the archive header's bar was equally absent. Both get a real box here. This is a plain rule, not artwork — a coloured bar carrying no representational form (compare the CSS-drawn magnifying glass removed in §"utilities" above, which depicted an object). The `:not(.aqua-badge__dot)` guard matters: single-product.php:130 puts BOTH classes on one span, and `.aqua-badge__dot` (§6, 7x7 round) is the one call site where this component was already sized correctly and has always rendered. Without the guard this rule sits later in the file at equal specificity and would silently restyle that working PDP dot into a 38x4 bar — fixing two invisible accents by breaking the one visible one. */ .aqua-category-accent:not(.aqua-badge__dot) { display: block; width: 38px; height: 4px; border-radius: 2px; background-color: var(--color-category-keys-main-brand); } /* The archive header's variant is the same primitive, sized for a page header rather than a card. */ .aqua-archive__accent-bar:not(.aqua-badge__dot) { width: 56px; height: 4px; margin: 0 0 10px; } /* Pips are small round dots (badge/legend use), not bars. */ .aqua-category-accent--pip:not(.aqua-badge__dot) { width: 7px; height: 7px; border-radius: 50%; } .cat-key-marine .aqua-category-accent { background-color: var(--color-category-keys-marine); } .cat-key-automation .aqua-category-accent { background-color: var(--color-category-keys-automation); } .cat-key-coral-reef .aqua-category-accent { background-color: var(--color-category-keys-coral-accent); } .cat-key-coral-reef .aqua-category-accent--pip { background-color: var(--color-category-keys-coral-pip); } .cat-key-coral-reef .aqua-category-accent--tag { background-color: var(--color-category-keys-coral-tag); } .cat-key-planted .aqua-category-accent { background-color: var(--color-category-keys-planted-accent); } .cat-key-planted .aqua-category-accent--pip { background-color: var(--color-category-keys-planted-pip); } .cat-key-freshwater .aqua-category-accent { background-color: var(--color-category-keys-freshwater); } /* Dead-code fallback only — see v2.5.0 note above; no live term maps here. */ .cat-key-accessories .aqua-category-accent { background-color: var(--color-category-keys-main-brand); } /* v1.1.0: livestock gets its own cat-key (not folded into coral-reef) — token already existed (--color-category-keys-livestock, #EFD8AC) but had (v2.9.1, audit row 1.6 — the comment said #F1663B rust-orange; the live token has always been sand #EFD8AC. Stale COMMENT only, never a live rust value, but a comment naming an off-palette hex is how off-palette hexes get reintroduced, so it is corrected rather than left.) no .cat-key-livestock rule wired up; this closes that gap. */ .cat-key-livestock .aqua-category-accent { background-color: var(--color-category-keys-livestock); } /* Livestock-only pip (never a button fill, never the CTA color). */ .aqua-livestock-pip { background-color: var(--cta-pip-livestock); } /* Success/eco semantic state — the ONLY place --color-semantic-success-eco may appear. */ .aqua-state-success { color: var(--color-semantic-success-eco); } /* ========================================================================== 8. Reef (dark) register surfaces ========================================================================== */ .aqua-surface-reef { background-color: var(--surfaces-reef-darkest-gutter); color: var(--color-ink-text-inverse); } .aqua-surface-reef a { color: var(--color-ink-text-inverse); } /* v2.4.0 — P0 CONTRAST FIX: §3's global `h1, h2, h3 { color: var(--color-ink-text-primary) }` rule directly targets any heading element, which beats inheritance from an ancestor's `color` no matter that ancestor's specificity — so every `

` inside this dark surface (footer.php's "Contact" / "Policies" / "Payment Methods" headings, template-parts/trust-register.php) was rendering in --color-ink-text-primary (#3A2A40) on a --surfaces-reef-darkest-gutter background that is the EXACT SAME HEX (#3A2A40) — i.e. fully invisible text, sitewide, in the footer, on every single page. This is almost certainly the root cause of the client's "black-on-purple text" report: a code-only/text-fetch review cannot detect an invisible-contrast bug (the text is present in the DOM, just unreadable), which is why this was not already on the panel's defects register. Fixes it at the surface level so ANY current or future heading dropped into a dark surface is safe by default, not just today's known instances. */ .aqua-surface-reef h1, .aqua-surface-reef h2, .aqua-surface-reef h3, .aqua-surface-reef .aqua-display { color: var(--color-ink-text-inverse); } /* v2.4.2 — CONFIRMED-LIVE P0 CONTRAST FIX: `.aqua-surface-reef a` above (specificity 0,1,1) does not reliably win on the live page. Storefront core's own `.site-footer a{color:#2c2d33;text-decoration:underline}` ties it on specificity, and the Customizer-generated inline rule `.site-footer a:not(.button):not(.components-button){color:#333}` (0,3,1 — each :not(.class) counts as a class) beats it outright, on every page, regardless of load order. See this file's header comment for the full root-cause writeup. `#colophon` is footer.php's own real, unique wrapper ID (`