/* Theme Name: GB Test Child Description: Standalone block theme (no parent) for the core-blocks + GenerateBlocks + ACSS RQ build. Not actually a child theme despite the folder/theme name - kept the name for continuity with existing build history/docs rather than a disruptive rename. Version: 1.5 */ /* Design tokens (color, gradient, font family) are registered in theme.json and generate --wp--preset--* custom properties automatically - that JSON is the source of truth. These aliases just keep every section's existing CSS (var(--sage), var(--font-heading), etc.) working unchanged after the switch, so nobody had to hand-edit hundreds of property references across the file. */ :root { --sage-ultra-dark: var(--wp--preset--color--rq-sage-ultra-dark); --sage: var(--wp--preset--color--rq-sage); --sage-light: var(--wp--preset--color--rq-sage-light); --sage-ultra-light: var(--wp--preset--color--rq-sage-ultra-light); --graphite-ultra-dark: var(--wp--preset--color--rq-graphite-ultra-dark); --graphite-mid: var(--wp--preset--color--rq-graphite-mid); --graphite-light: var(--wp--preset--color--rq-graphite-light); --bone-white: var(--wp--preset--color--rq-bone-white); --rq-white: var(--wp--preset--color--rq-white); --clay: var(--wp--preset--color--rq-clay); --clay-dark: var(--wp--preset--color--rq-clay-dark); --clay-ultra-dark: var(--wp--preset--color--rq-clay-ultra-dark); --clay-light: var(--wp--preset--color--rq-clay-light); --clay-ultra-light: var(--wp--preset--color--rq-clay-ultra-light); --rq-border: var(--wp--preset--color--rq-border); --font-heading: var(--wp--preset--font-family--heading); --font-body: var(--wp--preset--font-family--body); --font-accent: var(--wp--preset--font-family--accent); --font-signature: var(--wp--preset--font-family--signature); } body { font-family: var(--font-body); color: var(--graphite-mid); background: var(--bone-white); } /* WP auto-generates a global-styles stylesheet inside the block editor iframe that includes its own `body { background: var(--wp--preset--color--base) }` rule, injected AFTER this file's editor-style copy - same specificity, later wins, so any section with no background of its own (Hero, Offerings, About, FAQ) shows that preset's gray instead of the real page background in the editor canvas only (front end is unaffected, it doesn't load that stylesheet). Target the editor's own wrapper class to legitimately outrank it. */ body.editor-styles-wrapper { background: var(--bone-white); } h1, h2, h3 { font-family: var(--font-heading); color: var(--graphite-ultra-dark); font-weight: 500; letter-spacing: -0.01em; } .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; } .eyebrow { font-family: var(--font-body); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-ultra-dark); display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--sage-ultra-dark); display: inline-block; } .wp-block-post-title { display: none; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 2; } @media (max-width: 780px) { .wrap { padding: 0 22px; } } /* ============ NAV ============ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 30px 48px; display: flex; align-items: center; justify-content: space-between; transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, top 0.2s ease; } .site-nav.is-scrolled { padding: 18px 48px; background: rgba(248,246,243,0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 #DBD8D0; } /* Keep the fixed nav below the logged-in WP admin bar instead of underneath it. Matches WP core's own admin-bar breakpoints (admin-bar.min.css): 32px desktop, 46px tablet/mobile down to 600px, then the admin bar stops being fixed so no offset is needed. `.admin-bar` is only present on the body when the toolbar is actually showing, so logged-out visitors are unaffected. */ .admin-bar .site-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-nav { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .site-nav { top: 0; } } .nav-logo { font-family: var(--font-heading); font-size: var(--wp--preset--font-size--md); font-weight: 500; color: var(--graphite-ultra-dark); text-decoration: none; letter-spacing: 0.01em; margin: 0; } .nav-right { display: flex; align-items: center; gap: 44px; } .nav-links { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: var(--wp--preset--font-size--sm); font-weight: 500; text-decoration: none; color: var(--graphite-ultra-dark); position: relative; padding-bottom: 3px; opacity: 0.82; transition: opacity 0.25s ease; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--sage-ultra-dark); transition: width 0.35s cubic-bezier(.16,.8,.24,1); } .nav-links a:hover { opacity: 1; } .nav-links a:hover::after { width: 100%; } .nav-cta { font-size: var(--wp--preset--font-size--sm); font-weight: 500; text-decoration: none; color: var(--graphite-ultra-dark); border: 1px solid var(--graphite-ultra-dark); border-radius: 100px; padding: 9px 22px; transition: background 0.3s ease, color 0.3s ease; margin: 0; } .nav-cta:hover { background: var(--graphite-ultra-dark); color: var(--bone-white); } /* Rebuilt from raw HTML to real core blocks - nav-logo/nav-cta classes now sit on the wrapping Paragraph block instead of directly on the (Gutenberg rich-text links can't carry a class), so the anchor needs to explicitly pick up the color/decoration/pill styling instead of relying on the browser's default underlined-link style. */ .nav-logo a, .nav-cta a { color: inherit; text-decoration: none; } @media (max-width: 780px) { .site-nav { flex-wrap: wrap; padding: 18px 22px; row-gap: 14px; } .site-nav.is-scrolled { padding: 14px 22px; } .nav-logo { font-size: 16px; line-height: 1.3; max-width: 70%; } .nav-right { width: 100%; justify-content: space-between; gap: 0; order: 3; } .nav-links { gap: 18px; flex-wrap: wrap; } .nav-links a { font-size: var(--wp--preset--font-size--xxs); } .nav-cta { font-size: var(--wp--preset--font-size--xxs); padding: 8px 16px; } } /* ============ MOTION ============ */ /* Calm, once-only entrance motion - a slow fade+rise, never a bounce or anything abrupt. Hero pieces animate on page load (staggered slightly since they're already in view); everything else reveals on scroll via scroll-reveal.js, which adds .reveal/.is-revealed without needing any change to page content - it targets fixed selectors directly. */ @keyframes rq-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero-copy > * { opacity: 0; animation: rq-fade-up 0.9s cubic-bezier(.16,.8,.24,1) forwards; } .hero-copy .eyebrow { animation-delay: 0.1s; } .hero-copy h1 { animation-delay: 0.2s; } .hero-copy .lede { animation-delay: 0.32s; } .hero-copy .hero-actions { animation-delay: 0.44s; } .hero-photo-wrap { opacity: 0; animation: rq-fade-up 1.1s cubic-bezier(.16,.8,.24,1) forwards; animation-delay: 0.25s; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.16,.8,.24,1), transform 0.9s cubic-bezier(.16,.8,.24,1); } .reveal.is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero-photo-wrap { opacity: 1; animation: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* Shared hover cue for the site's secondary text-links (Hero's "See the offerings", Offerings' toggle/CTA, About's toggle) - a slight upward lift on the text itself, the same motion language as the primary buttons (.hero-actions .wp-block-button__link:hover above), just without the shadow/background since these are plain text links. The transition itself is declared on each element's own base rule below (not here) - a shared rule here was getting silently overridden by each element's later, more-specific base rule, which only listed border-color/color and dropped the transform transition entirely, making the lift snap instead of ease. */ .hero-actions .is-style-outline .wp-block-button__link:hover, .offering-toggle:hover, .offering-cta:hover, .about-copy .link-arrow:hover { transform: translateY(-2px); } /* ============ HERO ============ */ .hero { position: relative; padding: 0; min-height: 100vh; display: flex; flex-direction: row; align-items: center; } /* flex-direction explicit (not just relying on the row default) -- ACSS's "Default Section Styles" feature sets flex-direction:column on every top-level
via a :where() selector; harmless on sections that don't declare their own flex-direction, but silently flips this section's vertical centering to horizontal wherever ACSS's automatic.css is actually enqueued as a stylesheet. */ .hero-grid { width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 0; padding-top: 32px; } .hero-copy { position: relative; z-index: 5; padding: 0 0 0 48px; max-width: 560px; } .hero-copy .eyebrow { margin-bottom: 26px; } .hero h1 { font-size: var(--wp--preset--font-size--heading-xl); line-height: 1.08; font-weight: 500; } .hero-copy .lede { font-size: var(--wp--preset--font-size--md); line-height: 1.75; color: var(--graphite-mid); margin: 28px 0 38px; max-width: 440px; } .hero-actions { display: flex; align-items: center; gap: 28px; } .hero-photo-wrap { position: relative; height: 82vh; min-height: 560px; } /* Descendant-selector specificity (0,2,0) is needed, not just `.hero-photo`/ `.hero-photo-caption` alone (0,1,0) -- the block editor's own canvas CSS applies `position: relative` to every block wrapper via a single-class rule (`.block-editor-block-list__block`), same specificity as ours, and wins the tie in the editor context. Front end never has that competing rule, so this only visibly mattered inside wp-admin. Same fix pattern as the RQ project's button line-height issue: beat it on specificity, not `!important`. */ .hero-photo-wrap .hero-photo { position: absolute; top: 0; right: 0; width: 92%; height: 100%; border-radius: 6px 0 0 6px; overflow: hidden; box-shadow: -40px 40px 90px rgba(36,38,31,0.18); transition: box-shadow 0.6s ease; } .hero-photo .wp-block-image, .hero-photo figure { height: 100%; margin: 0; } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; transform: scale(1.02); transition: transform 0.8s cubic-bezier(.16,.8,.24,1); } .hero-photo-wrap .hero-photo-caption { position: absolute; right: -40px; top: 48px; background: var(--bone-white); padding: 22px 26px; border-radius: 4px; max-width: 230px; box-shadow: 0 24px 48px rgba(36,38,31,0.14); z-index: 6; transition: transform 0.6s cubic-bezier(.16,.8,.24,1), box-shadow 0.6s ease; } .hero-photo-caption .accent { font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--graphite-ultra-dark); } /* Subtle, unified hover: hovering anywhere on the photo area gently zooms the image and lifts the caption card in sync, rather than treating them as unrelated elements - calm/slow easing per Mark's "nothing abrupt" brief. */ .hero-photo-wrap:hover .hero-photo { box-shadow: -40px 40px 100px rgba(36,38,31,0.24); } .hero-photo-wrap:hover .hero-photo img { transform: scale(1.05); } .hero-photo-wrap:hover .hero-photo-caption { transform: translateY(-6px); box-shadow: 0 30px 56px rgba(36,38,31,0.2); } /* ============ BUTTONS ============ */ .hero-actions .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: var(--wp--preset--font-size--base); font-weight: 500; padding: 15px 32px !important; border-radius: 100px !important; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform 0.3s cubic-bezier(.16,.8,.24,1), box-shadow 0.3s ease, background 0.3s ease; line-height: normal; background: var(--graphite-ultra-dark); color: var(--rq-white); } .hero-actions .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(36,38,31,0.24); color: var(--rq-white); } .hero-actions .is-style-outline .wp-block-button__link { background: transparent; border: none; color: var(--graphite-mid); font-size: var(--wp--preset--font-size--sm); font-weight: 500; border-bottom: 1px solid var(--graphite-light) !important; border-radius: 0 !important; padding: 0 0 3px !important; transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(.16,.8,.24,1); } .hero-actions .is-style-outline .wp-block-button__link:hover { color: var(--graphite-ultra-dark); border-color: var(--graphite-ultra-dark) !important; box-shadow: none; } /* ============ QUOTE BAND ============ */ /* Background is now the block's own native gradient attribute (rq-quote-band preset, picked from the Style panel), not CSS - WP auto-generates the .has-rq-quote-band-gradient-background rule from the theme.json registration, so it doesn't need a rule here. This makes the gradient genuinely editable in the block editor while still being locked to the approved brand presets. */ .quote-band { padding: var(--wp--preset--spacing--section-py-lg) 0; } .quote-band .wrap { text-align: center; } .quote-band .accent { font-size: var(--wp--preset--font-size--accent-lg); line-height: 1.5; color: var(--graphite-ultra-dark); margin: 0; } /* Both .quote-band's padding and .accent's font-size are now fluid clamp() tokens (section-py-lg, accent-lg) that already floor to their mobile value below ~800px - the old fixed mobile overrides here are redundant. */ /* ============ OFFERINGS ============ */ /* Top padding is much smaller than bottom -- .hero is min-height:100vh with centered content, so it already leaves dead space below the hero-grid before this section even starts; a full 140px on top of that compounded into a much bigger gap than intended. */ .offerings { padding: var(--wp--preset--spacing--section-py-sm) 0 var(--wp--preset--spacing--section-py-lg); } /* Two-column layout on desktop (eyebrow+heading left, subhead right, bottom-aligned) -- pulled from the live site's real computed styles (ruhizandra.com/?page_id=2, logged in), not the centered single-column stack a generic "section head" pattern would suggest. */ .offerings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin: 0 0 90px; text-align: left; } .offerings-head .eyebrow { justify-content: flex-start; margin-bottom: 0; } .offerings-head h2 { font-size: var(--wp--preset--font-size--heading-lg); line-height: 1.15; margin: 18px 0 0; max-width: 560px; } .offerings-head .subhead { flex: 0 0 320px; max-width: 320px; font-size: var(--wp--preset--font-size--base); line-height: 1.7; color: var(--graphite-light); margin: 0; } @media (max-width: 900px) { .offerings-head { flex-direction: column; align-items: flex-start; gap: 24px; } .offerings-head .subhead { flex: none; max-width: none; } } .offering-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid #E2DFD6; } .offering-row:first-of-type { border-top: none; } .offering-row.is-reversed { direction: rtl; } .offering-row.is-reversed > * { direction: ltr; } .offering-media { position: relative; } .offering-photo { border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(36,38,31,0.14); } .offering-photo img { width: 100%; height: 460px; object-fit: cover; display: block; } .offering-num { position: absolute; top: -22px; left: -22px; width: 56px; height: 56px; border-radius: 50%; background: var(--bone-white); border: 1px solid #E2DFD6; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--wp--preset--font-size--md); color: var(--clay-ultra-dark); z-index: 2; } .offering-copy h3 { font-size: var(--wp--preset--font-size--offering-heading); margin: 0 0 18px; } .offering-teaser { font-size: var(--wp--preset--font-size--base); line-height: 1.75; color: var(--graphite-mid); margin: 0; } /* margin-top:0 cancels WP core's default block-gap margin (~24px) applied between .offering-detail and its preceding sibling block (offering-teaser) - without this it stacks with the intentional 12px first-child override below, leaving a much bigger gap than a normal paragraph space. Same category of fix as the footer/interstitial block-gap gotchas elsewhere in this file. */ .offering-row .offering-detail { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.45s cubic-bezier(.16,.8,.24,1); } .offering-detail-inner { overflow: hidden; } .offering-row.is-expanded .offering-detail { grid-template-rows: 1fr; } .offering-detail p { font-size: var(--wp--preset--font-size--base); line-height: 1.75; color: var(--graphite-mid); margin: 22px 0 0; } .offering-detail p:first-child { margin-top: 12px; } .held-for { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .held-for li { font-size: var(--wp--preset--font-size--base); line-height: 1.6; color: var(--graphite-mid); padding-left: 22px; position: relative; } .held-for li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--clay-dark); } .offering-meta { font-family: var(--font-body); font-style: italic; font-size: var(--wp--preset--font-size--base); color: var(--graphite-ultra-dark); margin: 22px 0 0 !important; } .offering-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; background: none; border: none; padding: 0; font-family: var(--font-body); font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--graphite-mid); line-height: normal; cursor: pointer; text-decoration: none; transition: color 0.25s ease, transform 0.25s cubic-bezier(.16,.8,.24,1); } .offering-toggle:hover { color: var(--graphite-ultra-dark); border-color: var(--graphite-ultra-dark); } .offering-toggle .arrow { display: inline-block; } .offering-row.is-expanded .offering-toggle .label-more { display: none; } .offering-row:not(.is-expanded) .offering-toggle .label-less { display: none; } /* The top "Learn more" trigger only makes sense while collapsed - once expanded, the collapse control lives at the bottom next to "Get in touch" instead (offering-footer-row below), so hide the top one rather than showing two redundant close controls at once. */ .offering-row.is-expanded .offering-toggle-top { display: none; } .offering-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; line-height: normal; font-family: var(--font-body); font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--graphite-mid); text-decoration: none; border-bottom: 1px solid var(--graphite-light); transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(.16,.8,.24,1); } .offering-cta:hover { color: var(--graphite-ultra-dark); border-color: var(--graphite-ultra-dark); } /* Bottom-of-detail row pairing the collapse control with the CTA link, separated by a pipe, per Mark's request to move "Show less" next to "Get in touch" instead of leaving it only at the top. */ .offering-footer-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 0; } .offering-footer-row .offering-toggle { margin-top: 0; } .offering-footer-row .offering-cta { margin-top: 0; } .offering-footer-sep { color: var(--rq-border); font-size: var(--wp--preset--font-size--sm); } @media (max-width: 900px) { /* .offerings' padding is now the fluid section-py-sm/section-py-lg tokens, which already floor to their mobile value below ~800px - no override needed. */ .offerings-head { margin-bottom: 56px; } .offering-row { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; } .offering-row.is-reversed { direction: ltr; } .offering-photo img { height: 300px; } .offering-num { top: -18px; left: 0; } } /* ============ MOBILE ============ */ @media (max-width: 780px) { /* .site-nav wraps to two rows on mobile (logo row + links row, ~128px tall) instead of desktop's single-row overlay, so it needs real clearance here -- 18px (tuned for desktop's shorter nav) let the fixed nav cover the eyebrow text. Not just a style preference; the wrapped nav actually occupies this space. */ .hero { min-height: auto; padding-top: 140px; padding-bottom: 60px; } .hero-grid { grid-template-columns: 1fr; padding-top: 0; gap: 40px; } .hero-copy { padding: 0 22px; max-width: none; } .hero h1 { font-size: clamp(32px, 9vw, 44px); } .hero-copy .lede { max-width: none; } /* align-items:center (not flex-start) centers the outline "Online Sessions" link under the full-width primary button. The primary button keeps its explicit width:100% below, so an explicit width still beats the centering. */ .hero-actions { flex-direction: column; align-items: center; gap: 18px; } .hero-actions .wp-block-button:not(.is-style-outline) { width: 100%; } .hero-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link { width: 100%; justify-content: center; box-sizing: border-box; white-space: nowrap; } .hero-photo-wrap { position: relative; height: auto; min-height: 0; padding: 0 22px; } /* Match the desktop rule's specificity (.hero-photo-wrap .hero-photo is 0,2,0) -- a bare `.hero-photo` here (0,1,0) loses the cascade regardless of viewport, leaving the desktop `position:absolute` in effect and collapsing the wrap to height:0, which let the photo bleed into whatever section follows. Same specificity-not-!important fix pattern as the button/editor-canvas issues already documented above. */ .hero-photo-wrap .hero-photo { position: relative; top: auto; right: auto; width: 100%; height: 60vh; min-height: 320px; border-radius: 6px; box-shadow: none; } .hero-photo-wrap .hero-photo-caption { position: relative; right: auto; top: auto; margin: 16px 22px 0; max-width: none; text-align: center; } } /* ============ INTERSTITIAL (native Cover block, 2026-07-08) ============ */ /* Rebuilt from a hand-coded video+overlay div into a real core/cover block so the video is swappable via the Media Library (Replace button), no code needed. Cover's own dimRatio is 0 (no flat dim) -- our real gradient look is applied here instead, since Cover only supports a flat color/opacity dim natively. */ .wp-block-cover.interstitial { overflow: hidden; } .wp-block-cover.interstitial::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), linear-gradient(180deg, rgba(36,38,31,0.05) 0%, rgba(36,38,31,0.35) 100%); } .wp-block-cover.interstitial .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; padding: 64px 48px; } .interstitial .accent { font-size: var(--wp--preset--font-size--accent-xl); color: var(--rq-white); max-width: 1500px; line-height: 1.35; margin: 0; } @media (max-width: 780px) { /* Cover's own min-height is an inline style (higher specificity than a plain class rule) -- !important is the correct, accepted override here, not a workaround, since there's no other way to beat an inline style short of JS. */ .wp-block-cover.interstitial { min-height: 340px !important; } .wp-block-cover.interstitial .wp-block-cover__inner-container { padding: 40px 26px; } .interstitial .accent { white-space: normal; } } /* ============ ABOUT ============ */ .about { position: relative; padding: var(--wp--preset--spacing--section-py-compact) 0 var(--wp--preset--spacing--section-py-xl); } .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; align-items: center; } .about-photo-col { position: relative; } .about-photo { border-radius: 4px; overflow: hidden; aspect-ratio: 3/3.7; max-width: 420px; box-shadow: 0 50px 90px rgba(36,38,31,0.16); } .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .about-photo-tag { position: absolute; bottom: 36px; left: -30px; background: var(--graphite-ultra-dark); color: var(--bone-white); padding: 16px 22px; border-radius: 4px; max-width: 320px; box-shadow: 0 20px 40px rgba(36,38,31,0.22); } /* white-space:nowrap keeps "Therapeutic Arts Facilitator" from wrapping onto its own line -- the
between name and title still forces that break, nowrap only stops width-driven wrapping within each line. */ .about-photo-tag .accent { font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--sage-light); white-space: nowrap; } .about-copy { padding: 0 20px 0 90px; } .about-copy .eyebrow { margin-bottom: 24px; } .about-copy h2 { font-size: var(--wp--preset--font-size--heading-md); line-height: 1.2; margin-bottom: 26px; max-width: 480px; } .about-copy p { font-size: var(--wp--preset--font-size--base); line-height: 1.8; color: var(--graphite-mid); max-width: 460px; margin-bottom: 20px; } .about-copy .link-arrow { margin-top: 16px; } /* margin-top:0 cancels WP core's default block-gap margin (~24px) between .expand-wrap and its preceding sibling paragraph - same fix as Offerings' .offering-detail below, so the reveal continues at a normal paragraph gap instead of an inflated one. */ .about-copy .expand-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows 0.6s cubic-bezier(.16,.8,.24,1), opacity 0.45s ease; } .about-copy .expand-wrap-inner { overflow: hidden; } .about-copy .expand-wrap.is-open { grid-template-rows: 1fr; opacity: 1; } .about-copy .expand-wrap p:first-child { margin-top: 0; } .about-copy .link-arrow.is-hidden { display: none; } .about-signoff { font-size: var(--wp--preset--font-size--base); line-height: 1.8; color: var(--graphite-mid); font-style: normal; } .rq-signature { font-family: var(--font-signature); font-style: normal; font-size: var(--wp--preset--font-size--signature); line-height: 1.6; color: var(--graphite-ultra-dark); display: inline-block; } /* Toggle button + link styling shared with Offerings' .offering-toggle pattern (arrow rotates, border-bottom underline) but About's trigger disappears entirely on expand instead of relabeling -- see about-toggle.js. */ .about-copy .link-arrow { display: inline-flex; align-items: center; gap: 9px; background: none; border: none; padding: 0 6px; font-family: var(--font-body); font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--graphite-mid); line-height: normal; cursor: pointer; text-decoration: none; transition: color 0.25s ease, transform 0.25s cubic-bezier(.16,.8,.24,1); } .about-copy .link-arrow:hover { color: var(--graphite-ultra-dark); border-color: var(--graphite-ultra-dark); } .about-copy .link-arrow .arrow { display: inline-block; } @media (max-width: 900px) { /* .about's padding is now the fluid section-py-compact/section-py-xl tokens, which already floor to their mobile value below ~800px - no override needed. */ .about-grid { grid-template-columns: 1fr; gap: 32px; } .about-photo { max-width: 280px; margin: 0 auto; } /* The tag was hidden here because the desktop treatment is an absolute chip hanging off the photo's left edge, which clips at mobile widths. Restored as a static centered chip that still overlaps the photo bottom via the negative top margin, so the name/title is visible on mobile. nowrap is released so "Therapeutic Arts Facilitator" can wrap on narrow screens. position:relative + z-index (not static) is required: with a static tag the photo's image content paints in the inline phase ON TOP of the tag's block background, so the overlapping strip of the dark chip vanished and the name text floated over bare photo. Relative positioning lifts the whole chip. */ .about-photo-tag { display: block; position: relative; z-index: 2; margin: -30px auto 0; left: auto; bottom: auto; width: fit-content; max-width: 260px; text-align: center; padding: 14px 20px; } .about-photo-tag .accent { white-space: normal; } .about-copy { padding: 0 26px; text-align: left; } .about-copy p { max-width: none; } } /* ============ FAQ ============ */ /* CSS pulled from the live site's real rules (ruhizandra.com/?page_id=2, logged in). */ /* Background color is now the block's native backgroundColor attribute (rq-sage-ultra-light preset) - editable/lockable in the Style panel. */ .faq { padding: var(--wp--preset--spacing--section-py-md) 0; } .faq-head { text-align: center; max-width: 640px; margin: 0 auto 64px; } .faq-head h2 { font-size: var(--wp--preset--font-size--heading-md); line-height: 1.2; margin-top: 18px; } .faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--rq-border); } /* Rebuilt on the native core/details block (2026-07-08), replacing the old custom button+JS accordion -- no JS at all now, browser handles expand/ collapse natively via
/. Multiple items can be open at once (accepted trade-off vs the old single-open behavior; the newer HTML `name=` exclusive-group attribute isn't broadly supported enough yet and Gutenberg's own details block doesn't expose it). */ .faq-item { border-bottom: 1px solid var(--rq-border); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 26px 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: var(--wp--preset--font-size--md); font-weight: 500; color: var(--graphite-ultra-dark); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; flex-shrink: 0; width: 14px; height: 9px; background-color: var(--graphite-light); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center; transition: transform 0.35s cubic-bezier(.16,.8,.24,1); } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-item p { font-size: var(--wp--preset--font-size--base); line-height: 1.75; color: var(--graphite-mid); max-width: 640px; padding: 0 0 26px; margin: 0; } @media (max-width: 780px) { /* .faq's padding is now the fluid section-py-md token, which already floors to its mobile value below ~800px - no override needed. */ .faq-head { margin-bottom: 40px; } .faq-item summary { font-size: var(--wp--preset--font-size--base); padding: 20px 0; } } /* ============ CTA / CONTACT (native Cover block, 2026-07-08) ============ */ /* Rebuilt onto core/cover so the texture image is swappable via the Media Library (Replace button), same rationale as the Interstitial rebuild. dimRatio is 0 -- the real dark gradient look is a scoped overlay instead, since Cover's native dim is flat-color only. */ .wp-block-cover.cta { margin-top: 0; padding: var(--wp--preset--spacing--section-py-xl) 0; text-align: center; } .wp-block-cover.cta::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(24,26,20,0.82) 0%, rgba(24,26,20,0.90) 100%); } .wp-block-cover.cta .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; } .cta h2 { color: var(--rq-white); font-size: var(--wp--preset--font-size--heading-lg); line-height: 1.2; max-width: 640px; margin: 22px auto 20px; } .cta .lede { color: rgba(255,255,255,0.75); font-size: var(--wp--preset--font-size--base); margin: 0 0 8px; } .cta .eyebrow { justify-content: center; color: var(--sage-light); } .cta .eyebrow::before { background: var(--sage-light); } .cta-action { display: inline-block; } .cta-btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 24px 0 0; } /* Toggle buttons are now real core/button blocks (wp-block-button wrapper + wp-block-button__link anchor) instead of raw