/* Theme Name: quiet-rebel-astra-child-test Template: astra Text Domain: quiet-rebel-astra-child-test Description: Scoped test — Astra as parent theme, Brand B (Quiet Rebel) colors and typography applied via this child stylesheet. header.php/footer.php are intentionally NOT defined in this theme so Astra's own header/footer builder and per-page meta boxes (title/header/footer visibility) work natively, unmodified. Content templates also fall through to Astra's defaults for now — this is a scoped test of the mechanism, not a full redesign. Version: 1.2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPL-2.0-or-later */ /* ============================================================ Brand B (Quiet Rebel™) applied on top of Astra. ============================================================ */ /* ──────────────────────────────────────────────────────────── SINGLE SOURCE OF TRUTH for the palette. Added 2026-08-17. Change a colour HERE and nowhere else. Everything downstream points at these variables with var(): - Tailwind tokens in theme.css (@theme block) - Astra's global colour slots (mapped just below) - Inline styles in the PHP templates - Greenshift's global settings (database) Why this exists: before today the accent hex was written out independently in all four of those places, so the Ember to Deep Rose Watermelon swap took three passes to fully land and still left roughly nine elements orange. One declaration means that cannot happen again. Reference: Brand/Brand Assets/brand-standards.md ──────────────────────────────────────────────────────────── */ :root { /* ══ SIENNA WARMTH — Phase 0 preview, 2026-08-26 ══════════════ Palette source: Offers/Your Quiet Edge/YQE-Brand-Palette-and-Type-Spec.md Token NAMES are deliberately left alone so nothing downstream breaks. They now lie about their contents: --qr-deep-purple holds warm brown, --qr-aquamarine holds light teal. Renaming is Phase 2, the same call the August rollout made for --color-ember. The split that matters: this palette has TWO warm accents doing different jobs, where the old one had a single accent doing both. --qr-sienna = brand accent. Structural, calm. Eyebrows, rules, the CTA band, decorative borders. --qr-accent = action accent. Watermelon means "click me", so it is buttons and links ONLY, never a large fill. Do not swap their jobs. That is the rule the spec is built on. */ --qr-deep-purple: #4E3326; /* Warm Brown — darkest colour, headings, dark bands */ --qr-aquamarine: #7FD9C9; /* Light Teal — accents on dark bands. INVENTED, see note below */ --qr-accent: #FF3D57; /* Watermelon — buttons and links only */ --qr-accent-dark: #E62945; /* Watermelon Deep — hover / pressed / focus */ --qr-accent-wash: #FFE4E8; /* pale watermelon — pill and tag backgrounds */ --qr-sienna: #B0512A; /* Burnt Sienna — eyebrows, rules, CTA band, borders */ --qr-sienna-dark: #8E3F1F; /* Burnt Sienna hover / pressed */ --qr-teal: #2C8C82; /* Teal — the CTA band fill and other large fills */ --qr-teal-ink: #20685F; /* Teal Ink — the brand accent: eyebrows, rules, accent headings */ --qr-teal-deep: #17504A; /* Teal Ink hover / pressed */ --qr-teal-tint: #E4F1EE; /* soft teal fill behind chips and tags */ --qr-espresso: #2C1A0E; /* unchanged — already a warm dark brown, still works */ --qr-fog: #FAF2E7; /* Warm Ivory — page and light section background */ --qr-fog-mid: #F0E4D2; /* Warm Ivory Mid — secondary light sections */ --qr-white: #ffffff; /* --qr-aquamarine is the one colour here that is NOT in the YQE spec. The spec has no "accent on a dark band" colour, because the YQE page has no dark bands. This site has five. Aquamarine #7FFFD4 is cold against warm brown, and the spec's Teal #2C8C82 only reaches 2.8:1 on #4E3326, which is unreadable. #7FD9C9 is that teal lightened to 6.9:1 so it stays in the teal family and stays legible. This is the open question from the brief, made concrete. */ /* Neutrals for body copy. Rewarmed from the purple-tinted originals (#453352 / #5a4762 / #353535), which read cold against Warm Ivory. */ --qr-body: #5C4436; /* body copy on light backgrounds */ --qr-body-soft: #6F564A; /* secondary copy, card excerpts */ --qr-meta: #6F564A; /* post meta */ /* Astra's own global-color-palette CSS variables, mapped onto the palette above. Overriding these fixes this child theme's look AND, as a side effect, the legacy GreenShift blocks on checkout/dashboard/login/sales pages that reference var(--wp--preset--color--ast-global-color-0..8) but had nothing to resolve to while Astra was inactive. This is a best-effort slot mapping — check those specific legacy pages once you preview and flag anything that looks like the wrong color in the wrong slot. */ --ast-global-color-0: var(--qr-accent); /* primary / CTAs */ --ast-global-color-1: var(--qr-accent-dark); /* hover / pressed */ --ast-global-color-2: var(--qr-deep-purple); /* headings, dark text */ --ast-global-color-3: var(--qr-deep-purple); /* body text */ --ast-global-color-4: var(--qr-fog); /* light section backgrounds */ --ast-global-color-5: var(--qr-white); /* cards, contrast on fog */ --ast-global-color-6: var(--qr-aquamarine); /* accents on dark purple only */ --ast-global-color-7: var(--qr-espresso); /* alt dark section */ --ast-global-color-8: var(--qr-fog-mid); /* secondary light sections */ } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--qr-deep-purple); background: var(--qr-white); line-height: 1.7; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif; font-weight: 600; font-style: italic; line-height: 1.25; } h1 { font-size: 60px; } h2 { font-size: 50px; } h3 { font-size: 40px; } h4 { font-size: 30px; } h5 { font-size: 24px; } h6 { font-size: 20px; } /* ──────────────────────────────────────────────────────────── Heading colour, and why the selector looks like this. Greenshift's global settings set every h1 to ast-global-color-4 (Fog — near-white, invisible on a light background). That one bad setting is the only reason Greenshift's global custom CSS used to carry a block of `!important` colour utilities: they existed purely to fight it back. This rule replaces that whole workaround. `:not([class*="text-"])` lifts specificity to (0,2,1), which beats Greenshift's `:root h1` (0,1,1), while still letting an explicit Tailwind utility (text-ember, text-deep-purple, ...) win on any element that asks for one. No !important needed anywhere. Note the predicate matches Tailwind size classes too (text-5xl), so a heading carrying a size class but no colour class opts out of this default. Every such heading in these templates already sets its own colour. This is the same trade-off the previous Greenshift rule made, kept deliberately for continuity. ──────────────────────────────────────────────────────────── */ :root h1:not([class*="text-"]), :root h2:not([class*="text-"]), :root h3:not([class*="text-"]), :root h4:not([class*="text-"]), :root h5:not([class*="text-"]), :root h6:not([class*="text-"]) { color: var(--qr-deep-purple); } /* ──────────────────────────────────────────────────────────── Fix found 2026-08-17, same day as the rule above: emptying Greenshift's custom CSS also removed the !important that was quietly propping up every heading carrying a plain text-* utility class (text-ember, text-deep-purple, etc). A bare Tailwind class has specificity (0,1,0); Greenshift's own `:root h1{color:...Fog}` element override is (0,1,1) and always wins a fair fight. The old !important masked that; removing it exposed it, and two live hero headlines went Fog-on-Fog before this was caught. Fix: give each heading-color utility a (0,2,1) selector, same technique as the rule above, so it beats Greenshift's element override on any heading tag without needing !important. ──────────────────────────────────────────────────────────── */ /* Renee 2026-08-26: "Make all the headings the dark brown colour, same as the heading The spinning." So an accent heading is no longer an accent colour at all, it is Warm Brown like every other heading. The ONE exception she named is the hero's second line, "You need a business that was actually built for you." That is an h1.text-ember, and it goes bright Watermelon. The `h1 .text-ember` half of the selector catches the same pattern on Work With Me, where the italic second half of the headline is an inside the h1 rather than the h1 itself. */ :root h1.text-ember, :root h1 .text-ember { color: var(--qr-accent); } :root :is(h2, h3, h4, h5, h6).text-ember { color: var(--qr-deep-purple); } :root :is(h2, h3, h4, h5, h6).text-ember-dark { color: var(--qr-deep-purple); } :root :is(h1, h2, h3, h4, h5, h6).text-deep-purple { color: var(--qr-deep-purple); } :root :is(h1, h2, h3, h4, h5, h6).text-aquamarine { color: var(--qr-aquamarine); } :root :is(h1, h2, h3, h4, h5, h6).text-fog { color: var(--qr-fog); } :root :is(h1, h2, h3, h4, h5, h6).text-fog-mid { color: var(--qr-fog-mid); } :root :is(h1, h2, h3, h4, h5, h6).text-white { color: var(--qr-white); } :root :is(h1, h2, h3, h4, h5, h6).text-espresso { color: var(--qr-espresso); } /* Blog post titles and header meta. Astra's own markup, previously patched with !important from Greenshift's custom CSS because the h1 override above rendered them in Fog on a light banner. Ported here so Greenshift's global CSS box can stay empty. */ :root header.entry-header:not(.related-entry-header) .entry-title, :root header.entry-header:not(.related-entry-header) .entry-title a { color: var(--qr-deep-purple); } :root header.entry-header:not(.related-entry-header) .entry-meta, :root header.entry-header:not(.related-entry-header) .entry-meta a, :root header.entry-header:not(.related-entry-header) .ast-blog-single-element { color: var(--qr-meta); } /* Sienna Warmth makes every text link Watermelon. Headings that happen to be links stay on their own colour. */ a { color: var(--qr-accent); } a:hover, a:focus { color: var(--qr-accent-dark); } :is(h1, h2, h3, h4, h5, h6) a { color: inherit; } /* A link that has been explicitly given the dark-band accent keeps it. The blanket `a` rule above was overriding .text-aquamarine on the one link sitting inside a dark band ("Your Quiet Edge starts here"), turning it Watermelon at 3.3:1 on Warm Brown. Off-palette for that band, and under the readable floor. */ :root a.text-aquamarine { color: var(--qr-aquamarine); } /* ══ PHASE 0 PREVIEW SHIMS — delete these in Phase 2 ═══════════════════ The templates hardcode two things as inline styles, and inline styles beat the cascade, so changing the palette alone cannot reach them: 1. The purple-tinted body neutral #453352 (and #5a4762), written out 29 times across front-page.php and page-about.php. It reads cold and slightly lilac against Warm Ivory. 2. var(--qr-accent) used for DECORATIVE borders — the two photo frames and the three pull-quote left rules. Those are structure, not calls to action, so under this palette they belong on Burnt Sienna. Leaving them on Watermelon breaks the one rule the spec is built on: Watermelon means "click me". Phase 2 replaces those literals with var(--qr-body) and var(--qr-sienna) in the templates themselves, and this whole block gets deleted. Until then these repoint them without 29 separate edits. */ [style*="#453352"] { color: var(--qr-body) !important; } [style*="#5a4762"] { color: var(--qr-body-soft) !important; } [style*="solid var(--qr-accent)"] { border-color: var(--qr-sienna) !important; } /* ══ ROUND 4 — RENEE'S SPECIFIC NOTES FROM v1, 2026-08-26 ══════════════ Worked from the reverted first draft. Each rule below is one of her notes. Net effect: a lot more bright Watermelon, and Burnt Sienna kept sparingly. After this round Sienna survives on exactly two things, the testimonial quote marks and the photo frames, which is the "use ember sparingly" she asked for. Headings and the hero exception are handled further up, with the other heading rules, so they sit next to what they override. */ /* "Change the little eyebrow above the Spinning line to Watermelon and match all of them." That is the 52x2px .section-rule bar, not a text eyebrow, since there is no text eyebrow above The spinning. Taking "match all of them" to cover the text .eyebrow elements too, because they read as the same small accent mark and they were the same colour before. If you only wanted the bars, delete the second line. The eyebrows on the DARK bands are a different class (.text-aquamarine) and stay Light Teal. Watermelon on Warm Brown is 3.3:1, which is under the readable floor for 13px uppercase, so they should not follow. UPDATE, same day: the text eyebrows went back to Warm Brown. Watermelon on them measured 3.1:1 on Warm Ivory and 3.5:1 on white, and these are phrases and sentences at 18px rather than short uppercase micro-labels, so it was genuinely hard to read. The .section-rule bars STAY Watermelon, which keeps the bright accent in the eyebrow position without putting it under any running text. Note there are FOUR .eyebrow elements on this page, not the two the earlier contrast table implied. That table collapsed rows sharing a colour and background, so "For the woman who already knows enough" stood in for itself and "How Your Quiet Edge works", and "What other women have found" stood in for itself and "Questions I get asked". All four have the same problem, so all four moved together. Two Watermelon and two brown would have read as arbitrary. */ :root .section-rule { background-color: var(--qr-accent); } :root .eyebrow { color: var(--qr-deep-purple); } /* "Change the How do you actually want to live to the brown." Scoped to p so the testimonial quote marks, which are div.font-serif .text-ember, keep their Sienna. */ :root p.font-serif.text-ember { color: var(--qr-deep-purple); } /* "Check marks to watermelon." The ✓ spans are font-semibold and the testimonial attributions are font-normal, which is what separates them, since both are span.text-ember. The ✕ markers in the not-for-you list are untouched and stay muted. */ :root span.text-ember.font-semibold { color: var(--qr-accent); } /* "Same with the pipe on the And no system line." Pull-quote pipes only. Sits after the general border shim above so it wins the tie, which leaves the 1.5px photo frames on Sienna. */ [style*="border-left:2px solid var(--qr-accent)"] { border-color: var(--qr-accent) !important; } /* "Make the Take me to the Edge block to teal and then the button to watermelon." The button is repointed with the other inline shims above. */ .bg-ember { background-color: var(--qr-teal) !important; } /* Same problem on the dark bands. Every heading and paragraph sitting on bg-deep-purple is hardcoded to the pale lilac #F3EEF5, or to rgba(243,238,245,·) at four different opacities for the softer tiers. Lilac on Warm Brown reads pink and slightly dirty; these repoint it at Warm Ivory and keep the three opacity tiers roughly intact. The last rule catches the aquamarine hairline on the investment card, and the one after it the cool purple divider rules on light sections. */ [style*="#F3EEF5"] { color: var(--qr-fog) !important; } [style*="rgba(243,238,245,.6"] { color: rgba(250,242,231,.64) !important; } [style*="rgba(243,238,245,.7"] { color: rgba(250,242,231,.75) !important; } [style*="rgba(243,238,245,.8"] { color: rgba(250,242,231,.84) !important; } [style*="rgba(127,255,212"] { border-color: rgba(127,217,201,.24) !important; } [style*="rgba(52,21,57,.1"] { border-color: rgba(78,51,38,.18) !important; } /* Three more inline literals the computed-style audit turned up, none of which any search of the palette would have found: - a "Start here" button hardcoded to Deep Purple, sitting IN the CTA band. Purple button on a teal band. - the ✕ markers in the not-for-you list, on a muted lilac #9a8aa2. - one section background written as a literal #D0C9C0 rather than the bg-fog-mid class every other section uses. */ /* The "Start here" button inside the CTA band. Was hardcoded to the old Deep Purple; Renee wants it Watermelon on the teal band. */ [style*="background:#341539"] { background-color: var(--qr-accent) !important; } [style*="color:#9a8aa2"] { color: var(--qr-body-soft) !important; } [style*="background:#D0C9C0"] { background-color: var(--qr-fog-mid) !important; } /* The second set of ✕ markers is styled with the accent variable rather than a literal, so it turned Watermelon when the tokens split. A ✕ in a "this is not for you" list is not a call to action. Scoped to span so the "See how to start" link, which uses the same variable and IS a link, keeps its Watermelon. */ span[style*="color:var(--qr-accent-dark)"] { color: var(--qr-body-soft) !important; } /* ══ PALETTE COPIES THAT LIVE OUTSIDE THE THEME ════════════════════════ The August 2026 consolidation called the --qr-* block at the top of this file "the single source of truth, change a colour HERE and nowhere else". It is not, and Phase 0 found the two copies it missed. Both are in the DATABASE, which is why a search of the theme files comes back clean and the change still lands half-applied: 1. The footer block widget (block-52 in footer-widget-2) opens with its own :root block: --qr-purple, --qr-aqua, --qr-watermelon, --qr-fog, --qr-white, --qr-border. It is printed after this stylesheet, so at equal specificity it wins. That single redeclaration of --qr-fog is why Warm Ivory did not reach any light section on the first pass, while --qr-fog-mid (which the widget does not declare) came through correctly. 2. Greenshift's global CSS sets --fog / --mid-fog / --ember / --dark-ember / --deep-purple / --aquamarine on body, plus the --wp--preset--color--* slots that its blocks read. Neither is reachable from a draft theme: drafts sandbox theme files only. So for the preview they are beaten on specificity instead. :root:root is (0,2,0) and beats the widget's plain :root (0,1,0); html body is (0,0,2) and beats Greenshift's body (0,0,1). No !important needed either way. PHASE 2 FIXES THE CAUSE: fold the widget's :root into the block at the top of this file, and repoint Greenshift through its own API. Then this entire section gets deleted. Until that happens, the palette still lives in three places and will drift again. */ :root:root, html body { /* the footer widget's copy */ --qr-fog: #FAF2E7; --qr-purple: #4E3326; --qr-aqua: #7FD9C9; --qr-watermelon: #FF3D57; /* Greenshift's copy */ --fog: #FAF2E7; --mid-fog: #F0E4D2; --deep-purple: #4E3326; --aquamarine: #7FD9C9; --ember: #B0512A; --dark-ember: #8E3F1F; /* the wp preset slots Greenshift blocks read */ --wp--preset--color--brand: #4E3326; --wp--preset--color--heading: #4E3326; --wp--preset--color--border: #F0E4D2; --wp--preset--color--card-border: #F0E4D2; } /* Astra's own button classes, as a belt-and-suspenders layer alongside the CSS variable overrides above (covers anywhere Astra reads a theme_mod color directly instead of the ast-global-color vars). */ .ast-button, button, .button, [type="submit"] { background-color: var(--qr-accent); border-color: var(--qr-accent); color: var(--qr-white); } .ast-button:hover, button:hover, .button:hover, [type="submit"]:hover { background-color: var(--qr-accent-dark); border-color: var(--qr-accent-dark); }