/* Theme Name: Goldvion Theme URI: https://github.com/abdullahharithworks/goldvion-research Description: Goldvion storefront theme. Child of Twenty Twenty-Five. Design tokens live in theme.json so the client can adjust them in the Site Editor rather than needing us. Author: Goldvion build team Template: twentytwentyfive Version: 0.1.0 Requires at least: 6.9 Requires PHP: 8.3 Text Domain: goldvion */ /* * Keep this file thin. Anything expressible in theme.json belongs there — * it stays editable by the client in the Site Editor, which is the point. * CSS here is only for what theme.json cannot express. */ /* --- Primitives (T-002) --- The reference's composited greys, as custom properties derived from the theme.json presets so theme.json stays the single source of the base colours. For our own component CSS only — anything set through a block attribute (textColor, backgroundColor) must use a preset from theme.json instead; .has-*-color wins with !important, so a --gv-* variable used that way would silently lose. See state/sprints/S-002/notes/T-001-primitives.md §4.2 for what each percentage is used for. */ :root { --gv-fg-60: color-mix(in srgb, var(--wp--preset--color--charcoal) 60%, transparent); --gv-fg-50: color-mix(in srgb, var(--wp--preset--color--charcoal) 50%, transparent); --gv-fg-45: color-mix(in srgb, var(--wp--preset--color--charcoal) 45%, transparent); --gv-fg-40: color-mix(in srgb, var(--wp--preset--color--charcoal) 40%, transparent); --gv-fg-30: color-mix(in srgb, var(--wp--preset--color--charcoal) 30%, transparent); --gv-fg-25: color-mix(in srgb, var(--wp--preset--color--charcoal) 25%, transparent); --gv-fg-20: color-mix(in srgb, var(--wp--preset--color--charcoal) 20%, transparent); --gv-fg-10: color-mix(in srgb, var(--wp--preset--color--charcoal) 10%, transparent); --gv-ivory-90: color-mix(in srgb, var(--wp--preset--color--ivory) 90%, transparent); --gv-ivory-80: color-mix(in srgb, var(--wp--preset--color--ivory) 80%, transparent); --gv-ivory-70: color-mix(in srgb, var(--wp--preset--color--ivory) 70%, transparent); --gv-ivory-60: color-mix(in srgb, var(--wp--preset--color--ivory) 60%, transparent); --gv-ivory-50: color-mix(in srgb, var(--wp--preset--color--ivory) 50%, transparent); --gv-ivory-40: color-mix(in srgb, var(--wp--preset--color--ivory) 40%, transparent); --gv-ivory-20: color-mix(in srgb, var(--wp--preset--color--ivory) 20%, transparent); --gv-ivory-18: color-mix(in srgb, var(--wp--preset--color--ivory) 18%, transparent); --gv-gold-50: color-mix(in srgb, var(--wp--preset--color--gold) 50%, transparent); --gv-gold-40: color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent); --gv-gold-30: color-mix(in srgb, var(--wp--preset--color--gold) 30%, transparent); --gv-gold-20: color-mix(in srgb, var(--wp--preset--color--gold) 20%, transparent); --gv-gold-15: color-mix(in srgb, var(--wp--preset--color--gold) 15%, transparent); --gv-gold-35: color-mix(in srgb, var(--wp--preset--color--gold) 35%, transparent); /* T-004: border-palegold/10 (Checkout.jsx:108 review-table rows) has no existing primitive; same color-mix form as its neighbours above. */ --gv-gold-10: color-mix(in srgb, var(--wp--preset--color--gold) 10%, transparent); /* S0-1 (T-009): the export's section vertical rhythm is a step — `py-24 md:py-32` (96px -> 128px at >=768px) — not the continuous `clamp(4rem,9vw,8rem)` every pattern's own block attribute currently emits inline. Patterns reference this variable in their padding attribute instead of the literal clamp() so the step can be applied here, in one place, without fighting inline-style specificity — redefining a custom property a `var()` points to always wins, regardless of what property consumes it. All seven content sections now resolve their padding from this one variable, by two different routes: experience, how-it-works, tiers, craftsmanship and faq carry it inline from their pattern's padding attribute, while testimonials (.gv-testimonials) and instagram (.gv-ig) pick it up from their own class rules further down this file. Different delivery, same lever — changing it here reaches all seven. The hero is the deliberate exception: its vertical space comes from .gv-hero__slide's own padding, not from this step. S-008: halved from the export's 96/128px step to 44/64px on the client's instruction. The gap between two sections is this value twice plus core's 1.2rem block gap, so the export's step read as 275px of empty screen before every section title at >=768px; it is now 147px. The export's own figure is recorded as a delta in design-reference/export-reconstruction-spec.md — this is a deliberate departure from it, not drift. */ --gv-section-pad-y: 2.75rem; /* 44px */ /* S-008: the height of the sticky site header. THIS EXISTS BECAUSE OUR HEADER IS NOT THE EXPORT'S HEADER. The client's export puts a `fixed` header OVER the hero (design-reference/.../components/Header.jsx), so `h-screen` there is exactly the viewport. Ours is `position: sticky` (see .wp-block-template-part:has(> .gv-header-root) below), which sits in normal flow and pushes everything after it down by its own height — so anything sized to the viewport must subtract this or it overflows the fold by exactly one header. That is what put the hero's slide dots off-screen until S-008. The header has no explicit height; this is the sum of what makes it: .gv-icon-btn's 2.5rem row + 2 x .gv-site-header__bar's 1.15rem padding + the 1px hairline = 77.8px. Measured 78px at both 390px and 1592px wide, and no media query touches the header, so it is stable across breakpoints. If either of those two rules changes, change this with it. */ --gv-header-h: 4.875rem; /* 78px */ /* S-008: the band at the bottom of the viewport owned by .gv-shipping-pill, which is position: fixed. 41px pill + its 1rem inset; larger below 600px, where the pill goes full-bleed and wraps to two lines. This is NOT reserved out of the hero's height. It was, briefly, and that was wrong: the pill is `fixed`, so it floats over content and never needed space carved out for it — carving it out just left a strip of bare ivory under the hero. The hero fills the screen; this value is used only to lift the slide dots clear of the pill on the widths where the two actually collide. See .gv-hero__dots. */ --gv-hero-bottom-clear: 3.5rem; /* 56px */ /* S0-3/X-12 (T-009): redefines the theme.json `section-title` preset's own custom property rather than editing theme.json directly — the export's h2 is a step (text-4xl -> text-5xl at >=768px), not the continuous clamp() theme.json emits, and theme.json cannot express a media-query step. Redefining the variable a `var()` points to works regardless of whether `.has-section-title-font-size` carries `!important` (T-002 spec §12.4 flagged this as unverified) — the property still resolves to whatever this variable computes to. Verified live: see T-009's task note. Affects all eight section h2s (S0-3); TwoExperiences is the only one built by this task. */ --wp--preset--font-size--section-title: 2.25rem; /* 36px */ } @media (min-width: 768px) { :root { --gv-section-pad-y: 4rem; /* 64px */ --wp--preset--font-size--section-title: 3rem; /* 48px */ } } /* Focus ring and text-selection colour (T-004, source: src/index.css's `*:focus-visible` / `::selection`). Global default so any element without its own focus treatment gets the corrected pale gold ring; more specific per-component rules elsewhere in this file (e.g. .gv-inside__close on a dark backdrop, the WooCommerce form inputs) have higher specificity and keep winning on purpose — those are earlier deliberate contrast choices, not something this task reverts. */ :focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; } ::selection { background: var(--gv-gold-35); color: var(--wp--preset--color--charcoal); } /* Custom scrollbar (B-037), source: src/index.css:89-91 in the export — a bare selector, so it reaches every scrollable surface site-wide, not just the "What's Inside?" modal where the human found the gap. An 8px bar, an ivory track and a 35%-alpha gold thumb at 4px radius; both colours already have palette tokens (--wp--preset--color--ivory, --gv-gold-35 — the same composited token ::selection above uses), so this reads them rather than the export's literal hex/rgba. scrollbar-width/scrollbar-color are the Firefox/standards pair so the bar isn't Chrome-only. This does NOT touch .gv-ig__scroller's own scrollbar-width: none further down — that rule is also from the export and deliberately hides the Instagram strip's bar (B-029), and a more specific selector always wins the standards property regardless of source order. */ * { scrollbar-width: thin; scrollbar-color: var(--gv-gold-35) var(--wp--preset--color--ivory); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--wp--preset--color--ivory); } ::-webkit-scrollbar-thumb { background: var(--gv-gold-35); border-radius: 4px; } /* Eyebrow: uppercase label above a section or card heading. Carries its own colour and letter-spacing so patterns apply it as a class rather than copying inline typography attributes per instance — an eyebrow paragraph must carry no textColor attribute, or .has-*-color beats this rule. Margin (S0-2, T-009): the export's seven non-hero eyebrows are all `mb-3` (12px) — only the hero's is `mb-4` (16px). 1rem used to be the shared default for all eight; it is now the hero's own override (`.gv-hero__inner .gv-eyebrow`, below) and this default drops to 12px so the other seven sections read correctly as their section tasks land. */ .gv-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: 0.32em; color: var(--wp--preset--color--gold); margin: 0 0 0.75rem; } .gv-eyebrow--on-dark { color: var(--gv-ivory-80); } /* Buttons: the filled default lives in theme.json (styles.elements.button) so it is the WooCommerce/builder default too. The outline and card variants below are selected per-instance via className on core/button — which puts the class on the WRAPPER (`div.wp-block-button`), not the anchor: core's save output is `
`. Every rule here therefore targets the child anchor explicitly (`> .wp-block-button__link`), the same shape core's own block styles use. Getting this wrong is silent, not an error: it styles the wrapper and leaves the filled theme.json button showing through. Colours must never be set through block attributes either — same has-*-color trap as the eyebrow. Fixed T-005 finding 3. */ /* Outline: styles core's own `is-style-outline` block-style variation rather than adding a second, parallel mechanism — four shipped patterns (home-hero.php, home-experience.php x2, home-tiers.php) already carry is-style-outline, so this needed no pattern rewrite, and it retires the duplicate `.gv-btn--outline` class T-005 finding 11 flagged. Overrides core's own outline defaults (2px currentColor border, 0.667em/1.333em padding) with the reference's values. Radius and font-size are not set here — the anchor already carries them via styles.elements.button. */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--charcoal); border: 1px solid var(--gv-fg-30); padding: 14px 40px; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--ivory); } .gv-btn--card > .wp-block-button__link { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--charcoal); border: none; padding: 12px 32px; display: inline-flex; align-items: center; gap: 0.5rem; /* X-10 (T-009): Tailwind's shadow-lg — a neutral black shadow, not the charcoal-tinted two-part shadow this used to carry. */ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* Hover is triggered by the card, not the button. The card (.gv-xcard) is a plain container with no tabindex, so :focus-visible on it can never match — a keyboard user focuses the CTA *inside* it, which makes the card :focus-within, not :focus-visible. Fixed T-005 finding 6/8. */ .gv-xcard:hover .gv-btn--card > .wp-block-button__link, .gv-xcard:focus-within .gv-btn--card > .wp-block-button__link { background: var(--wp--preset--color--gold); } /* A drawer link to "/#tiers" or "/#faq" (parts/header.html) scrolls the browser straight to the anchored element's own top edge. The header is sticky at ~78px tall (T-011), so without this every anchor lands with its heading tucked underneath it — present and "correct" by the attribute, wrong on screen. Scoped to sections that actually carry an anchor id; harmless on the ones that don't. */ .gv-section[id] { scroll-margin-top: 6rem; } .gv-section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .gv-lede { color: var(--wp--preset--color--muted-soft); max-width: 34rem; margin: 1rem auto 0; } .gv-lede--sm { font-size: var(--wp--preset--font-size--small); color: var(--gv-fg-50); } /* Charm tiles in the builder. Emoji placeholders until real photography exists — see open question 4.12. Sized so swapping in square images later needs no layout change. */ .gv-charm__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: 2rem; line-height: 1; } .gv-charm__icon img { width: 100%; height: 100%; object-fit: contain; } /* An unavailable charm must read as unavailable without relying on colour alone — it carries aria-disabled and visible text as well. */ .gv-charm[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; } /* --- Home: hero (T-006) --- Full-bleed autoplaying carousel matching home-reference.html's `.hero`. Per the primitives contract §3.2's measure table, the hero is the one full-bleed exception — no inner measure, no gv-section padding/gutter treatment, it fills the viewport edge to edge. patterns/home-hero.php emits this as raw markup (one wp:html block, not nested core blocks) with the `alignfull` class written by hand rather than via a block's own align attribute. That still works: WordPress's constrained-layout CSS is a plain child-combinator selector keyed to the containing block's generated `.wp-container-content-N` id (`.wp-container-content-N > .alignfull{...}`) and matches on the class of whatever HTML ends up there, regardless of whether the block parser recognises the child as a real block — verified in-browser, not assumed. Progressive enhancement (ADR-004): the rules immediately below (no class guard) render every slide visible and stacked in normal document flow, arrows and dots hidden — a script that fails to load degrades to "three stacked sections", never to a hidden slide or a hidden compliance placeholder. assets/js/hero.js (enqueued, defer) adds `gv-hero--js` to #hero once it has run; only the rules scoped under that class turn the stack into an actual crossfading, autoplaying carousel. Verified with JavaScript disabled in the browser. */ .gv-hero { position: relative; isolation: isolate; /* Contract table (§3): `overflow-hidden` is part of the export's own hero section class, not previously carried here. Surfaced by browser verification (T-009): the H-1 media scale(1.05) on inactive slides was pushing document.documentElement.scrollWidth past the viewport at every width — a transformed box's visual bounds count toward an ancestor's scrollable overflow even at opacity:0/pointer-events:none. Clipping it here matches the export and removes the phantom horizontal scroll. */ overflow: hidden; } .gv-hero__slide { position: relative; padding: clamp(4rem, 9vw, 8rem) var(--wp--preset--spacing--gutter); } /* S-004/T-018 rework: the box geometry and the legibility scrim were living only on the .gv-image-placeholder compound below, so both vanished the moment a real photo landed and Goldvion_Block_Hero stopped emitting the placeholder class — the media layer stopped being full-bleed and the copy stopped overlaying it. Moved here, to the base selector, so a real photo gets the same box and the same scrim the placeholder always had. .gv-inside__media (below, "Home: sections 1-4") is the shape this follows — its ratio already sat on the base selector, not the compound. */ .gv-hero__media { position: absolute; inset: 0; z-index: -1; } /* H-16 (T-009): the export's ivory gradient scrim (top to bottom, 40% -> 20% -> 60%) is in scope even though the photography behind it is not (ADR-011 §10 item 7) — moved to the base selector with the geometry above so the copy's contrast target holds over a real photo too, not just over the placeholder it was written against. */ .gv-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--gv-ivory-40) 0%, var(--gv-ivory-20) 50%, var(--gv-ivory-60) 100%); } /* Compound selector, not just .gv-hero__media: the shared .gv-image- placeholder rule (below, "Home: sections 1-4") sets align-items:center and comes later in the file, so a bare .gv-hero__media rule here would lose that cascade fight and the placeholder text would silently recentre instead of sitting flush to the top like every other reference detail that follows this repo's dashed-border placeholder convention. Only the placeholder-specific alignment stays here now; the geometry and scrim above apply to a real photo as well. */ .gv-hero__media.gv-image-placeholder { align-items: flex-start; padding-top: 2rem; } /* S-004/T-018: object-fit: cover does nothing without a definite box to cover, and .gv-hero__media above is that box (position:absolute; inset:0) — fill it edge to edge, same shape as .gv-ig__tile img. */ .gv-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* One modifier per palette slug a slide can use — driven entirely by the `media_bg` value in $gv_hero_slides, so a new slide needs no new CSS unless it introduces a background token not in the palette yet. Compound selector (repeated class), same shape and same reason as T-007's .gv-xcard__media.gv-xcard__media--blush: .gv-image-placeholder's own background:surface-muted (below, "Home: sections 1-4") is a single class, the same specificity as a bare .gv-hero__media-- rule, and sits later in the file, so it silently won that cascade fight and every slide rendered surface-muted regardless of its modifier — the exact bug T-007 hit and fixed in its own card, flagged forward here and now closed. Re-verified by asserting each slide's computed background against its token, not by eye, per state/repos/goldvion.md's verification note. */ .gv-hero__media.gv-hero__media--surface-muted { background: var(--wp--preset--color--surface-muted); } .gv-hero__media.gv-hero__media--blush { background: var(--wp--preset--color--blush); } .gv-hero__media.gv-hero__media--butter { background: var(--wp--preset--color--butter); } .gv-hero__inner { position: relative; text-align: center; max-width: 42rem; /* H-7: export's max-w-2xl, was 44rem */ margin-inline: auto; } /* H-6/H-8 (T-009): the export's h1 carries no margin at all — the space below it is the lede's own mt-5 (20px), not a heading margin. The lede also drops the shared `.gv-lede`'s 34rem cap (the hero's own 42rem measure on `.gv-hero__inner` already does that job) and steps to 18px at >=768px — the one surviving half of H-8, since T-004 already made the 16px base site-wide (S0-4, closed). */ .gv-hero__inner .gv-lede { margin: 1.25rem auto 0; max-width: none; } @media (min-width: 768px) { .gv-hero__inner .gv-lede { font-size: 1.125rem; /* 18px */ } } /* Corrected against the export (H-3/V-3, T-009): the hero eyebrow is charcoal at 60%, not the `muted` preset's 70% — that 70% figure came from home-reference.html, which T-002's spec supersedes for this value. T-006 confirmed live (`.gv-hero__inner .gv-eyebrow` computed rgba(38,36,31,0.7)) that no `.has-*-color` attribute was involved, so a plain colour swap is sufficient here, not a theme.json preset. Margin (S0-2/H-4): the hero is the one section whose eyebrow keeps the 16px (`mb-4`) margin the shared `.gv-eyebrow` default used to carry site-wide — restated here now that the shared default has dropped to 12px for the other seven sections. */ .gv-hero__inner .gv-eyebrow { color: var(--gv-fg-60); margin-bottom: 1rem; } /* .gv-hero__heading (T-012): the same visual style as the real h1, used on the hero's non-active slides so exactly one

exists on the page — see the docblock in home-hero.php for why. It is a

, not a heading, so it does not pick up theme.json's styles.elements.heading (font, weight, line-height) the way an actual

-

does — restated explicitly here rather than relying on the element default. */ .gv-hero__inner h1, .gv-hero__inner .gv-hero__heading { font-size: var(--wp--preset--font-size--hero-title); margin: 0; /* H-6: the export's h1 carries no margin; the lede's own mt-5 does the spacing */ } .gv-hero__inner .gv-hero__heading { font-family: var(--wp--preset--font-family--display); font-weight: 500; line-height: 1.1; } .gv-hero__cta { margin-top: 2rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* H-9: the hero CTA sits over an image (once photography exists) or the flat placeholder ground; the export blurs whatever is behind it (backdrop-blur-sm = 4px). Scoped to the hero's own outline button, not the shared is-style-outline rule above — no other section's CTA carries this in the export. */ .gv-hero__cta .wp-block-button.is-style-outline > .wp-block-button__link { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* H-10 (T-009): the reference's text glyphs (‹/› in a 3rem box, charcoal-70, 0.5rem inset) are replaced with the export's actual chevron — a 24px lucide ChevronLeft/ChevronRight at strokeWidth 1 (not the 1.5 the survey's icon table claims site-wide; the architect's T-002 correction found the hero specifically ships at 1, distinct from the testimonial carousel's 1.5 — see home-hero.php's inline SVGs), charcoal at 40%, inset 16px (`left-4`/`right-4`). No hit-area padding is added around the icon: the export positions the bare 24px glyph at the inset, nothing more. */ .gv-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; color: var(--gv-fg-40); width: 24px; height: 24px; line-height: 0; display: none; } .gv-hero__arrow svg { width: 24px; height: 24px; display: block; } .gv-hero__arrow:hover { color: var(--wp--preset--color--charcoal); } .gv-hero__arrow--prev { left: 1rem; } .gv-hero__arrow--next { right: 1rem; } .gv-hero__dots { position: absolute; bottom: 2rem; /* H-12: export's bottom-8 (32px), was 1.75rem */ left: 50%; transform: translateX(-50%); z-index: 2; display: none; gap: 0.5rem; } /* S-008: lift the dots clear of the fixed shipping pill, but only on the widths where the pill can actually reach them. The dots are centred; the pill is pinned bottom-left and is a fixed ~434px wide (its text does not wrap above 600px). So they collide when half the viewport, less half the dots rail, is inside the pill's right edge — measured as overlapping by 35px at 900px wide, and clearing by only 15px at 1000px. Above this breakpoint the dots keep the export's 32px (delta H-12) and sit level with, but well to the right of, the pill, exactly as the export has them. 1040px rather than the ~992px where they technically stop touching: the pill's text is client-editable copy, so its width is not ours to rely on. The extra tolerance is for a longer sentence, not for geometry. Below it they would be rendered behind the pill, so they move up by its band. --gv-hero-bottom-clear grows below 600px, where the pill goes full-bleed and wraps to two lines, and this rule picks that up free. */ @media (max-width: 1040px) { .gv-hero__dots { bottom: calc(2rem + var(--gv-hero-bottom-clear)); } } /* H-13 (T-009): dot colours corrected against the export — inactive charcoal 25% (was --gv-fg-30/30%), active charcoal 60% (was solid charcoal). Geometry (6px -> 32px over 500ms) already matched (H-14, confirmed by T-006) and is untouched. */ .gv-hero__dots button { width: 6px; height: 6px; padding: 0; border: 0; cursor: pointer; border-radius: var(--wp--custom--radius--pill); background: var(--gv-fg-25); transition: width 0.5s, background 0.5s; } .gv-hero__dots button[aria-pressed="true"] { width: 32px; background: var(--gv-fg-60); } /* Carousel mode — added by assets/js/hero.js once it has run. Everything above this rule is the no-JS baseline and stays true with the class present too; this only layers the fixed-height stack, the crossfade and the two controls on top of it. */ .gv-hero--js { /* S-008: fit the viewport, so the slide dots are visible without scrolling. Was `height: 100vh`, which overflowed the fold by the sticky header's height plus the fixed shipping pill's band — see --gv-header-h's comment for why our header makes 100vh wrong here. Two declarations on purpose: `svh` is the SMALL viewport height, the one that excludes mobile browser chrome. Plain `vh` on a phone is the LARGE viewport — measured as if the address bar were hidden — which is precisely why the dots fell below the fold worst on mobile. The first line is the fallback for anything that does not know `svh`. */ height: calc(100vh - var(--gv-header-h)); height: calc(100svh - var(--gv-header-h)); /* Was 600px, the export's min-h-[600px]. That floor re-creates the very bug this rule fixes: on any window shorter than ~734px it wins over the calc above and pushes the dots back off-screen. 480px still holds the headline, lede and button comfortably. */ min-height: 30rem; /* 480px */ display: grid; } /* H-1 (T-009): crossfade corrected to the export's 1.2s (was 0.7s), and the media layer now also scales 1.05 -> 1 as a slide becomes active (framer-motion's `initial{opacity:0,scale:1.05} -> animate{opacity:1, scale:1}`), giving the media its own transition track distinct from the copy block's (H-2, below). */ .gv-hero--js .gv-hero__slide { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; } .gv-hero--js .gv-hero__slide[data-active="true"] { opacity: 1; pointer-events: auto; } .gv-hero--js .gv-hero__media { transform: scale(1.05); transition: transform 1.2s ease; } .gv-hero--js .gv-hero__slide[data-active="true"] .gv-hero__media { transform: scale(1); } /* H-2 (T-009): the copy block gets its own, slower, delayed entrance (framer-motion's `initial{opacity:0,y:30} -> animate{opacity:1,y:0}`, duration 0.8s, delay 0.2s) layered on top of the slide's own 1.2s opacity fade above — this repo ships no animation timeline library, so the two tracks are separate CSS transitions on the same `data-active` toggle rather than a single choreographed sequence; both are independently verifiable via getComputedStyle's transition-duration/ -delay. */ .gv-hero--js .gv-hero__inner { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; } .gv-hero--js .gv-hero__slide[data-active="true"] .gv-hero__inner { opacity: 1; transform: translateY(0); } .gv-hero--js .gv-hero__arrow, .gv-hero--js .gv-hero__dots { display: flex; } /* T-005: the export's HeroSlideshow shows its arrows at every width (H-11) — there is no client breakpoint that hides them, so the 600px rule that used to hide them below that width was a phantom breakpoint, not a client value, and is removed rather than reassigned to 768px. */ /* Shipping pill + Instagram FAB: pinned to the viewport corners independent of any one section (home-reference.html places them after every section, not inside the hero) — patterns/home-hero.php emits them because T-006 owns them. Not one of Home.jsx's eight imported sections and not present in the export at all, so there is no client breakpoint to reconcile against here — the 600px value below is ours by necessity, not a competing system (T-005). */ .gv-shipping-pill { position: fixed; left: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--ivory); border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--wp--custom--radius--pill); padding: 0.6rem 1.1rem; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.14em; color: var(--wp--preset--color--muted); margin: 0; } .gv-ig-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--ivory); border: 1px solid var(--wp--preset--color--hairline); color: var(--wp--preset--color--charcoal); text-decoration: none; } .gv-ig-fab:hover { background: var(--wp--preset--color--surface-muted); } @media (max-width: 600px) { /* S-008: the pill below goes full-bleed here and its text wraps to two lines, so it owns a taller band than it does on desktop — measured 60px + its 0.5rem inset at 390px wide. The hero reserves this out of its own height so the slide dots clear it. */ :root { --gv-hero-bottom-clear: 4.5rem; /* 72px */ } .gv-shipping-pill { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; justify-content: center; } .gv-ig-fab { display: none; } } /* --- Home: shared scroll-reveal utility (S0-7, T-009) --- Seven of the eight home sections animate their own content in on scroll in the export, each with its own duration/stagger (S0-7) — TwoExperiences 0.8s/0.15, TierSection 0.7s/0.1, MaterialSection 0.6s/0.1, InstagramSection 0.4s/0.05 (scale, not y). This is the shared mechanism; TwoExperiences is the only section wired to it by this task. Later section tasks apply the same `gv-reveal` class + data attributes rather than reinventing the observer. Progressive enhancement (ADR-004): the base rule below renders every `.gv-reveal` element fully visible with no transform — a page whose assets/js/reveal.js fails to load shows all content immediately, never a permanently-hidden section. reveal.js's only job is to add `gv-reveal--armed` (switches on the pre-reveal hidden state) and then, once the element crosses the viewport, `gv-reveal--in` (transitions it to rest) — once only, never reversed, matching every `viewport:{once: true}` in the export. Respects prefers-reduced-motion (reveal.js exits early and never arms anything when it matches). Duration/delay are read from `--gv-reveal-duration`/`--gv-reveal-delay`, set per section below via className + nth-child rather than a data attribute reveal.js would have to add itself — see reveal.js's own docblock for why (block-validation risk on real core blocks). */ .gv-reveal { opacity: 1; transform: none; } .gv-reveal.gv-reveal--armed { opacity: 0; /* --gv-reveal-distance (T-012/M-2): most sections rise 40px (y:40 in the export); MaterialSection's own export value is y:30 — see its per-section override below rather than changing this 40px default, which the other sections still rely on. --gv-reveal-scale (S-003/T-013, I-3): InstagramSection is the export's only *scale*-based reveal (`scale:0.95 -> 1`, no y-offset at all) — extending this one shared rule with a second custom property, rather than forking a second reveal mechanism, keeps every section on the same observer/class pair. Instagram sets --gv-reveal-distance:0px so only the scale term moves; every other section leaves this at its default of 1 (no-op) and is unaffected. */ transform: translateY(var(--gv-reveal-distance, 40px)) scale(var(--gv-reveal-scale, 1)); transition: opacity var(--gv-reveal-duration, 0.8s) ease, transform var(--gv-reveal-duration, 0.8s) ease; transition-delay: var(--gv-reveal-delay, 0s); } /* T-011 (S-005): resting transform is `none`, not `translateY(0) scale(1)`. Visually identical (both are the identity transform), but a non-`none` transform value on ANY ancestor -- even an identity matrix -- creates a containing block for `position: fixed` descendants (CSS Transforms Level 1). `.gv-tier` carries this class, and `.gv-inside__panel` sits fixed inside it: once a tier's reveal animation finishes (i.e. as soon as a visitor has scrolled it into view, which "What's Inside?" requires anyway), the panel silently stopped positioning against the viewport and positioned against `.gv-tier` instead -- found while re-measuring this panel for the `height: fit-content` fix above; a second, unrelated bug hiding behind the first. */ .gv-reveal.gv-reveal--armed.gv-reveal--in { opacity: 1; transform: none; } /* TwoExperiences (X-1/S0-7): 0.8s duration, 0.15s per-card stagger — the first card reveals at 0s, the second at 0.15s. */ .gv-experience .wp-block-column:nth-child(1) .gv-xcard.gv-reveal { --gv-reveal-duration: 0.8s; --gv-reveal-delay: 0s; } .gv-experience .wp-block-column:nth-child(2) .gv-xcard.gv-reveal { --gv-reveal-duration: 0.8s; --gv-reveal-delay: 0.15s; } /* T-1 (T-011): TierSection cards are 0.7s duration, i*0.1s stagger — a different pair from TwoExperiences' 0.8s/0.15s above, per S0-7 ("not one shared value"). Three tiers, three columns, nth-child 1/2/3. */ .gv-tiers .wp-block-column:nth-child(1) .gv-tier.gv-reveal { --gv-reveal-duration: 0.7s; --gv-reveal-delay: 0s; } .gv-tiers .wp-block-column:nth-child(2) .gv-tier.gv-reveal { --gv-reveal-duration: 0.7s; --gv-reveal-delay: 0.1s; } .gv-tiers .wp-block-column:nth-child(3) .gv-tier.gv-reveal { --gv-reveal-duration: 0.7s; --gv-reveal-delay: 0.2s; } /* M-2 (T-012): MaterialSection's four claim cards are 0.6s duration, i*0.1s stagger, y:30 (not the shared 40px default — see --gv-reveal-distance on the base rule above). Four columns, nth-child 1-4. */ .gv-claims .wp-block-column:nth-child(1) .gv-claim.gv-reveal { --gv-reveal-duration: 0.6s; --gv-reveal-delay: 0s; --gv-reveal-distance: 30px; } .gv-claims .wp-block-column:nth-child(2) .gv-claim.gv-reveal { --gv-reveal-duration: 0.6s; --gv-reveal-delay: 0.1s; --gv-reveal-distance: 30px; } .gv-claims .wp-block-column:nth-child(3) .gv-claim.gv-reveal { --gv-reveal-duration: 0.6s; --gv-reveal-delay: 0.2s; --gv-reveal-distance: 30px; } .gv-claims .wp-block-column:nth-child(4) .gv-claim.gv-reveal { --gv-reveal-duration: 0.6s; --gv-reveal-delay: 0.3s; --gv-reveal-distance: 30px; } /* I-3 (T-013): InstagramSection's tiles are the export's only scale-based reveal — 0.4s duration, scale 0.95 -> 1, no y-offset (--gv-reveal-distance:0px overrides the shared 40px default). Tiles are plain siblings inside .gv-ig__scroller (a flex row, not wp:columns). T-015 (ADR-020): the eight per-index nth-child rules above are gone — the tile count is no longer eight by construction now that the strip is a dynamic block (goldvion/instagram-tiles) reading a CPT a client can add to. The per-tile stagger delay (0s, 0.05s, … capped at 0.35s, same as before) is now set inline per tile as --gv-reveal-delay by the block's render_callback, so a ninth tile gets the same treatment as its neighbours instead of falling through to the base .gv-reveal defaults. */ .gv-ig__scroller .gv-ig__tile.gv-reveal { --gv-reveal-duration: 0.4s; --gv-reveal-distance: 0px; --gv-reveal-scale: 0.95; } /* --- Home: choose your experience (T-007) --- Two overlay cards matching home-reference.html's .xcard/.experience. The reference's own card is a single wrapping the whole tile; core has no block that renders as an anchor with arbitrary block content inside it (Group's own "HTML element" picker offers div/header/main/section/ article/aside/footer, never a), so .gv-xcard here is a wp:group (a plain div) and the CTA carries the real link instead — the only structural deviation from the reference markup, kept so patterns/home-experience.php stays real, click-to-edit core blocks per T-006's precedent for sections 2-11. Hover/focus-within still work identically since neither depends on the outer element being a link. */ .gv-experience { /* Hook for the two card columns; core's own wp:columns handles the 50/50 split and the single-column mobile stack, so no grid override is needed here — see the "Home: responsive pass" note below. */ } /* X-2/X-3 (T-009): radius corrected to the export's rounded-lg (4px, the `base` token) — scoped to `.gv-xcard` only, not a change to the shared `--radius--card` token (S0-5 names five call sites in total; the other four belong to sections outside this task and get the same one-line fix from their own section tasks). Sizing switched from a fixed `min-height` clamp to the export's own aspect ratio (4/5 base, 3/4 at >=768px, media query below) — a different shape at every width, not a height that happens to look similar at one. */ .gv-xcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; padding: 32px 32px 48px; border-radius: var(--wp--custom--radius--base); overflow: hidden; isolation: isolate; } @media (min-width: 768px) { .gv-xcard { aspect-ratio: 3 / 4; } } .gv-xcard__media { position: absolute; inset: 0; z-index: -2; } /* Compound selector for the same cascade-order reason as .gv-hero__media.gv-image-placeholder above: the shared .gv-image- placeholder rule sets align-items:center and comes later in this file, so a bare .gv-xcard__media rule here would lose that fight and the placeholder caption would recentre instead of sitting flush to the media edge like the reference's .xcard__media .img-ph. */ .gv-xcard__media.gv-image-placeholder { width: 100%; height: 100%; border: 0; border-radius: 0; align-items: flex-start; } /* Compound selector, same reason as .gv-xcard__media.gv-image-placeholder just above: .gv-image-placeholder's own background:surface-muted is the same specificity (one class) and sits later in the file, so a bare .gv-xcard__media--blush rule loses the cascade and silently renders surface-muted instead — caught here by checking the computed background in the browser, not by reading the CSS. The pre-existing .gv-hero__media--blush/--butter modifiers (T-006) share this exact shape and were found to have the same bug when checked collaterally; flagged forward rather than fixed here since T-006's file is out of this task's scope. */ .gv-xcard__media.gv-xcard__media--blush { background: var(--wp--preset--color--blush); } /* S-004/T-018: object-fit: cover does nothing without a definite box to cover — .gv-xcard__media above already is one (position:absolute; inset:0), unlike .gv-hero__media and .gv-tier__media, whose box lived only on the placeholder compound. This rule was simply missing. The real photo is emitted by `goldvion/xcard-media` (finding 4's fix) via a plain wp_get_attachment_image() call with no
wrapper — same shape as .gv-hero__media/.gv-tier__media's img, no extra wrapper rule needed. */ .gv-xcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Legibility scrim: the design overlays card copy on the photograph — this is what keeps that text readable once real photography replaces the placeholder (open question 4.12). */ .gv-xcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--gv-fg-60) 0%, var(--gv-fg-10) 50%, transparent 100%); } /* X-6 (T-009): the export sets spacing per element (eyebrow mb-3, h3 none, copy mt-4, CTA mt-6), not a uniform flex gap — the gap below is dropped to 0 and each child's own margin restated to match. */ .gv-xcard__body { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--wp--preset--color--ivory); } .gv-xcard__body .gv-eyebrow { margin: 0 0 0.75rem; /* X-6: mb-3, 12px */ } /* X-7: the card eyebrow steps 11px -> 12px at >=768px (was fixed 11px). */ @media (min-width: 768px) { .gv-xcard__body .gv-eyebrow--on-dark { font-size: 0.75rem; } } /* X-8 (T-009): h3 steps 30px -> 48px at >=768px. The pattern used to carry `fontSize:"xx-large"` (`has-xx-large-font-size`), which set the correct 30px base but blocked this rule's 768px step: WordPress's global-styles stylesheet emits `.has-xx-large-font-size{font-size:var(...) !important}` (confirmed live — a plain class-selector override here computed 30px at any width, T-009 task note), the same family of trap this repo's own notes document for `.has-*-color`, just for font-size classes too. Rather than fight it (or redefine the shared `--wp--preset--font-size-- xx-large` token, which the tier modal's price also uses and this task does not own), the pattern's heading block now carries no `fontSize` attribute at all, so no `has-*-font-size` class exists to out-rank this selector. */ .gv-xcard__body .wp-block-heading { margin: 0; /* X-6 */ font-size: 1.875rem; /* 30px base */ } @media (min-width: 768px) { .gv-xcard__body .wp-block-heading { font-size: 3rem; /* 48px */ } } /* :not(.gv-eyebrow) (T-009 fix, found in browser verification): the card eyebrow is also a

inside .gv-xcard__body, and a bare `.gv-xcard__body p` selector's specificity (0,1,1) beats `.gv-eyebrow` (0,1,0), so without this exclusion the eyebrow's font-size was silently hijacked to this rule's 14px below 768px, where nothing more specific was around to win it back (`.gv-xcard__body .gv-eyebrow--on-dark` only exists at >=768px, X-7). Caught by getComputedStyle, not by eye — same lesson as the .gv-hero__media--blush cascade trap this repo's notes already document. */ .gv-xcard__body p:not(.gv-eyebrow) { color: var(--gv-ivory-70); font-size: var(--wp--preset--font-size--small); /* X-9: 14px base, was fixed 16px */ max-width: 26rem; margin: 1rem 0 0; /* X-6: mt-4, 16px */ } @media (min-width: 768px) { .gv-xcard__body p:not(.gv-eyebrow) { font-size: var(--wp--preset--font-size--medium); /* X-9: 16px at >=768px */ } } .gv-xcard__body .wp-block-buttons { margin-top: 1.5rem; /* X-6: mt-6, 24px */ } .gv-btn--card svg { width: 0.875rem; height: 0.875rem; flex: none; } /* --- Home: craftsmanship (T-012, reconstructed against the base44 export) --- Four fixed material-claim badges matching MaterialSection.jsx. See patterns/home-craftsmanship.php's docblock for why all four titles/bodies stay marked placeholders (design-content-extract.md §6.3) — only the ring and the section's own lede are real content here. M-1 (ground now plain ivory, not `band`) is a pattern-only fix — see that file. */ .gv-claims { margin-top: 3.5rem; } /* M-9: base gap is the export's literal 24px (pattern's own blockGap attribute, T-012); this steps it to 32px at >=768px. Review fix (T-014 finding 4): same wrong premise as W-12's gap half above, and the same fix — no inline style exists on this element (`home-craftsmanship.php` emits a bare `

`); core's gap comes from a generated container class (`.wp-container-core-columns-is-layout-*`, 0,1,0) printed in `` before this stylesheet loads. `.gv-claims` ties that class on specificity (both 0,1,0), so it comes down to source order — and this stylesheet's `` loads after the generated class's inline `