/* * Peptogenesis — deep navy + light sections palette PREVIEW (revision 6). * * Loads ONLY on the front page and ONLY with the preview flag. Nothing here is * applied by default and no visitor to the live homepage is served this file. * * EVERY RULE IS A COLOUR. No width, margin, padding, display, position, flex, * grid, font, or size anywhere except the fixed "not live" badge at the end, * which is an overlay marker rather than part of the page. * * HOW THIS DIFFERS FROM r3 * r3 took the whole page dark. r4 keeps the deep navy but gives the page a * rhythm: dark, dark, dark, LIGHT, LIGHT, dark, dark, dark. Why Peptogenesis * and Documentation become light sections, which breaks the run of navy in the * middle of the page and gives the eye somewhere to rest. * * Dark: header, hero, search, featured products, FAQ, closing CTA, footer. * Light: Why Peptogenesis, Documentation. * * Cards are treated differently depending on what they sit on: * - on a DARK section they are a soft off-white, because a large pure-white * block against near-black glares; * - on a LIGHT section they are white, because there they need to separate * from the light ground rather than soften against it. */ :root { /* Dark family. */ --pg-pv-black: #01050D; /* header and footer */ --pg-pv-hero-top: #04101F; --pg-pv-hero-bottom: #020A14; --pg-pv-search: #04101F; /* * Featured pulled in toward the hero. It was #071426, a visibly separate * blue from the hero's #04101F; at #051222 the two read as one navy with * the section only just distinguishable, which is what "unified" wants. */ /* * Was #051222 — one step lighter than the #04101F sections either side of * it. On a dark page that reads as a rectangle drawn around the product * cards, and the flakes stopping at its edges made the rectangle obvious. * Matched to the surrounding dark so the section has no visible boundary. */ --pg-pv-featured: #04101F; --pg-pv-dark: #04101F; /* FAQ and closing CTA */ /* Light family — warm rather than cool. */ --pg-pv-light: #F5F2EC; /* Why Peptogenesis, Documentation */ --pg-pv-card-on-light: #FFFFFF; /* crisp against the light ground */ --pg-pv-card-on-dark: #F6F8FB; /* softened against near-black */ /* Type on dark — both lifted a step for small-text readability. */ --pg-pv-white: #FFFFFF; --pg-pv-muted: #E6EBF2; --pg-pv-small: #BCC7D6; /* footer and other small supporting text */ /* Type on light. */ --pg-pv-ink: #16223A; --pg-pv-ink-soft: #4B566D; --pg-pv-ink-mute: #5A6478; /* * TWO GOLDS, AND ONLY TWO. * * The theme currently ships three different dark golds — #A67C22 (21 uses), * #8A6A16 (16) and #9C7B2E (8) — applied more or less interchangeably, which * is why the gold reads slightly differently from one element to the next. * Earlier revisions of this preview added to the problem by picking #8A6A16 * for the card work. * * So: --pg-pv-gold for anything on a dark surface, --pg-pv-gold-ink for * anything on a light one. Nothing else. * * gold-ink was chosen by measurement rather than eye. At hue 45 against the * brand gold's 46, and saturation 62% against 65%, it is the same champagne * tone simply darkened — not brighter, not more yellow. It was the only * candidate to clear 4.5:1 on BOTH the white cards (5.10:1) and the warm * section (4.56:1); the theme's own #A67C22 and #9C7B2E manage only * 3.4–3.6:1 and fail for small text. */ --pg-pv-gold: #D4AF37; /* on dark — 9:1, unchanged brand champagne */ --pg-pv-gold-ink: #856B1F; /* on light */ } body.pg-palette-preview { --wp--preset--color--navy: var( --pg-pv-dark ); --wp--preset--color--charcoal: #0A1A2E; --wp--preset--color--white: var( --pg-pv-white ); --wp--preset--color--slate: var( --pg-pv-muted ); /* * The preset GRADIENTS are defined in theme.json with literal colours rather * than tokens, so re-pointing the colour tokens above leaves them untouched. * navy-glow in particular carried #22314F, a mid royal blue, and it paints * the closing CTA. Same geometry, darker stops. Redefining the variables the * preset rules consume avoids fighting the !important WordPress attaches to * preset classes. */ --wp--preset--gradient--navy-glow: radial-gradient( ellipse 80% 60% at 50% 0%, #08182C 0%, #04101F 70% ); --wp--preset--gradient--navy-depth: linear-gradient( 180deg, #04101F 0%, #0A1A2E 100% ); background-color: var( --pg-pv-dark ); color: var( --pg-pv-white ); } /* ========================================================================== * Header and footer — the darkest bands * ========================================================================== */ /* * The header carries the preset class has-navy-background-color, and WordPress * emits preset colour classes with !important. Without matching that the header * keeps the navy token and sits lighter than everything around it. The * !important is scoped to the preview body class and goes no further. */ body.pg-palette-preview .pg-header, body.pg-palette-preview .pg-header.has-navy-background-color, body.pg-palette-preview .wp-block-template-part:has( .pg-header ) { background-color: var( --pg-pv-black ) !important; } body.pg-palette-preview .pg-footer { background: var( --pg-pv-black ); } /* * Footer supporting text. The disclaimer, payment line and copyright are * hard-coded #7d8aa1, which was chosen against the old lighter footer. On * near-black it still passes, but it is the smallest type on the page, so it * gets a lift rather than being left at the threshold. */ body.pg-palette-preview .pg-footer__disclaimer, body.pg-palette-preview .pg-footer__payments, body.pg-palette-preview .pg-footer__copy, body.pg-palette-preview .pg-footer__statement, body.pg-palette-preview .pg-footer__bottom, body.pg-palette-preview .pg-footer__bottom a { color: var( --pg-pv-small ); } body.pg-palette-preview .pg-footer .wp-block-list a, body.pg-palette-preview .pg-footer__links a { color: var( --pg-pv-muted ); } /* ========================================================================== * Search band * ========================================================================== */ body.pg-palette-preview .pg-discover { background-color: var( --pg-pv-search ); } /* ========================================================================== * Featured products — dark section, soft off-white cards * ========================================================================== */ /* * The background SHORTHAND, not background-color: this section paints itself * with a linear-gradient, and only the shorthand resets that image. */ body.pg-palette-preview .pg-frp { background: var( --pg-pv-featured ); } body.pg-palette-preview .pg-frp__intro { color: var( --pg-pv-muted ); } /* * Turning these cards light is not a background swap: every piece of type * inside was coloured for a dark card, so all of it has to be inverted or the * card comes out light-on-light. Each rule below undoes one of those. The gold * border is kept — on a light card it reads as a fine champagne edge, which is * gold as an accent rather than a surface. */ body.pg-palette-preview .pg-frp__card { background: var( --pg-pv-card-on-dark ); border-color: rgba( 212, 175, 55, 0.45 ); } body.pg-palette-preview .pg-frp__name, body.pg-palette-preview .pg-frp__name a, body.pg-palette-preview .pg-frp__price, body.pg-palette-preview .pg-frp__price .woocommerce-Price-amount { color: var( --pg-pv-ink ); } body.pg-palette-preview .pg-frp__name a:hover, body.pg-palette-preview .pg-frp__name a:focus-visible { color: var( --pg-pv-gold-ink ); } body.pg-palette-preview .pg-frp__stock, body.pg-palette-preview .pg-frp__coa--coming_soon { color: var( --pg-pv-ink-mute ); } /* * The COA status colours were picked to sit on navy. On a light card the * champagne gold drops to roughly 1.9:1 and the success green to about 2.4:1 — * both unreadable — so each takes a darker variant. */ body.pg-palette-preview .pg-frp__coa--supplier, body.pg-palette-preview .pg-frp__strength { color: var( --pg-pv-gold-ink ); } body.pg-palette-preview .pg-frp__coa--independent { color: #1E7A4B; } body.pg-palette-preview .pg-frp__body .added_to_cart { color: var( --pg-pv-gold-ink ); } /* The filled gold button is untouched — dark text on a gold fill reads correctly on any card. Only the ghost variant needs the darker gold. */ body.pg-palette-preview .pg-frp__buy--ghost { border-color: rgba( 133, 107, 31, 0.55 ); color: var( --pg-pv-gold-ink ); } body.pg-palette-preview .pg-frp__buy--ghost:hover, body.pg-palette-preview .pg-frp__buy--ghost:focus-visible { background: rgba( 212, 175, 55, 0.14 ); color: var( --pg-pv-gold-ink ); } /* ========================================================================== * Product image tiles — a lit stage, not a cream swatch * ========================================================================== */ /* * The tile behind each vial was a flat cream panel (#FBF7EE). Against the * catalogue photography that reads as a cut-out pasted on paper — the vials * float rather than stand. * * Same three-part lighting as the hero, scaled down: a dark stage, a very * restrained cool fill from above, and a champagne pool at the base where the * vial meets the surface. The result is that every product on the page is lit * the same way as the hero group, which is what makes the page read as one * studio rather than several. * * The CARD stays light. Dark tile inside a light card is the arrangement the * reference sites use, and it keeps the price, name and COA status on the * high-contrast surface where they belong. */ body.pg-palette-preview .pg-frp__media-link { background: /* champagne pool at the vial base */ radial-gradient( ellipse 54% 13% at 50% 87%, rgba( 243, 215, 138, 0.22 ) 0%, rgba( 212, 175, 55, 0.06 ) 46%, transparent 78% ), /* restrained cool key light from above — kept very low so it never reads as the blue spotlight that was rejected earlier */ radial-gradient( ellipse 74% 56% at 50% 30%, rgba( 96, 130, 178, 0.10 ) 0%, transparent 72% ), /* the stage itself */ linear-gradient( 168deg, #0A1A2E 0%, #061426 56%, #030D1A 100% ); } /* ========================================================================== * Why Peptogenesis and Documentation — the two LIGHT sections * ========================================================================== */ /* * These carry the page's light band. The theme already colours their headings, * body copy, eyebrows, cards and buttons for a light ground — that is how they * ship — so almost nothing needs overriding here. Only the section surface * changes: the cream #F6F3EC and near-white #F8F9FB become one shared cool * off-white, so the two sections read as a single light block rather than two * slightly different ones. * * NOT overriding the type here is deliberate. r3 lightened it for a dark * ground; leaving those rules in place would now put light text on a light * section. Reverting to the theme's own colours is both simpler and safer. */ body.pg-palette-preview .pg-why, body.pg-palette-preview .pg-documentation { background: var( --pg-pv-light ); color: var( --pg-pv-ink-soft ); } body.pg-palette-preview .pg-why :is( h2, h3, .wp-block-heading, .pg-why__card-title ), body.pg-palette-preview .pg-documentation :is( h2, h3, .wp-block-heading ) { color: var( --pg-pv-ink ); } body.pg-palette-preview .pg-why p, body.pg-palette-preview .pg-documentation p { color: var( --pg-pv-ink-soft ); } /* White, so they lift off the light ground rather than blending into it. */ body.pg-palette-preview :is( .pg-why, .pg-documentation ) :is( .pg-card, .is-style-pg-card, .pg-why__card ) { background: var( --pg-pv-card-on-light ); } /* ========================================================================== * FAQ — dark section, soft off-white boxes * ========================================================================== */ body.pg-palette-preview .pg-faq { background: var( --pg-pv-dark ); color: var( --pg-pv-muted ); } body.pg-palette-preview .pg-faq :is( h2, .wp-block-heading ) { color: var( --pg-pv-white ); } /* The eyebrow above the FAQ heading now sits on dark, so it takes the bright champagne rather than the darker gold the light sections use. */ body.pg-palette-preview .pg-faq .is-style-pg-eyebrow { color: var( --pg-pv-gold ); } /* Softened from pure white. The question colour, body copy and gold plus icon inside are already correct for a light box and are left alone. */ body.pg-palette-preview .pg-faq .pg-accordion { background: var( --pg-pv-card-on-dark ); } /* ========================================================================== * Ghost buttons * ========================================================================== */ /* * These two are now on opposite grounds, so they cannot share a rule. * * "View All Questions" sits on the dark FAQ section and needs white text with a * champagne border. "Learn More" sits on the light Why section and keeps the * theme's dark text — restated here only because r3 had forced it white for a * dark ground, and white on the light section would measure about 1.1:1. */ body.pg-palette-preview .pg-faq .wp-block-button.is-style-outline .wp-block-button__link, body.pg-palette-preview .pg-faq .wp-block-button__link:not( .has-background ) { border-color: var( --pg-pv-gold ); color: var( --pg-pv-white ); } body.pg-palette-preview .pg-faq .wp-block-button.is-style-outline .wp-block-button__link:hover, body.pg-palette-preview .pg-faq .wp-block-button__link:not( .has-background ):hover { background: rgba( 212, 175, 55, 0.12 ); color: var( --pg-pv-white ); } body.pg-palette-preview .pg-why .wp-block-button.is-style-outline .wp-block-button__link, body.pg-palette-preview .pg-why .wp-block-button__link:not( .has-background ) { border-color: rgba( 133, 107, 31, 0.55 ); color: var( --pg-pv-ink ); } body.pg-palette-preview .pg-why .wp-block-button.is-style-outline .wp-block-button__link:hover, body.pg-palette-preview .pg-why .wp-block-button__link:not( .has-background ):hover { background: rgba( 212, 175, 55, 0.12 ); color: var( --pg-pv-ink ); } /* ========================================================================== * Gold consistency * ========================================================================== */ /* * Everything below is the SAME champagne, just on the correct side of the * light/dark divide. These are the places the theme reaches for one of its * three interchangeable dark golds; they all become gold-ink so the accent * reads identically wherever it appears. */ /* Section labels on the two light sections. */ body.pg-palette-preview .pg-why .is-style-pg-eyebrow, body.pg-palette-preview .pg-documentation .is-style-pg-eyebrow, body.pg-palette-preview :is( .pg-why, .pg-documentation ) .pg-eyebrow { color: var( --pg-pv-gold-ink ); } /* The four Why icons. */ body.pg-palette-preview .pg-why__icon { color: var( --pg-pv-gold-ink ); } /* * The document and shield glyphs at the top of the COA and SDS cards. These are * inline drawn with currentColor rather than a background image, so they * inherit whatever colour the card gives them — which was the theme's #9C7B2E, * a third gold sitting inches from the gold-filled button below it in the same * card. Setting colour on the svg carries down to the paths. */ body.pg-palette-preview :is( .pg-why, .pg-documentation ) :is( .pg-card, .is-style-pg-card ) svg { color: var( --pg-pv-gold-ink ); } /* * The FAQ plus/minus. The glyph is an inline SVG with the colour baked into the * data URI, so it cannot be restyled with `color` — the whole image has to be * republished with the new stroke. Same path, same geometry, same size; only * the stroke value differs. * * Worth noting: at brand gold on a near-white box this icon sits at about * 1.9:1, which is below the 3:1 WCAG asks of a UI glyph. That is true on the * live site today as well — it is not something this palette introduced — and * gold-ink fixes it as a side effect of making the accent consistent. */ body.pg-palette-preview .pg-faq .pg-accordion summary::after { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23856B1F' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E" ); } body.pg-palette-preview .pg-faq .pg-accordion[ open ] summary::after { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23856B1F' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E" ); } /* * The footer's social links use --pg-gold-hi (#F2D675), a pale highlight tone * that is a third gold sitting next to the email link's #D4AF37 in the same * block. Brought back to the brand champagne. Hover states are deliberately * left alone — a lift on hover is normal and is not an inconsistency. */ body.pg-palette-preview .pg-footer__social a { color: var( --pg-pv-gold ); } /* ========================================================================== * Cart drawer — one inherited legibility problem * ========================================================================== */ /* * PRE-EXISTING, NOT CAUSED BY THIS PALETTE. * * The drawer's empty-cart heading uses the slate token on the drawer's cream * surface. On the LIVE site today that is #A6B1C2 on #F6F3EC — 1.96:1, already * unreadable. Brightening the slate token for the dark sections pushes it * further, so without this the preview would ship a worse version of an * existing bug. The live bug is still there and wants fixing separately. */ body.pg-palette-preview .pg-drawer__empty-title { color: var( --pg-pv-ink ); } /* ========================================================================== * Closing CTA * ========================================================================== */ body.pg-palette-preview .pg-cta { background-color: var( --pg-pv-dark ); } /* ========================================================================== * A quiet marker so the preview can never be mistaken for the live page * ========================================================================== */ /* ========================================================================== * MODERNISATION PASS — hero and featured products only * ========================================================================== * * Everything above this point is colour. This block is the first in the preview * to touch composition, and it is deliberately fenced to two sections: .pg-hero * and .pg-frp. Navigation, the light sections, FAQ, CTA, footer, cart, account * and every WooCommerce surface are untouched, as is the light/dark sequence. * * The diagnosis behind it: the palette work changed what the page was PAINTED * with but not how it was COMPOSED, so it still read as the same site in new * colours. The three things making it feel dated were small display type, * cramped whitespace, and product cards drawn as bordered boxes. All three are * addressed here. * ========================================================================== */ /* -------------------------------------------------------------------------- * 2. FEATURED PRODUCTS — the card stops being a box * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-frp__title { font-size: clamp( 2.4rem, 4.4vw, 3.6rem ); letter-spacing: -0.03em; line-height: 1.04; } body.pg-palette-preview .pg-frp__intro { font-size: 1.0625rem; margin-top: 1rem; max-width: 52ch; } body.pg-palette-preview .pg-frp__head { margin-bottom: 3.4rem; } body.pg-palette-preview .pg-frp__grid { gap: clamp( 1.75rem, 3vw, 3rem ); } /* * THE CARD IS NO LONGER DRAWN. * * It was a filled panel with a gold border and a blur — three separate pieces * of chrome around a product photo. Removing all of it lets the imagery and the * type do the work, which is what every one of the reference sites does. The * product photo becomes the object on the page rather than the contents of a * widget. */ body.pg-palette-preview .pg-frp__card { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* Bigger stage, bigger product, softer corners. */ /* * A SQUARE, RESPONSIVE STAGE — and the two flex traps behind it. * * First attempt set a fixed height on the tile. Two things went wrong: * * 1. .pg-frp__media is a column flex container, so the tile is a flex ITEM and * its height is a main size the browser may shrink. It collapsed 380px to * 255px to fit the grid row. * 2. Pinning the tile with flex:0 0 auto then made it overflow its parent, * which is overflow:visible — so the tile painted straight over the product * name, price and COA line. The card looked like the text had vanished. * * The fix is to stop fighting heights: aspect-ratio makes the tile square and * sized from its own column width, so it is responsive at every breakpoint and * there is no fixed number to be shrunk. Both the tile AND its parent are * pinned against shrinking, which is what keeps the body text clear. */ /* * TILE SIZING — and a bug this preview uncovered on the LIVE site. * * While fitting the dark stage I found the tile overflows its wrapper and * covers the product name. Measured on the LIVE homepage with no preview flag, * at 390px wide: tile 291px inside a 220px wrapper — 85px of overflow, sitting * directly on top of the product name and price. It is invisible today only * because the cream tile and the navy section hide the collision; the dark * stage made it obvious. * * So the product NAME AND PRICE ARE CURRENTLY HIDDEN on the live mobile * Featured Products section. That is not something this pass introduced, and it * is worth fixing on the live site independently of any of this. * * The fix: stop the wrapper being a height-negotiating flex box, and size the * tile from its own width via aspect-ratio instead of a fixed pixel height. * The tile is then square and responsive, the wrapper simply hugs it, and the * image is capped by height so it can never grow taller than the stage. * Verified no overflow and no overlap at 390px and 1280px. */ body.pg-palette-preview .pg-frp__media { display: block; height: auto; } body.pg-palette-preview .pg-frp__media-link { aspect-ratio: 1; border-radius: 18px; height: auto; min-height: 0; } body.pg-palette-preview .pg-frp__img { height: auto; max-height: 82%; } /* * PRODUCT SCALE — left at the theme's value. * * Bumping this from 230px to 250px looked fine on desktop and broke mobile: the * phone layout gives the image aspect-ratio:1 and height:auto, so a wider cap * makes it TALLER than the tile, it overflows, and it covers the product name — * "GLOW" rendered as "G.". Caught on the mobile capture, not the desktop one. * * The image size was never what made this section look dated, so it stays put. */ /* * With the panel gone the body text now sits directly on the dark section, so * it goes light again — the earlier revisions had darkened it for a light card * that no longer exists. Padding drops to zero horizontally so the type aligns * flush with the image edge, which is what makes a borderless card look * deliberate rather than unstyled. */ body.pg-palette-preview .pg-frp__body { gap: 0.55rem; padding: 1.45rem 0.15rem 0; } body.pg-palette-preview .pg-frp__name, body.pg-palette-preview .pg-frp__name a, body.pg-palette-preview .pg-frp__price, body.pg-palette-preview .pg-frp__price .woocommerce-Price-amount { color: var( --pg-pv-white ); } body.pg-palette-preview .pg-frp__name, body.pg-palette-preview .pg-frp__name a { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; } body.pg-palette-preview .pg-frp__price { font-size: 1.05rem; font-weight: 600; } /* COA status as a small tracked label rather than body copy — it is metadata, and treating it as such is most of what "cleaner typography" means here. */ body.pg-palette-preview .pg-frp__coa, body.pg-palette-preview .pg-frp__coa--coming_soon, body.pg-palette-preview .pg-frp__stock { color: var( --pg-pv-small ); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.075em; text-transform: uppercase; } body.pg-palette-preview .pg-frp__coa--supplier, body.pg-palette-preview .pg-frp__strength { color: var( --pg-pv-gold ); } body.pg-palette-preview .pg-frp__coa--independent { color: #6FCF97; } /* Slimmer, quieter button. Same gold, same behaviour, less shout. */ body.pg-palette-preview .pg-frp__buy { font-size: 0.85rem; letter-spacing: 0.08em; margin-top: 1rem; padding: 0.85rem 1.25rem; text-transform: uppercase; } body.pg-palette-preview .pg-frp__buy--ghost { border-color: rgba( 212, 175, 55, 0.55 ); color: var( --pg-pv-gold ); } body.pg-palette-preview .pg-frp__body .added_to_cart { color: var( --pg-pv-gold ); } /* ========================================================================== * HERO — MIRRORED REFLECTIONS AND RIM LIGHT * ========================================================================== * * WHY THE BACKGROUND WAS NEVER THE PROBLEM. * * Six passes of gradient work made the background richer and the hero still * read as "products placed on a dark panel". The reason is the products, not * the panel: the vial PNGs are flat catalogue cut-outs, evenly lit, shot on a * light background. They carry no reflection, no cast shadow and no rim light, * so nothing about them agrees with the scene behind them. A cut-out with no * scene lighting will look pasted on no matter how good the backdrop is. * * The reference sites solve this in the photography — their bottles are * rendered ON the podium, with the reflection and the edge light baked into the * image. This is the closest equivalent achievable in CSS: give each vial a * real mirrored reflection in the stage, and a faint warm edge glow around the * glass so the key light appears to catch it. * * The reflection is a pseudo-element carrying the SAME artwork, flipped, faded * and blurred. Each vial needs its own rule because the image URL has to be * named — that is the only reason these are per-product. * ========================================================================== */ body.pg-palette-preview .pg-hero__vial::after { background-position: bottom center; background-repeat: no-repeat; /* * The box is 36% of the vial's height, but the artwork is drawn at 278% of * that box — i.e. its true full height — so the box shows only the BOTTOM * third of the bottle. Sizing with `contain` instead would squash the whole * bottle into the strip and the reflection would not line up with the glass * above it. */ background-size: auto 278%; content: ""; filter: blur( 2.4px ); height: 36%; left: 0; /* * The mask reads inverted because the whole box is flipped: fading toward * the TOP here renders as a fade downward, away from the vial's base. */ -webkit-mask-image: linear-gradient( to top, rgba( 0, 0, 0, 0.9 ) 0%, rgba( 0, 0, 0, 0.2 ) 42%, transparent 78% ); mask-image: linear-gradient( to top, rgba( 0, 0, 0, 0.9 ) 0%, rgba( 0, 0, 0, 0.2 ) 42%, transparent 78% ); /* * Low. At 0.5 the reflection read as a second bottle lying on the floor; * a real reflection in a matte studio surface is far fainter than the * object casting it. */ opacity: 0.2; pointer-events: none; position: absolute; right: 0; top: 100%; transform: scaleY( -1 ); z-index: -1; } body.pg-palette-preview .pg-hero__vial--left::after { background-image: url( "../images/vials/rta-3-30mg-transparent.webp" ); } body.pg-palette-preview .pg-hero__vial--front::after { background-image: url( "../images/vials/bpc-157-tb-500-5mg-5mg-transparent.webp" ); } body.pg-palette-preview .pg-hero__vial--right::after { background-image: url( "../images/vials/klow-80mg-transparent.webp" ); } /* * RIM LIGHT. A tight champagne glow hugging the glass silhouette, layered * before the two contact shadows. drop-shadow follows the alpha channel, so on * a cut-out it traces the actual edge of the bottle — which is what sells the * idea that the key light behind the group is catching it. */ body.pg-palette-preview .pg-hero__vial img { filter: drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.30 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.45 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ); } /* ========================================================================== * v7 — THE SCENE (winning panel recipe: "concept-faithful" + grafts) * ========================================================================== * * Produced by a three-way design panel judged against the owner's approved * concept image: circular dark podium with a machined champagne rim under the * vial group, warm horizon light behind the products, faint hex-molecule * motifs in the upper corners, deep off-centre vignette, satin micro-grain. * * Grafts applied to the winner: podium widened from a fixed 380px to * clamp(430px, 42vw, 560px) — the vial group's visible glass spans ~490px on * desktop, and a product group must stand ON its stage, not overhang it — * plus inset top/bottom shadows on the disc (from the "satin" variant) so the * surface reads dimensional rather than flat. * ========================================================================== */ /* ============================================================ PG PALETTE PREVIEW — "Concept-Faithful" hero: dark-studio product stage with circular gold-rim podium under the vials ============================================================ */ /* Base plate: deep navy studio + faint hex-molecule line art in the upper corners + a whisper of cool fill upper-left for depth */ body.pg-palette-preview .pg-hero { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.05'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.05'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 55% 45% at 18% 26%, rgba(84,118,172,0.06) 0%, rgba(84,118,172,0) 70%), linear-gradient(180deg, #04101F 0%, #020A14 55%, #010A14 100%); background-position: left -70px top -40px, right -60px top -70px, 0 0, 0 0; background-size: 400px 400px, 440px 440px, auto, auto; background-repeat: no-repeat; } /* Warm horizon sweep: brightest tight core directly behind the vial group (~76% x), arcing away low and wide; every layer self-fades so no edge is ever visible */ body.pg-palette-preview .pg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 26% 14% at 76% 82%, rgba(255,250,233,0.20) 0%, rgba(243,215,138,0.09) 40%, rgba(212,175,55,0) 75%), radial-gradient(ellipse 62% 22% at 75% 85%, rgba(226,197,110,0.08) 0%, rgba(212,175,55,0.035) 45%, rgba(212,175,55,0) 76%), radial-gradient(ellipse 105% 16% at 70% 90%, rgba(133,107,31,0.05) 0%, rgba(133,107,31,0) 70%); } /* Off-centre vignette (corners fall to near-black) + incommensurate satin micro-grain at whisper alpha so the darkness reads photographic */ body.pg-palette-preview .pg-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(ellipse 125% 115% at 70% 58%, rgba(1,10,20,0) 44%, rgba(1,10,20,0.45) 74%, rgba(1,10,20,0.85) 100%), radial-gradient(circle, rgba(243,215,138,0.014) 0.5px, rgba(243,215,138,0) 1.1px), radial-gradient(circle, rgba(255,250,233,0.010) 0.5px, rgba(255,250,233,0) 1.2px); background-size: 100% 100%, 11px 13px, 17px 19px; background-position: 0 0, 0 0, 5px 8px; } /* Key-light bloom behind the products: bright, tight, warm — falls off fast so it never muddies the navy */ body.pg-palette-preview .pg-hero__glow { background: radial-gradient(ellipse 55% 45% at 50% 74%, rgba(255,250,233,0.16) 0%, rgba(243,215,138,0.09) 24%, rgba(212,175,55,0.04) 48%, rgba(212,175,55,0) 72%); } /* Polished studio floor: faint warm sheen pooling under the stage, dissolved on all sides by an elliptical mask (mask stays fully opaque over the podium zone at ~78% so the pseudos are untouched) */ body.pg-palette-preview .pg-hero__floor { background: radial-gradient(ellipse 52% 120% at 42% 10%, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0) 70%), linear-gradient(180deg, rgba(10,26,46,0.35) 0%, rgba(2,10,20,0) 85%); -webkit-mask-image: radial-gradient(ellipse 115% 170% at 46% 65%, #000 58%, rgba(0,0,0,0) 98%); mask-image: radial-gradient(ellipse 115% 170% at 46% 65%, #000 58%, rgba(0,0,0,0) 98%); } /* PODIUM TOP: elliptical dark disc with a machined champagne rim — the rim is bright-and-tight (never mid-alpha wash) and the conic layer gives it uneven metallic catch like a turned bezel */ body.pg-palette-preview .pg-hero__floor::before { content: ""; position: absolute; left: 42%; bottom: 14px; width: clamp( 430px, 46vw, 600px ); height: 74px; transform: translateX(-50%); border-radius: 50%; z-index: 2; pointer-events: none; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(212,175,55,0) 0%, rgba(212,175,55,0) 91.5%, rgba(226,197,110,0.55) 94%, rgba(255,250,233,0.9) 96.5%, rgba(133,107,31,0.65) 99%, rgba(133,107,31,0) 100%), conic-gradient(from 210deg, rgba(243,215,138,0.10), rgba(243,215,138,0) 22%, rgba(226,197,110,0.07) 47%, rgba(226,197,110,0) 70%, rgba(243,215,138,0.10)), radial-gradient(ellipse 46% 42% at 50% 30%, rgba(243,215,138,0.09) 0%, rgba(243,215,138,0) 70%), radial-gradient(ellipse at 50% 40%, #0A1A2E 0%, #06142A 40%, #04101F 66%, #010A14 100%); box-shadow: inset 0 2px 5px rgba( 255, 250, 233, 0.10 ), inset 0 -8px 16px rgba( 1, 10, 20, 0.55 ); } /* PODIUM FRONT FACE: the cylinder's thickness below the disc midline — solid dark drum with a faint warm catch at centre, curved bottom edge, and a soft contact shadow grounding it on the floor */ body.pg-palette-preview .pg-hero__floor::after { content: ""; position: absolute; left: 42%; bottom: -2px; width: clamp( 430px, 46vw, 600px ); height: 56px; transform: translateX(-50%); border-radius: 0 0 50% 50% / 0 0 68% 68%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 55% 90% at 50% 0%, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 60%), linear-gradient(180deg, #06142A 0%, #04101F 32%, #010A14 72%, #010A14 100%); box-shadow: 0 8px 22px 2px rgba(1,10,20,0.85); } /* ------------------------------------------------------------ MOBILE: vial group centres at 50% of the hero (~46% across the floor element); podium shrinks, light re-centres, corners keep only smaller hex motifs ------------------------------------------------------------ */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-position: left -90px top -60px, right -100px top -110px, 0 0, 0 0; background-size: 300px 300px, 320px 320px, auto, auto; } /* horizon sweep re-centres behind the centred vial group */ body.pg-palette-preview .pg-hero::before { background: radial-gradient(ellipse 40% 13% at 50% 83%, rgba(255,250,233,0.18) 0%, rgba(243,215,138,0.08) 40%, rgba(212,175,55,0) 75%), radial-gradient(ellipse 85% 20% at 50% 86%, rgba(226,197,110,0.07) 0%, rgba(212,175,55,0.03) 45%, rgba(212,175,55,0) 76%), radial-gradient(ellipse 130% 15% at 50% 91%, rgba(133,107,31,0.045) 0%, rgba(133,107,31,0) 70%); } /* vignette re-centres */ body.pg-palette-preview .pg-hero::after { background-image: radial-gradient(ellipse 140% 115% at 50% 56%, rgba(1,10,20,0) 42%, rgba(1,10,20,0.45) 74%, rgba(1,10,20,0.85) 100%), radial-gradient(circle, rgba(243,215,138,0.014) 0.5px, rgba(243,215,138,0) 1.1px), radial-gradient(circle, rgba(255,250,233,0.010) 0.5px, rgba(255,250,233,0) 1.2px); } body.pg-palette-preview .pg-hero__floor { background: radial-gradient(ellipse 70% 120% at 46% 10%, rgba(212,175,55,0.055) 0%, rgba(212,175,55,0) 70%), linear-gradient(180deg, rgba(10,26,46,0.35) 0%, rgba(2,10,20,0) 85%); -webkit-mask-image: radial-gradient(ellipse 130% 170% at 50% 60%, #000 58%, rgba(0,0,0,0) 98%); mask-image: radial-gradient(ellipse 130% 170% at 50% 60%, #000 58%, rgba(0,0,0,0) 98%); } body.pg-palette-preview .pg-hero__floor::before { left: 46%; bottom: 18px; width: 250px; height: 50px; } body.pg-palette-preview .pg-hero__floor::after { left: 46%; bottom: 0; width: 250px; height: 43px; border-radius: 0 0 50% 50% / 0 0 60% 60%; } } /* ========================================================================== * v7 — THE PRODUCTS ON THE STAGE * ========================================================================== * One dominant hero product, two set back — retained from the earlier * composition work, with bottom offsets tuned so all three BASES land on the * podium disc rather than hanging below it. Offsets in comments are measured, * not guessed; re-measure if the pattern's stage geometry ever changes. * ========================================================================== */ @media ( min-width: 782px ) { /* * Measured against the rendered podium (disc spans y640-714 at 1280x900): * the flankers stand toward the back of the disc, the lead vial toward its * front lip — bases a step apart, which is how objects actually sit on an * ellipse in perspective. Desktop-only: the theme's own mobile arrangement * is deliberately left in charge below 782px. */ body.pg-palette-preview .pg-hero__vial--left { bottom: 10%; height: 78%; transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( -50% ); } body.pg-palette-preview .pg-hero__vial--front { bottom: 13%; height: 53%; transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( -115% ); } body.pg-palette-preview .pg-hero__vial--right { bottom: 13%; height: 53%; transform: translate( var( --pg-parallax-x, 0 ), var( --pg-parallax-y, 0 ) ) translateX( 13% ); } } /* ========================================================================== * v7 — HERO COMPOSITION (typography, eyebrow, buttons, proof strip) * ========================================================================== * Matches the concept image: single gold eyebrow line with a bullet, a * three-line stacked headline with the gold word on its own line, arrow * buttons, and a trust strip under the CTAs. The strip's MARKUP is injected * by inc/palette-preview.php only when the preview flag is active. * ========================================================================== */ /* Three lines: "Elevating / laboratory / research". The em is the gold word; display:block gives it its own line without touching the markup. */ body.pg-palette-preview .pg-hero__title { font-size: clamp( 3rem, 5.6vw, 5rem ); letter-spacing: -0.035em; line-height: 0.99; } body.pg-palette-preview .pg-hero__title em { display: block; } body.pg-palette-preview .pg-hero__lead { font-size: 1.15rem; line-height: 1.7; margin-top: 1.8rem; max-width: 42ch; } /* The two pill badges become one quiet gold eyebrow line with a bullet. */ body.pg-palette-preview .pg-hero__badges { gap: 0.65rem; margin-bottom: 2rem; } body.pg-palette-preview .pg-hero__badge { background: none; border: 0; border-radius: 0; color: var( --pg-pv-gold ); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; padding: 0; text-transform: uppercase; } body.pg-palette-preview .pg-hero__badge:first-child::after { color: rgba( 212, 175, 55, 0.55 ); content: "\2022"; margin-left: 0.65rem; } body.pg-palette-preview .pg-hero__cta { gap: 0.9rem; margin-top: 2.4rem; } body.pg-palette-preview .pg-hero__btn { border-radius: 10px; font-size: 0.95rem; letter-spacing: 0.03em; padding: 1rem 1.9rem; } /* The concept's arrows, and a small travel on hover. Inline-block so the pseudo can transform; guarded for reduced motion below. */ body.pg-palette-preview .pg-hero__btn::after { content: "\2192"; display: inline-block; margin-left: 0.55rem; transition: transform 0.2s ease-out; } body.pg-palette-preview .pg-hero__btn:hover::after, body.pg-palette-preview .pg-hero__btn:focus-visible::after { transform: translateX( 4px ); } @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .pg-hero__btn::after { transition: none; } body.pg-palette-preview .pg-hero__btn:hover::after, body.pg-palette-preview .pg-hero__btn:focus-visible::after { transform: none; } } /* Taller stage so the scene breathes. The vials size from the stage, so this also enlarges the products — heights above are set 2% lower than the v6 values to compensate. Verified against the frame after deploy. */ body.pg-palette-preview .pg-hero__inner { min-height: 630px; } /* THE PROOF STRIP (markup injected in preview only). */ body.pg-palette-preview .pg-hero__proof { align-items: flex-start; display: flex; gap: 1.6rem; margin-top: 2.6rem; } body.pg-palette-preview .pg-hero__proof-item { align-items: flex-start; display: flex; gap: 0.7rem; } body.pg-palette-preview .pg-hero__proof-item + .pg-hero__proof-item { border-left: 1px solid rgba( 230, 235, 242, 0.14 ); padding-left: 1.6rem; } body.pg-palette-preview .pg-hero__proof-icon { color: var( --pg-pv-gold ); flex: 0 0 auto; margin-top: 2px; } body.pg-palette-preview .pg-hero__proof-icon svg { display: block; height: 20px; width: 20px; } body.pg-palette-preview .pg-hero__proof-text { display: block; } body.pg-palette-preview .pg-hero__proof-title { color: var( --pg-pv-white ); display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } body.pg-palette-preview .pg-hero__proof-sub { color: var( --pg-pv-small ); display: block; font-size: 0.78rem; margin-top: 2px; white-space: nowrap; } @media ( max-width: 781px ) { /* Centre-aligned column on phones; the dividers make no sense stacked. */ body.pg-palette-preview .pg-hero__proof { align-items: center; flex-direction: column; gap: 1rem; margin-top: 2rem; } body.pg-palette-preview .pg-hero__proof-item + .pg-hero__proof-item { border-left: 0; padding-left: 0; } body.pg-palette-preview .pg-hero__title { font-size: clamp( 2.6rem, 11vw, 3.2rem ); } } /* ========================================================================== * v7 — STOREFRONT POLISH (panel recipe, applied verbatim) * ========================================================================== * Hover/focus states for the featured cards: card lift, image ease, hairline * gold rule, keyboard parity, reduced-motion guard. Transform/filter only — * nothing here reflows. * ========================================================================== */ /* ===== Featured Products — premium storefront refinements (preview only) ===== */ /* --- Card lift: transform-only, so nothing reflows --- */ body.pg-palette-preview .pg-frp__card { transition: transform 240ms ease-out; will-change: transform; } body.pg-palette-preview .pg-frp__card:hover, body.pg-palette-preview .pg-frp__card:focus-within { transform: translateY(-6px); } /* --- Studio tile: clip the image zoom, gentle brightness lift --- */ body.pg-palette-preview .pg-frp__media-link { display: block; overflow: hidden; transition: filter 240ms ease-out; } body.pg-palette-preview .pg-frp__card:hover .pg-frp__media-link, body.pg-palette-preview .pg-frp__card:focus-within .pg-frp__media-link { filter: brightness(1.07); } body.pg-palette-preview .pg-frp__img { transition: transform 280ms ease-out; } body.pg-palette-preview .pg-frp__card:hover .pg-frp__img, body.pg-palette-preview .pg-frp__card:focus-within .pg-frp__img { transform: scale(1.035); } /* --- Hairline gold rule between tile and body; wakes up on hover --- */ body.pg-palette-preview .pg-frp__media { position: relative; } body.pg-palette-preview .pg-frp__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent 4%, rgba(212, 175, 55, 0.5) 50%, transparent 96%); opacity: 0.5; pointer-events: none; transition: opacity 240ms ease-out; } body.pg-palette-preview .pg-frp__card:hover .pg-frp__media::after, body.pg-palette-preview .pg-frp__card:focus-within .pg-frp__media::after { opacity: 1; } /* --- Typographic rhythm: quiet tracking, tighter vertical cadence --- */ body.pg-palette-preview .pg-frp__title { letter-spacing: 0.01em; } body.pg-palette-preview .pg-frp__intro { line-height: 1.65; letter-spacing: 0.005em; } body.pg-palette-preview .pg-frp__name { letter-spacing: 0.015em; line-height: 1.35; margin-bottom: 0.25rem; } body.pg-palette-preview .pg-frp__price { letter-spacing: 0.02em; margin-top: 0.125rem; } body.pg-palette-preview .pg-frp__coa { letter-spacing: 0.14em; margin-top: 0.375rem; margin-bottom: 0.375rem; } /* --- Buy button: micro-lift + brightness; ghost fills via opacity overlay --- */ body.pg-palette-preview .pg-frp__buy { position: relative; transition: transform 220ms ease-out, filter 220ms ease-out; } body.pg-palette-preview .pg-frp__buy:hover, body.pg-palette-preview .pg-frp__buy:focus-visible { transform: translateY(-1px); filter: brightness(1.08); } body.pg-palette-preview .pg-frp__buy--ghost::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(212, 175, 55, 0.12); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } body.pg-palette-preview .pg-frp__buy--ghost:hover::before, body.pg-palette-preview .pg-frp__buy--ghost:focus-visible::before { opacity: 1; } /* --- Keyboard parity: visible gold focus rings, no layout shift --- */ body.pg-palette-preview .pg-frp__media-link:focus-visible, body.pg-palette-preview .pg-frp__name > a:focus-visible, body.pg-palette-preview .pg-frp__buy:focus-visible { outline: 1px solid rgba(226, 197, 110, 0.85); outline-offset: 3px; } /* --- Reduced motion: kill transforms, keep instant state changes --- */ @media (prefers-reduced-motion: reduce) { body.pg-palette-preview .pg-frp__card, body.pg-palette-preview .pg-frp__img, body.pg-palette-preview .pg-frp__media-link, body.pg-palette-preview .pg-frp__media::after, body.pg-palette-preview .pg-frp__buy, body.pg-palette-preview .pg-frp__buy--ghost::before { transition: none; } body.pg-palette-preview .pg-frp__card:hover, body.pg-palette-preview .pg-frp__card:focus-within, body.pg-palette-preview .pg-frp__card:hover .pg-frp__img, body.pg-palette-preview .pg-frp__card:focus-within .pg-frp__img, body.pg-palette-preview .pg-frp__buy:hover, body.pg-palette-preview .pg-frp__buy:focus-visible { transform: none; } } /* ========================================================================== * v7 — LIGHT-SECTION HEADINGS (small editorial polish) * ========================================================================== */ body.pg-palette-preview .pg-why h2, body.pg-palette-preview .pg-documentation h2, body.pg-palette-preview .pg-faq h2 { font-size: clamp( 2.1rem, 3.6vw, 3rem ); letter-spacing: -0.025em; line-height: 1.08; } /* ========================================================================== * v8 — CLOSING THE GAP TO THE MOCKUP * ========================================================================== * * Comparing v7 against the owner's mockup side by side, four things were * missing or too timid. In rough order of how much each one costs the * "designed" feel: * * 1. THE GOLD ARC. The mockup's signature gesture is a broad champagne arc * sweeping up from behind the podium and out to the right edge. v7 had no * equivalent — this is the single biggest reason it still read as "dark * background + products" rather than art direction. * 2. THE HALO. The mockup lifts the navy directly behind the vials into a * soft lighter pool, so the glass has something to separate against. * 3. HEX MOTIFS TOO FAINT. At 0.05 stroke they were invisible at normal * viewing distance; the mockup's are clearly readable as structure. * 4. PODIUM RIM TOO DIM, VIALS TOO SMALL relative to the frame. * * Everything here is still preview-gated and still confined to the hero. * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. HERO VIALS — COMPLETELY STILL * -------------------------------------------------------------------------- * The float keyframes are killed here; the cursor-parallax script is dequeued * in inc/palette-preview.php (CSS cannot beat the inline custom properties it * writes). Between them the vials do not move at all. Nothing else on the page * loses its motion. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__float, body.pg-palette-preview .pg-hero__vial--left .pg-hero__float, body.pg-palette-preview .pg-hero__vial--front .pg-hero__float, body.pg-palette-preview .pg-hero__vial--right .pg-hero__float { animation: none !important; transform: none !important; will-change: auto; } body.pg-palette-preview .pg-hero__vial { transition: none !important; } /* -------------------------------------------------------------------------- * 2. THE ARC — the mockup's signature gesture * -------------------------------------------------------------------------- * A single champagne stroke, drawn as an SVG ellipse arc so the line has a real * taper: it starts near-invisible at the left, brightens as it passes behind * the podium, and fades out past the right edge. Drawn as a background image on * a full-bleed layer at z-index 0, so it sits behind the vials (z-index 2-3) * and behind the copy (z-index 3) but above the base gradient. * * A gradient-stroked SVG rather than a CSS border-radius trick because only the * stroke gradient gives the fade at both ends — a bordered box would end in two * hard stops, which is exactly the "obvious CSS effect" look to avoid. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__stage::before { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.28' stop-color='%23E2C56E' stop-opacity='0.30'/%3E%3Cstop offset='0.52' stop-color='%23FFF8E0' stop-opacity='0.85'/%3E%3Cstop offset='0.74' stop-color='%23E2C56E' stop-opacity='0.35'/%3E%3Cstop offset='1' stop-color='%23D4AF37' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.45' stop-color='%23D4AF37' stop-opacity='0.16'/%3E%3Cstop offset='1' stop-color='%23D4AF37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-120 858 C 220 636, 700 590, 1320 726' fill='none' stroke='url(%23a)' stroke-width='2.5'/%3E%3Cpath d='M-120 900 C 240 690, 760 648, 1320 780' fill='none' stroke='url(%23b)' stroke-width='1.4'/%3E%3C/svg%3E" ); background-position: center; background-repeat: no-repeat; background-size: 128% auto; content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 0; } /* -------------------------------------------------------------------------- * 3. THE HALO — lift the navy behind the glass * -------------------------------------------------------------------------- * Without this the vials sit against flat darkness and the glass has nothing to * read against. Centred on the group and kept cool-neutral rather than gold, so * it separates the products without tinting them. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 52% 46% at 50% 52%, rgba( 236, 214, 158, 0.10 ) 0%, rgba( 198, 166, 92, 0.045 ) 40%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 78% 64% at 50% 56%, rgba( 108, 142, 190, 0.10 ) 0%, rgba( 84, 118, 172, 0.035 ) 46%, rgba( 84, 118, 172, 0 ) 74% ); } /* -------------------------------------------------------------------------- * 4. HEX MOTIFS — readable structure, still quiet * -------------------------------------------------------------------------- * Stroke opacity roughly tripled (0.05 -> 0.16) and the tile enlarged. At the * old value the motif was invisible at arm's length, which meant the cost of * having it — complexity in the corners — bought nothing. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.16'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E" ), url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.13'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E" ), radial-gradient( ellipse 55% 45% at 18% 26%, rgba( 84, 118, 172, 0.06 ) 0%, rgba( 84, 118, 172, 0 ) 70% ), linear-gradient( 180deg, #04101F 0%, #020A14 55%, #010A14 100% ); background-position: left -60px top -30px, right -70px top -90px, 0 0, 0 0; background-repeat: no-repeat; background-size: 520px 520px, 560px 560px, auto, auto; } /* -------------------------------------------------------------------------- * 5. PODIUM RIM AND PRODUCT SCALE * -------------------------------------------------------------------------- * The rim ring goes brighter and the disc slightly wider; the vials come up in * scale so the group commands the frame the way the mockup's does. Bottom * offsets are re-tuned to keep every base standing ON the disc — raising the * heights alone would drop the bases through it. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__floor::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 212, 175, 55, 0 ) 0%, rgba( 212, 175, 55, 0 ) 90.5%, rgba( 226, 197, 110, 0.55 ) 91.5%, rgba( 255, 250, 233, 1 ) 95%, rgba( 243, 215, 138, 0.85 ) 97%, rgba( 166, 132, 46, 0.7 ) 99%, rgba( 133, 107, 31, 0 ) 100% ), conic-gradient( from 210deg, rgba( 243, 215, 138, 0.16 ), rgba( 243, 215, 138, 0 ) 22%, rgba( 226, 197, 110, 0.11 ) 47%, rgba( 226, 197, 110, 0 ) 70%, rgba( 243, 215, 138, 0.16 ) ), radial-gradient( ellipse 46% 42% at 50% 30%, rgba( 243, 215, 138, 0.12 ) 0%, rgba( 243, 215, 138, 0 ) 70% ), radial-gradient( ellipse at 50% 40%, #0A1A2E 0%, #06142A 40%, #04101F 66%, #010A14 100% ); width: clamp( 460px, 50vw, 640px ); } body.pg-palette-preview .pg-hero__floor::after { width: clamp( 460px, 50vw, 640px ); } @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__vial--left { bottom: 9%; height: 88%; } body.pg-palette-preview .pg-hero__vial--front { bottom: 12%; height: 60%; transform: translate( 0, 0 ) translateX( -112% ); } body.pg-palette-preview .pg-hero__vial--right { bottom: 12%; height: 60%; transform: translate( 0, 0 ) translateX( 7% ); } } /* ========================================================================== * v9 — BUILT TO THE APPROVED MOCKUP AS A SPECIFICATION * ========================================================================== * Everything below is derived by measurement, not by eye. The approved mockup * is a 1671x941 frame with an 110px header band, so the hero content band is * 831px tall — 0.497 x the frame width. Every ratio here is expressed against * that band, then converted to the percentages the stage actually uses. * * The two readings that drove the rebuild: * * 1. PRODUCT ORDER. The mockup's centre — the tall, dominant vial — is * BPC/TB 5MG/5MG, with RTA-3 30MG at left and KLOW 80MG at right. v8 had * RTA-3 leading. The markup order in patterns/home-hero.php is untouched; * the swap is done here in CSS (size, offset, stacking, dimming), so the * live hero keeps its own arrangement. * * 2. SCALE. v8's lead vial stood 460px of glass in a 694px hero — 66% of the * band. The mockup's is 515 in 831 — 62% — inside a band that is itself * 137px taller. So the hero grows and the vials come DOWN slightly: the * mockup's sense of scale comes from the frame being tall and the group * being wide, not from the bottles being huge. * * Geometry note for anyone re-tuning this: the vial carries a per-file * transform (--pg-vs scale, --pg-vy shift, layout.css "vial display * normalisation"), and the PNG canvas is square with the bottle occupying only * ~45% of its width and ~96% of its height. An element's box is therefore about * 20% taller and 120% wider than the glass you can see. Percentages below are * solved for the GLASS, not the box — measure the glass if you change them. * ========================================================================== */ /* -------------------------------------------------------------------------- * 9.1 THE FRAME — 0.497 x width, as the mockup * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__inner { min-height: clamp( 560px, 45.9vw, 830px ); } } /* -------------------------------------------------------------------------- * 9.2 PRODUCT ORDER — BPC/TB leads, RTA-3 and KLOW flank * -------------------------------------------------------------------------- * Stacking and dimming follow the size swap: whichever vial is largest is also * the one in front and the one at full brightness. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__vial--front { z-index: 3; } body.pg-palette-preview .pg-hero__vial--left, body.pg-palette-preview .pg-hero__vial--right { z-index: 2; } /* The flanks sit a half-step back in the light. Restating the whole filter rather than adding to it, because filter does not accumulate across rules. */ body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { filter: drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.24 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.38 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ) brightness( 0.94 ); } /* -------------------------------------------------------------------------- * 9.3 VIAL PLACEMENT — solved from the mockup's glass positions * -------------------------------------------------------------------------- * Targets, in mockup-frame pixels: glass centres at x 975 / 1217 / 1437, glass * heights 410 / 515 / 400, all three standing on one baseline. Converted to the * stage's own percentages below. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__vial--left { bottom: 20.7%; height: 64.4%; transform: translate( 0, 0 ) translateX( -104.7% ); } body.pg-palette-preview .pg-hero__vial--front { bottom: 19.7%; height: 80.9%; transform: translate( 0, 0 ) translateX( -54.6% ); } body.pg-palette-preview .pg-hero__vial--right { bottom: 20.9%; height: 62.8%; transform: translate( 0, 0 ) translateX( -10.3% ); } } /* -------------------------------------------------------------------------- * 9.4 THE PODIUM — wide enough that the group stands ON it * -------------------------------------------------------------------------- * The group's visible glass spans 654px of the mockup frame. A stage the * product overhangs reads as a mistake, so the disc is that span plus a margin, * centred on the group rather than on the floor element. The floor itself rises * so the disc's top face meets the vial bases at roughly three-fifths back, * which is where an object sitting on an ellipse in perspective actually meets * it. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor { bottom: 15%; } body.pg-palette-preview .pg-hero__floor::before { bottom: 37px; height: 88px; left: 38.5%; width: clamp( 440px, 41.9vw, 760px ); } body.pg-palette-preview .pg-hero__floor::after { bottom: -6px; height: 62px; left: 38.5%; width: clamp( 440px, 41.9vw, 760px ); } } /* -------------------------------------------------------------------------- * 9.5 HEADLINE PROPORTIONS * -------------------------------------------------------------------------- * The mockup sets three lines of roughly 96px on an 87px rhythm at 1671 wide — * 5.75vw on a 0.91 line-height. v8 capped at 5rem, so past ~1430px the headline * stopped growing while the frame kept going, and the type shrank against the * composition. The cap moves to 6.2rem, which is where 5.75vw lands at 1723px. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__title { font-size: clamp( 2.8rem, 5.75vw, 6.2rem ); letter-spacing: -0.035em; line-height: 0.91; } /* Deliberate deviation: the mockup's lead sets around 26px of leading at 1671, which works out under 16px of type. 1rem is the floor for body copy, so the lead tracks the mockup's proportion down to that size and then stops. */ body.pg-palette-preview .pg-hero__lead { font-size: clamp( 1rem, 0.98vw, 1.15rem ); line-height: 1.62; margin-top: 2.1rem; max-width: 29ch; } body.pg-palette-preview .pg-hero__badges { margin-bottom: 1.6rem; } body.pg-palette-preview .pg-hero__cta { gap: 1rem; margin-top: 2.2rem; } body.pg-palette-preview .pg-hero__btn { font-size: 0.95rem; padding: 0.9rem 1.9rem; } body.pg-palette-preview .pg-hero__proof { gap: 1.9rem; margin-top: 3rem; } body.pg-palette-preview .pg-hero__proof-item + .pg-hero__proof-item { padding-left: 1.9rem; } body.pg-palette-preview .pg-hero__proof-icon svg { height: 24px; width: 24px; } /* -------------------------------------------------------------------------- * 9.6 COPY COLUMN — measured correction * -------------------------------------------------------------------------- * With 9.5 in place the CTA row and the trust strip landed within 10px of the * mockup, but the top of the block sat ~30px high and the lead ran to a narrow * 298px column against the mockup's 450px. Two corrections, both measured: * * max-width the lead measure widens to the mockup's 27vw, which also drops * it from a tall narrow block back to the mockup's four lines * margin-top the grid centres this column, so a top margin moves it down by * half its value — 38px here to close the last 19px * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__lead { max-width: min( 44ch, 27.5vw ); } body.pg-palette-preview .pg-hero__copy { margin-top: 38px; } } /* 9.6b The block came out 27px shorter than the mockup's, all of it in the lead: the mockup allots four lines, and the site's real lead copy sets in three at the mockup's 450px measure. Rather than narrow the measure (which would break the 27.5vw the mockup specifies) or pad the sentence, the difference is absorbed by the two gaps the mockup already draws generously. Every element then lands within ~4px of its specified y. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__lead { margin-top: 3rem; } body.pg-palette-preview .pg-hero__proof { margin-top: 3.4rem; } } /* -------------------------------------------------------------------------- * 9.7 THE PODIUM WAS BEING ERASED * -------------------------------------------------------------------------- * The rim never showed. Cause: .pg-hero__floor carries a mask-image to dissolve * its own edges, and a mask applies to an element's PSEUDO-ELEMENTS too. The * disc is now 700px wide inside a 508px floor box, so both ends of the ring hung * outside the mask's opaque core and were faded to nothing — the wider the disc * got, the less of it survived. * * The mask is dropped rather than widened. It existed only to hide the hard * edges of a linear-gradient; swapping that for radial gradients that fall off * to zero on their own gives the same soft pool with no mask at all, and the * pseudos render at full strength. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__floor { background: radial-gradient( ellipse 58% 130% at 44% 22%, rgba( 212, 175, 55, 0.075 ) 0%, rgba( 212, 175, 55, 0 ) 70% ), radial-gradient( ellipse 92% 150% at 46% 30%, rgba( 12, 30, 52, 0.45 ) 0%, rgba( 2, 10, 20, 0 ) 74% ); -webkit-mask-image: none; mask-image: none; overflow: visible; } /* -------------------------------------------------------------------------- * 9.8 THE ARC — light, not a drawn line * -------------------------------------------------------------------------- * At v8's size and position the stroke crossed the frame at mid-height and read * as a stray hairline rather than the mockup's broad champagne sweep. It moves * down behind the podium, widens past the stage on both sides, and takes a * small blur so it reads as light catching an edge instead of vector art. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__stage::before { background-position: 52% 84%; background-size: 190% auto; filter: blur( 0.6px ); inset: 0 -22% 0 -30%; opacity: 0.85; } /* -------------------------------------------------------------------------- * 9.9 BACKGROUND LIGHTING — lift the navy behind the glass * -------------------------------------------------------------------------- * In the mockup the navy immediately around the vial group is visibly lighter * than the corners; against a flat field the glass has no edge to read against. * The halo widens and comes up roughly a third in strength, still cool-neutral * so it separates the products without tinting them gold. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 50% 44% at 52% 56%, rgba( 236, 214, 158, 0.13 ) 0%, rgba( 198, 166, 92, 0.055 ) 42%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 86% 72% at 52% 58%, rgba( 112, 148, 198, 0.14 ) 0%, rgba( 84, 118, 172, 0.05 ) 48%, rgba( 84, 118, 172, 0 ) 76% ); } /* -------------------------------------------------------------------------- * 9.10 PODIUM DRUM — square corners were showing past the disc * -------------------------------------------------------------------------- * A lighter rectangle was visible under the vials with two hard top corners. * The cause is geometric: on a cylinder seen in perspective the side walls are * tangent to the top ellipse at its WIDEST points, which are level with the * ellipse's CENTRE — not its top. The drum was starting 25px below that, so at * full width its top corners stood outside a silhouette the ellipse had already * curved in from, and the eye read the straight edges as a panel. * * Anchored to the disc's centreline instead. Both the disc's offset and its * height are in px, so this stays correct at every viewport width. The bottom * curve is given the disc's own 44px vertical radius (51% of an 86px box) so * the drum closes with the same ellipse it opened with. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor::after { border-radius: 0 0 50% 50% / 0 0 51% 51%; bottom: -5px; height: 86px; } } /* -------------------------------------------------------------------------- * 9.11 THE ARC, REDRAWN — a light ring on the floor, not a line across it * -------------------------------------------------------------------------- * v9.8's stroke crossed the whole frame at a shallow angle and read as a * scratch. Redrawn as an ellipse CONCENTRIC WITH THE PODIUM — an outer ring of * floor light, roughly 1.8x the podium's radius — so its geometry belongs to * the scene instead of floating over it. * * The arc passes behind the vials (this layer is z-index 0, the products are * 2-3), so its brightest section is hidden and only the wings emerge. The * stroke gradient is weighted to match: near zero at the left edge, where there * is nothing to justify a gold line over the copy column, and carrying its * visible glow out to the right of KLOW, which is the side the mockup lights. * * preserveAspectRatio="none" with a viewBox matching the layer means the arc * stretches with the stage rather than being letterboxed inside it. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__stage::before { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 767' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.16' stop-color='%23E2C56E' stop-opacity='0.14'/%3E%3Cstop offset='0.32' stop-color='%23F3D78A' stop-opacity='0.60'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E0' stop-opacity='0.85'/%3E%3Cstop offset='0.72' stop-color='%23F3D78A' stop-opacity='0.62'/%3E%3Cstop offset='0.88' stop-color='%23E2C56E' stop-opacity='0.26'/%3E%3Cstop offset='1' stop-color='%23D4AF37' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.34' stop-color='%23D4AF37' stop-opacity='0.13'/%3E%3Cstop offset='0.62' stop-color='%23E2C56E' stop-opacity='0.18'/%3E%3Cstop offset='0.9' stop-color='%23D4AF37' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23D4AF37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-164 571 A 620 96 0 0 1 1076 571' fill='none' stroke='url(%23a)' stroke-width='2.2'/%3E%3Cpath d='M-304 571 A 760 132 0 0 1 1216 571' fill='none' stroke='url(%23b)' stroke-width='1.4'/%3E%3C/svg%3E" ); background-position: 0 0; background-size: 100% 100%; filter: blur( 0.7px ); inset: 0 -22% 0 -30%; opacity: 1; } /* -------------------------------------------------------------------------- * 9.12 HEADER BAND AND BUTTON WIDTH * -------------------------------------------------------------------------- * Measured against the mockup: the nav's own spacing was already right (445px * of run against the spec's 435, gaps even), but two things were short. * * header 86px against the mockup's 110. The extra height is added as * padding on the band, so the logo and nav keep their positions * within it and only the breathing room changes. * buttons 223px wide against ~260. The height was already correct at 56, so * only the horizontal padding moves. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview header.wp-block-template-part { padding-bottom: 12px; padding-top: 12px; } body.pg-palette-preview .pg-hero__btn { padding-left: 3rem; padding-right: 3rem; } } /* 9.12b Two corrections after measuring 9.12. - The header is header.pg-header (a wp-block-group), not a template-part wrapper, so the first selector matched nothing. - The filled CTA also carries .wp-element-button, whose theme.json padding outranked a single-class rule; qualifying with the element and the parent wins without resorting to !important. The ghost button had already moved, which is what made the pair uneven at 223 and 258. */ @media ( min-width: 782px ) { body.pg-palette-preview header.pg-header { padding-bottom: 28px; padding-top: 28px; } body.pg-palette-preview .pg-hero__cta a.pg-hero__btn { padding-left: 3rem; padding-right: 3rem; } } /* 9.12c The header's padding is an INLINE style — the block editor writes padding-top/bottom:var(--wp--preset--spacing--30) onto the element itself, so no selector, however specific, can reach it. !important is the only override available and is used here for that reason alone, scoped to the preview and to this one element. (Re-pointing the spacing variable was the alternative, but that preset is also read by the header's children.) The buttons get a shared min-width: the mockup draws them at 260 and 265 despite quite different labels, which only happens if the pair is set to a common floor rather than sized by its text. */ @media ( min-width: 782px ) { body.pg-palette-preview header.pg-header { padding-bottom: 28px !important; padding-top: 28px !important; } body.pg-palette-preview .pg-hero__cta a.pg-hero__btn { min-width: 260px; } } /* 9.12d With the header at its mockup height of 110, the hero was starting at 134 rather than 110: WordPress puts a block-gap margin between the top-level children of .wp-site-blocks, so a 24px band of page background sat between the header and the hero. In the mockup the hero runs straight up under the navigation. Removing that one margin lands the hero band at exactly 110-941 — the mockup's own coordinates. */ body.pg-palette-preview .wp-site-blocks > main { margin-block-start: 0; } /* 9.13 With the hero now flush under the navigation, the step from the header's #020713 to the hero's #04101F showed as a hard rule across the frame; in the mockup the two read as one continuous field. The header keeps the darker value the owner chose — the hero's gradient simply starts there and reaches its own top tone a sixth of the way down, so the join disappears without changing either decision. */ body.pg-palette-preview .pg-hero { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.16'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E" ), url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.13'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3Ccircle cx='306' cy='55' r='4'/%3E%3Ccircle cx='110' cy='214' r='4'/%3E%3Ccircle cx='160' cy='110' r='3'/%3E%3C/g%3E%3C/svg%3E" ), radial-gradient( ellipse 55% 45% at 18% 26%, rgba( 84, 118, 172, 0.06 ) 0%, rgba( 84, 118, 172, 0 ) 70% ), linear-gradient( 180deg, #020713 0%, #04101F 16%, #020A14 58%, #010A14 100% ); } /* ========================================================================== * 9.14 MOBILE — an adaptation of the mockup, not a shrunk copy of it * ========================================================================== * The phone hero cannot be the desktop composition scaled down: at 390px the * desktop measurements put the vial group at y 862 in an 1012px hero, so the * product — the whole point of the frame — sat entirely below the fold, under a * 200px stacked trust strip and two full-width button slabs. * * What is preserved from the mockup: the three-vial group with BPC/TB leading, * the gold-rimmed podium, the ring of floor light, the dark studio field, the * three-line headline with the gold word on its own line, and the reading order * eyebrow -> headline -> lead -> action -> product -> proof. * * What is adapted: the copy centres and tightens, the two buttons sit side by * side instead of stacking full width, and the trust strip becomes one compact * row of icons rather than three stacked two-line blocks. Together those give * back roughly 300px, which is what puts the products on the first screen. * * NOTE ON MECHANISM: below 782px layout.css lays the stage out with FLEX and * vw widths, not the absolute placement desktop uses. Everything here works * with that model. Box widths are ~2.2x the visible bottle (the PNG is a square * with the glass at ~45% of its width), so the negative margins that close the * group are large by design — they are spending transparent padding, not * overlapping artwork. * ========================================================================== */ @media ( max-width: 781px ) { /* ---- copy: tighter, centred, and short enough to leave room ---- */ body.pg-palette-preview .pg-hero__badges { gap: 0.4rem; margin-bottom: 1.1rem; } body.pg-palette-preview .pg-hero__badge { font-size: 0.58rem; letter-spacing: 0.1em; } body.pg-palette-preview .pg-hero__title { font-size: clamp( 2.1rem, 9.4vw, 2.7rem ); line-height: 0.96; } body.pg-palette-preview .pg-hero__lead { font-size: 0.95rem; line-height: 1.55; margin-top: 1.1rem; max-width: none; } body.pg-palette-preview .pg-hero__cta { flex-wrap: nowrap; gap: 0.6rem; margin-top: 1.4rem; } /* Side by side. Equal flex basis keeps the pair the same width whatever the labels say — the same relationship the mockup draws on desktop. */ body.pg-palette-preview .pg-hero__cta a.pg-hero__btn { flex: 1 1 0; font-size: 0.82rem; min-width: 0; padding: 0.8rem 0.5rem; text-align: center; white-space: nowrap; } /* One row of three, icon over label. The second line of each item is dropped rather than shrunk: at this size it was decoration, and it cost 120px of the fold. */ body.pg-palette-preview .pg-hero__proof { align-items: flex-start; flex-direction: row; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; } body.pg-palette-preview .pg-hero__proof-item { align-items: center; flex: 1 1 0; flex-direction: column; gap: 0.35rem; text-align: center; } body.pg-palette-preview .pg-hero__proof-icon svg { height: 18px; width: 18px; } body.pg-palette-preview .pg-hero__proof-title { font-size: 0.68rem; line-height: 1.3; white-space: normal; } body.pg-palette-preview .pg-hero__proof-sub { display: none; } /* ---- the group: all three, BPC/TB leading, as the mockup ---- */ body.pg-palette-preview .pg-hero__vial--left { margin-left: 0; margin-right: 0; order: 1; width: 46.6vw; z-index: 2; } body.pg-palette-preview .pg-hero__vial--front { display: block; margin-left: -27vw; margin-right: -27vw; order: 2; width: 59vw; z-index: 3; } body.pg-palette-preview .pg-hero__vial--right { margin-left: 0; margin-right: 0; order: 3; width: 46.6vw; z-index: 2; } } /* 9.14b Two corrections after measuring the phone layout. - .pg-hero__cta is flex-direction:column below 782px, so nowrap alone left the buttons stacked and full-bleed. Setting the row explicitly is what actually puts them side by side; a shared min-height also evens the pair, which differed by 10px because only the ghost button carries a border. - The podium was drawn from the phone rule's old fixed 250px and landed ABOVE the vial bases, leaving the group floating. It is re-solved below against the measured group (273px of glass, bases 12px above the boxes) and expressed in vw so the whole arrangement holds across phone widths. The stage gains a bottom pad because the drum needs somewhere to sit. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero__cta { flex-direction: row; } body.pg-palette-preview .pg-hero__cta a.pg-hero__btn { align-items: center; display: flex; justify-content: center; min-height: 46px; } body.pg-palette-preview .pg-hero__stage { padding-bottom: 8.7vw; } body.pg-palette-preview .pg-hero__floor::before { bottom: 5.3vw; height: 12.3vw; left: 46.4%; width: 82vw; } body.pg-palette-preview .pg-hero__floor::after { border-radius: 0 0 50% 50% / 0 0 57% 57%; bottom: 0.6vw; height: 10.8vw; left: 46.4%; width: 82vw; } /* The desktop arc's viewBox is 941x767; stretched into a phone stage it would flatten into a straight line. Redrawn concentric with the phone podium, in that stage's own coordinates. */ body.pg-palette-preview .pg-hero__stage::before { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 264' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.22' stop-color='%23E2C56E' stop-opacity='0.30'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E0' stop-opacity='0.70'/%3E%3Cstop offset='0.78' stop-color='%23E2C56E' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23D4AF37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20 214 A 215 34 0 0 1 410 214' fill='none' stroke='url(%23a)' stroke-width='1.6'/%3E%3C/svg%3E" ); inset: 0; } } /* 9.15 Podium width across viewports. The disc is sized in vw, but the vial group is sized from the STAGE HEIGHT, and the two do not scale together: below about 1500px the copy column sets the hero's height, the frame becomes proportionally taller, and the group grows wider relative to the viewport. Measured at 1280 the disc and the group came out the same 536px, so the outer bottles stood exactly on the rim with no stage under them. Widening the disc by ~4vw restores a margin at every width tested (53px each side at 1671, 23px at 1280). */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor::before, body.pg-palette-preview .pg-hero__floor::after { width: clamp( 500px, 45.5vw, 800px ); } } /* ========================================================================== * v10 — THE SCENE, REBUILT AGAINST THE MOCKUP ITSELF * ========================================================================== * v9 matched the mockup's measurements; the owner's verdict was that it still * did not look like the mockup. Comparing the two frames directly, the misses * were all in the RENDERING of the scene, not its geometry: * * 1. The mockup's podium is a tall glossy DRUM — a physical object with a * mirror-dark top, a near-black barrel, and a brilliant metallic band * wrapping its bottom edge. v9 drew a thin flat ellipse. * 2. Broad champagne LIGHT STREAKS sweep across the scene at podium height, * passing behind it on the left and IN FRONT of its base on the right, * flaring brightest at the right edge of frame. * 3. The dark field is alive: molecule clusters with GLOWING gold nodes, * soft blue bokeh dots, faint sparkles — concentrated to the right of * the vials and upper-left. * 4. A strong cool halo lifts the glass off the navy, and the floor holds * a wide low gold bloom under the podium. * * Everything below overrides the v9 scene layers by cascade (same selectors, * later in the file). Composition — vial positions, type, spacing — is v9's, * which already sits within a few px of the mockup. * ========================================================================== */ /* -------------------------------------------------------------------------- * 10.1 FIELD — base gradient + molecule clusters + bokeh * -------------------------------------------------------------------------- * Layer order (top to bottom): right-side molecule cluster with lit nodes, * upper-left faint cluster, scattered bokeh dots, cool ambient tint, base * vertical gradient. The clusters sit at the mockup's positions: mid-right * behind KLOW and high-left of the headline. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero { background-image: /* right cluster: hex lattice + glowing nodes */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='620' viewBox='0 0 560 620'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.22'%3E%3Cpolygon points='330,60 392,96 392,168 330,204 268,168 268,96'/%3E%3Cpolygon points='454,96 516,132 516,204 454,240 392,204 392,132'/%3E%3Cpolygon points='392,204 454,240 454,312 392,348 330,312 330,240'/%3E%3Cline x1='330' y1='204' x2='330' y2='240'/%3E%3Cline x1='516' y1='204' x2='548' y2='222'/%3E%3C/g%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='330' cy='60' r='8' opacity='0.12'/%3E%3Ccircle cx='330' cy='60' r='3' opacity='0.75'/%3E%3Ccircle cx='516' cy='132' r='9' opacity='0.14'/%3E%3Ccircle cx='516' cy='132' r='3.4' opacity='0.85'/%3E%3Ccircle cx='392' cy='348' r='7' opacity='0.12'/%3E%3Ccircle cx='392' cy='348' r='2.6' opacity='0.7'/%3E%3Ccircle cx='454' cy='240' r='6' opacity='0.10'/%3E%3Ccircle cx='454' cy='240' r='2.2' opacity='0.6'/%3E%3Ccircle cx='548' cy='222' r='5' opacity='0.14'/%3E%3Ccircle cx='548' cy='222' r='2' opacity='0.8'/%3E%3C/g%3E%3Cg fill='%237FA8E8'%3E%3Ccircle cx='268' cy='96' r='6' opacity='0.10'/%3E%3Ccircle cx='268' cy='96' r='2.2' opacity='0.5'/%3E%3Ccircle cx='480' cy='409' r='5' opacity='0.09'/%3E%3Ccircle cx='480' cy='409' r='2' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E" ), /* upper-left cluster, fainter */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.13'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3C/g%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='306' cy='55' r='6' opacity='0.10'/%3E%3Ccircle cx='306' cy='55' r='2.4' opacity='0.55'/%3E%3Ccircle cx='110' cy='214' r='5' opacity='0.08'/%3E%3Ccircle cx='110' cy='214' r='2' opacity='0.45'/%3E%3C/g%3E%3C/svg%3E" ), /* scattered bokeh — gold and pale blue, various sizes */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='760' cy='120' r='2' opacity='0.5'/%3E%3Ccircle cx='690' cy='300' r='1.4' opacity='0.4'/%3E%3Ccircle cx='1330' cy='140' r='2.4' opacity='0.45'/%3E%3Ccircle cx='1250' cy='460' r='1.6' opacity='0.5'/%3E%3Ccircle cx='1370' cy='560' r='2' opacity='0.4'/%3E%3Ccircle cx='120' cy='620' r='1.6' opacity='0.35'/%3E%3Ccircle cx='300' cy='700' r='2' opacity='0.3'/%3E%3Ccircle cx='980' cy='90' r='1.4' opacity='0.45'/%3E%3C/g%3E%3Cg fill='%23AECBF5'%3E%3Ccircle cx='840' cy='200' r='6' opacity='0.10'/%3E%3Ccircle cx='840' cy='200' r='1.8' opacity='0.4'/%3E%3Ccircle cx='1300' cy='300' r='7' opacity='0.10'/%3E%3Ccircle cx='1300' cy='300' r='2' opacity='0.4'/%3E%3Ccircle cx='700' cy='560' r='5' opacity='0.08'/%3E%3Ccircle cx='1180' cy='120' r='5' opacity='0.10'/%3E%3Ccircle cx='1180' cy='120' r='1.6' opacity='0.4'/%3E%3Ccircle cx='60' cy='300' r='4' opacity='0.06'/%3E%3C/g%3E%3C/svg%3E" ), radial-gradient( ellipse 55% 45% at 20% 24%, rgba( 84, 118, 172, 0.07 ) 0%, rgba( 84, 118, 172, 0 ) 70% ), linear-gradient( 180deg, #020713 0%, #04101F 16%, #030C18 58%, #010A14 100% ); background-position: right -50px top 92px, left -40px top 40px, center top, 0 0, 0 0; background-repeat: no-repeat; background-size: 560px 620px, 420px 420px, 100% 100%, auto, auto; } /* Warm horizon + right-edge flare + low-left ray, all behind everything. The flare is the bright burst where the mockup's streak exits the frame. */ body.pg-palette-preview .pg-hero::before { background: radial-gradient( ellipse 30% 16% at 76% 80%, rgba( 255, 250, 233, 0.22 ) 0%, rgba( 243, 215, 138, 0.10 ) 40%, rgba( 212, 175, 55, 0 ) 75% ), radial-gradient( ellipse 26% 32% at 100% 72%, rgba( 255, 248, 224, 0.36 ) 0%, rgba( 243, 215, 138, 0.15 ) 45%, rgba( 212, 175, 55, 0 ) 78% ), radial-gradient( ellipse 66% 24% at 74% 86%, rgba( 226, 197, 110, 0.10 ) 0%, rgba( 212, 175, 55, 0.04 ) 45%, rgba( 212, 175, 55, 0 ) 76% ), linear-gradient( 112deg, rgba( 243, 215, 138, 0 ) 42%, rgba( 243, 215, 138, 0.045 ) 50%, rgba( 243, 215, 138, 0 ) 58% ), radial-gradient( ellipse 17% 2.5% at 68.5% 93%, rgba( 243, 215, 138, 0.16 ) 0%, rgba( 243, 215, 138, 0 ) 80% ), radial-gradient( ellipse 30% 8% at 68.5% 97%, rgba( 212, 175, 55, 0.09 ) 0%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 110% 18% at 60% 100%, rgba( 133, 107, 31, 0.07 ) 0%, rgba( 133, 107, 31, 0 ) 70% ); } /* -------------------------------------------------------------------------- * 10.2 HALO — the cool lift behind the glass * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 46% 40% at 52% 58%, rgba( 240, 222, 170, 0.15 ) 0%, rgba( 198, 166, 92, 0.06 ) 42%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 88% 74% at 52% 56%, rgba( 118, 156, 210, 0.17 ) 0%, rgba( 88, 124, 180, 0.07 ) 46%, rgba( 84, 118, 172, 0 ) 76% ); } /* -------------------------------------------------------------------------- * 10.3 STREAKS BEHIND — broad blurred ribbons + sharp cores * -------------------------------------------------------------------------- * Ellipse arcs concentric with the podium, drawn twice each: a wide blurred * stroke for the glow and a thin bright core. Weighted right, near-zero over * the copy column. This layer sits BEHIND the podium (z 0 < floor z 1). * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__stage::before { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 767' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23E2C56E' stop-opacity='0.20'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E0' stop-opacity='0.9'/%3E%3Cstop offset='0.8' stop-color='%23F3D78A' stop-opacity='0.65'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.35' stop-color='%23E2C56E' stop-opacity='0.16'/%3E%3Cstop offset='0.65' stop-color='%23F3D78A' stop-opacity='0.30'/%3E%3Cstop offset='1' stop-color='%23E2C56E' stop-opacity='0.10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-180 560 A 660 104 0 0 1 1140 560' fill='none' stroke='url(%23g)' stroke-width='14' opacity='0.55'/%3E%3Cpath d='M-180 560 A 660 104 0 0 1 1140 560' fill='none' stroke='url(%23a)' stroke-width='2.4'/%3E%3Cpath d='M-320 552 A 800 140 0 0 1 1260 552' fill='none' stroke='url(%23g)' stroke-width='8' opacity='0.4'/%3E%3Cpath d='M-320 552 A 800 140 0 0 1 1260 552' fill='none' stroke='url(%23a)' stroke-width='1.3' opacity='0.7'/%3E%3C/svg%3E" ); background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; content: ""; filter: blur( 0.5px ); inset: 0 -22% 0 -30%; opacity: 1; pointer-events: none; position: absolute; z-index: 0; } /* -------------------------------------------------------------------------- * 10.4 STREAK IN FRONT — crosses the podium base and flares off right * -------------------------------------------------------------------------- * The mockup's signature: one ribbon passes in FRONT of the drum's lower * right and brightens as it leaves the frame. z-index 1 paints it above the * floor's pseudos (podium) while the vials (z 2-3) stay in front of it. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__stage::after { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 767' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.42' stop-color='%23E2C56E' stop-opacity='0.05'/%3E%3Cstop offset='0.66' stop-color='%23F3D78A' stop-opacity='0.45'/%3E%3Cstop offset='0.86' stop-color='%23FFF8E0' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23FFF4D6' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3ClinearGradient id='fg' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23E2C56E' stop-opacity='0.10'/%3E%3Cstop offset='0.85' stop-color='%23F3D78A' stop-opacity='0.40'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0.18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-200 634 A 700 118 0 0 0 1180 634' fill='none' stroke='url(%23fg)' stroke-width='16' opacity='0.5'/%3E%3Cpath d='M-200 634 A 700 118 0 0 0 1180 634' fill='none' stroke='url(%23f)' stroke-width='2.6'/%3E%3C/svg%3E" ); background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; content: ""; filter: blur( 0.4px ); inset: 0 -22% 0 -30%; pointer-events: none; position: absolute; z-index: 1; } } /* -------------------------------------------------------------------------- * 10.5 PODIUM — a glossy machined drum, not a disc on the floor * -------------------------------------------------------------------------- * Top face: mirror-dark navy with a cool sheen pooling toward the front and a * bright champagne rim. Drum: near-black barrel falling to a BRILLIANT * metallic band at its bottom edge — the band is a bottom-anchored gradient * clipped by the drum's own border-radius, so it follows the curve exactly. * Geometry: disc 96px tall, drum 150px from the disc's centreline, both * matching the mockup's proportions at 1671. * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor::before { background: /* machined champagne rim ring */ radial-gradient( ellipse closest-side at 50% 50%, rgba( 212, 175, 55, 0 ) 0%, rgba( 212, 175, 55, 0 ) 90%, rgba( 226, 197, 110, 0.6 ) 91.5%, rgba( 255, 250, 233, 1 ) 95%, rgba( 243, 215, 138, 0.9 ) 97%, rgba( 166, 132, 46, 0.75 ) 99%, rgba( 133, 107, 31, 0 ) 100% ), /* uneven metallic catch on the rim */ conic-gradient( from 200deg, rgba( 255, 248, 224, 0.20 ), rgba( 243, 215, 138, 0 ) 20%, rgba( 226, 197, 110, 0.12 ) 45%, rgba( 226, 197, 110, 0 ) 68%, rgba( 255, 248, 224, 0.20 ) ), /* glossy sheen: cool highlight toward the back, warm kiss at front */ radial-gradient( ellipse 60% 46% at 50% 26%, rgba( 150, 180, 220, 0.16 ) 0%, rgba( 150, 180, 220, 0 ) 66% ), radial-gradient( ellipse 44% 34% at 50% 84%, rgba( 243, 215, 138, 0.10 ) 0%, rgba( 243, 215, 138, 0 ) 70% ), /* mirror-dark surface */ radial-gradient( ellipse at 50% 42%, #0C1E34 0%, #081628 42%, #050F1F 68%, #020A14 100% ); bottom: 14px; box-shadow: inset 0 3px 7px rgba( 255, 250, 233, 0.13 ), inset 0 -10px 20px rgba( 1, 10, 20, 0.6 ); height: 124px; } body.pg-palette-preview .pg-hero__floor::after { background: /* bottom metallic band — clipped by the radius, follows the curve */ linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0 ) 66%, rgba( 148, 168, 198, 0.10 ) 76%, rgba( 226, 197, 110, 0.30 ) 86%, rgba( 255, 250, 233, 0.85 ) 94%, rgba( 255, 252, 240, 0.95 ) 97%, rgba( 214, 182, 96, 0.8 ) 100% ), /* uneven brilliance along the band */ conic-gradient( from 180deg at 50% 100%, rgba( 255, 248, 224, 0.18 ), rgba( 255, 248, 224, 0 ) 18%, rgba( 255, 248, 224, 0.10 ) 40%, rgba( 255, 248, 224, 0 ) 62%, rgba( 255, 248, 224, 0.18 ) ), /* faint centre catch on the barrel */ radial-gradient( ellipse 55% 80% at 50% 8%, rgba( 212, 175, 55, 0.07 ) 0%, rgba( 212, 175, 55, 0 ) 60% ), /* the barrel itself — near-black */ linear-gradient( 180deg, #071426 0%, #040D1C 30%, #020913 70%, #01060F 100% ); border-radius: 0 0 50% 50% / 0 0 41% 41%; bottom: -74px; box-shadow: 0 14px 34px 4px rgba( 0, 3, 8, 0.9 ); height: 150px; } } /* -------------------------------------------------------------------------- * 10.6 FLOOR — dark gloss with the podium's light pooling on it * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__floor { background: radial-gradient( ellipse 62% 60% at 46% 96%, rgba( 212, 175, 55, 0.09 ) 0%, rgba( 212, 175, 55, 0 ) 70% ), radial-gradient( ellipse 92% 150% at 46% 30%, rgba( 12, 30, 52, 0.4 ) 0%, rgba( 2, 10, 20, 0 ) 74% ); } /* -------------------------------------------------------------------------- * 10.7 THE GLASS — stronger studio light on the bottles * -------------------------------------------------------------------------- * The mockup's vials carry a bright cool edge from the halo plus the warm * key. Restated in full (filter does not accumulate). * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-hero__vial img { filter: drop-shadow( 0 0 14px rgba( 170, 200, 240, 0.22 ) ) drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.30 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.5 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ); } body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { filter: drop-shadow( 0 0 12px rgba( 170, 200, 240, 0.18 ) ) drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.24 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.4 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ) brightness( 0.95 ); } /* Glossier top surface: the reflections read a touch stronger. */ body.pg-palette-preview .pg-hero__vial::after { opacity: 0.32; } /* -------------------------------------------------------------------------- * 10.8 TRUST STRIP ICONS — mockup size * -------------------------------------------------------------------------- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__proof-icon svg { height: 26px; width: 26px; } } /* -------------------------------------------------------------------------- * 10.9 MOBILE — inherit the drum treatment at phone scale * -------------------------------------------------------------------------- * The desktop drum sizes are px-locked to the 1671 frame; phones restate them * in vw. The front streak is desktop-only (the phone frame is too tight for a * ribbon crossing the product), but the drum band and glossy top carry over. * -------------------------------------------------------------------------- */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero__floor::before { bottom: 4vw; height: 16.4vw; } body.pg-palette-preview .pg-hero__floor::after { border-radius: 0 0 50% 50% / 0 0 39% 39%; bottom: -7.6vw; height: 20.8vw; } } /* 10.10 Phone scale for the field layers. The v10 .pg-hero rule is unscoped, so without this the 560px molecule cluster covers most of a 390px screen and crosses the copy. Shrunk and pushed to the frame edges; the bokeh sheet maps to the upper zone so its dots stay round. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-position: right -110px top 40px, left -170px top -90px, center top, 0 0, 0 0; background-size: 360px 400px, 320px 320px, 200% 55%, auto, auto; } } /* 10.11 Read against the mockup side-by-side, three corrections. - The glass: v10's cool halo read as a white cut-out glow around every bottle; the mockup's vials sit in darker, integrated light. The cool component drops to a whisper and the warm rim stays. - The disc rim: the mockup's is a fine machined edge, not a drawn ring — thinner and a step dimmer. - The lead: the mockup sets its paragraph on four lines; at 453px ours set three. The measure narrows until the same copy breaks four. */ body.pg-palette-preview .pg-hero__vial img { filter: drop-shadow( 0 0 8px rgba( 170, 200, 240, 0.12 ) ) drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.22 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.35 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ); } body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { filter: drop-shadow( 0 0 7px rgba( 170, 200, 240, 0.10 ) ) drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.18 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.28 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ) brightness( 0.95 ); } body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 46% 40% at 52% 58%, rgba( 240, 222, 170, 0.11 ) 0%, rgba( 198, 166, 92, 0.045 ) 42%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 88% 74% at 52% 56%, rgba( 118, 156, 210, 0.13 ) 0%, rgba( 88, 124, 180, 0.05 ) 46%, rgba( 84, 118, 172, 0 ) 76% ); } @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 212, 175, 55, 0 ) 0%, rgba( 212, 175, 55, 0 ) 92.5%, rgba( 226, 197, 110, 0.4 ) 94%, rgba( 255, 250, 233, 0.85 ) 96.5%, rgba( 243, 215, 138, 0.7 ) 98%, rgba( 166, 132, 46, 0.5 ) 99.5%, rgba( 133, 107, 31, 0 ) 100% ), conic-gradient( from 200deg, rgba( 255, 248, 224, 0.16 ), rgba( 243, 215, 138, 0 ) 20%, rgba( 226, 197, 110, 0.10 ) 45%, rgba( 226, 197, 110, 0 ) 68%, rgba( 255, 248, 224, 0.16 ) ), radial-gradient( ellipse 60% 46% at 50% 26%, rgba( 150, 180, 220, 0.14 ) 0%, rgba( 150, 180, 220, 0 ) 66% ), radial-gradient( ellipse 44% 34% at 50% 84%, rgba( 243, 215, 138, 0.08 ) 0%, rgba( 243, 215, 138, 0 ) 70% ), radial-gradient( ellipse at 50% 42%, #0C1E34 0%, #081628 42%, #050F1F 68%, #020A14 100% ); } body.pg-palette-preview .pg-hero__lead { max-width: min( 40ch, 23.5vw ); } } /* 10.12 The podium as the mockup renders it: a lit object in a mirror floor. - Top face: blue-steel sheen graduating brighter toward the key light (upper right), not flat black; the machined rim back to full brightness. - Bottom band: weighted by a stronger conic so it burns brightest at the front right and falls off around the back — the even ring read as drawn. - Reflection: the drum and its band mirror into the floor below via .pg-hero__inner::after (the one free pseudo at the right stacking level), fading out before the fold. - Floor: a broad gold wash sweeps in from the right under the podium. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__floor::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 212, 175, 55, 0 ) 0%, rgba( 212, 175, 55, 0 ) 92.5%, rgba( 226, 197, 110, 0.5 ) 94%, rgba( 255, 250, 233, 0.95 ) 96.5%, rgba( 243, 215, 138, 0.8 ) 98%, rgba( 166, 132, 46, 0.6 ) 99.5%, rgba( 133, 107, 31, 0 ) 100% ), conic-gradient( from 200deg, rgba( 255, 248, 224, 0.16 ), rgba( 243, 215, 138, 0 ) 20%, rgba( 226, 197, 110, 0.10 ) 45%, rgba( 226, 197, 110, 0 ) 68%, rgba( 255, 248, 224, 0.16 ) ), linear-gradient( 104deg, rgba( 12, 26, 44, 0 ) 42%, rgba( 96, 136, 196, 0.10 ) 72%, rgba( 148, 186, 238, 0.16 ) 96% ), radial-gradient( ellipse 62% 50% at 56% 24%, rgba( 132, 168, 220, 0.15 ) 0%, rgba( 132, 168, 220, 0 ) 68% ), radial-gradient( ellipse 44% 34% at 50% 84%, rgba( 243, 215, 138, 0.08 ) 0%, rgba( 243, 215, 138, 0 ) 70% ), radial-gradient( ellipse at 50% 42%, #0E2138 0%, #091A2E 42%, #061223 68%, #030C18 100% ); } body.pg-palette-preview .pg-hero__floor::after { background: linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0 ) 66%, rgba( 148, 168, 198, 0.10 ) 76%, rgba( 226, 197, 110, 0.30 ) 86%, rgba( 255, 250, 233, 0.85 ) 94%, rgba( 255, 252, 240, 0.95 ) 97%, rgba( 214, 182, 96, 0.8 ) 100% ), conic-gradient( from 150deg at 50% 100%, rgba( 255, 248, 224, 0.30 ), rgba( 255, 248, 224, 0 ) 22%, rgba( 255, 248, 224, 0.05 ) 50%, rgba( 255, 248, 224, 0 ) 74%, rgba( 255, 248, 224, 0.30 ) ), radial-gradient( ellipse 55% 80% at 50% 8%, rgba( 212, 175, 55, 0.07 ) 0%, rgba( 212, 175, 55, 0 ) 60% ), linear-gradient( 180deg, #081729 0%, #050F1E 30%, #030A15 70%, #020711 100% ); } /* Mirror of the drum in the floor. Same width and centre as the podium (75.7% of the inner grid = 72.2% of the frame), starting where the drum ends and dissolving before the section does. */ body.pg-palette-preview .pg-hero__inner::after { background: linear-gradient( 180deg, rgba( 255, 250, 233, 0.28 ) 0%, rgba( 226, 197, 110, 0.10 ) 10%, rgba( 7, 16, 30, 0.55 ) 26%, rgba( 3, 9, 18, 0.25 ) 60%, rgba( 2, 7, 14, 0 ) 100% ); border-radius: 50% 50% 0 0 / 16% 16% 0 0; bottom: -26px; content: ""; height: 70px; left: 75.7%; -webkit-mask-image: linear-gradient( 180deg, #000 0%, rgba( 0, 0, 0, 0.3 ) 55%, transparent 95% ); mask-image: linear-gradient( 180deg, #000 0%, rgba( 0, 0, 0, 0.3 ) 55%, transparent 95% ); opacity: 0.85; pointer-events: none; position: absolute; transform: translateX( -50% ); width: clamp( 500px, 45.5vw, 800px ); z-index: 0; } } /* Full ::before restated with the broad right floor wash added (a background override replaces the whole stack, so every layer is listed). */ body.pg-palette-preview .pg-hero::before { background: radial-gradient( ellipse 30% 16% at 76% 80%, rgba( 255, 250, 233, 0.22 ) 0%, rgba( 243, 215, 138, 0.10 ) 40%, rgba( 212, 175, 55, 0 ) 75% ), radial-gradient( ellipse 26% 32% at 100% 72%, rgba( 255, 248, 224, 0.36 ) 0%, rgba( 243, 215, 138, 0.15 ) 45%, rgba( 212, 175, 55, 0 ) 78% ), radial-gradient( ellipse 46% 12% at 86% 89%, rgba( 226, 197, 110, 0.11 ) 0%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 66% 24% at 74% 86%, rgba( 226, 197, 110, 0.10 ) 0%, rgba( 212, 175, 55, 0.04 ) 45%, rgba( 212, 175, 55, 0 ) 76% ), linear-gradient( 112deg, rgba( 243, 215, 138, 0 ) 42%, rgba( 243, 215, 138, 0.045 ) 50%, rgba( 243, 215, 138, 0 ) 58% ), radial-gradient( ellipse 17% 2.5% at 68.5% 93%, rgba( 243, 215, 138, 0.16 ) 0%, rgba( 243, 215, 138, 0 ) 80% ), radial-gradient( ellipse 30% 8% at 68.5% 97%, rgba( 212, 175, 55, 0.09 ) 0%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 110% 18% at 60% 100%, rgba( 133, 107, 31, 0.07 ) 0%, rgba( 133, 107, 31, 0 ) 70% ); } /* ========================================================================== * v11 — OWNER'S PASS AGAINST THE MOCKUP: definition and gold * ========================================================================== * Four instructions, applied in order of what each touches: * 1. BACKGROUND like the mockup — blue nebula depth around the products, * the field lifted out of flat black. * 2. PEDESTAL more defined — crisp rim, lit surface, visible drum * silhouette with edge light, brighter band. * 3. MOLECULES more defined — strokes to 0.4, thicker lines, brighter * nodes. * 4. MORE GOLD — streaks, flare, washes and particles all up. * ========================================================================== */ /* ---- 11.1 FIELD: defined molecules + nebula depth + more gold bokeh ---- */ body.pg-palette-preview .pg-hero { background-image: /* right cluster — defined: thicker strokes, brighter lattice + nodes */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='620' viewBox='0 0 560 620'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.42' stroke-width='1.5'%3E%3Cpolygon points='330,60 392,96 392,168 330,204 268,168 268,96'/%3E%3Cpolygon points='454,96 516,132 516,204 454,240 392,204 392,132'/%3E%3Cpolygon points='392,204 454,240 454,312 392,348 330,312 330,240'/%3E%3Cline x1='330' y1='204' x2='330' y2='240'/%3E%3Cline x1='516' y1='204' x2='548' y2='222'/%3E%3Cline x1='268' y1='96' x2='236' y2='78'/%3E%3C/g%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='330' cy='60' r='10' opacity='0.18'/%3E%3Ccircle cx='330' cy='60' r='3.6' opacity='0.95'/%3E%3Ccircle cx='516' cy='132' r='11' opacity='0.2'/%3E%3Ccircle cx='516' cy='132' r='4' opacity='1'/%3E%3Ccircle cx='392' cy='348' r='9' opacity='0.18'/%3E%3Ccircle cx='392' cy='348' r='3.2' opacity='0.9'/%3E%3Ccircle cx='454' cy='240' r='7' opacity='0.15'/%3E%3Ccircle cx='454' cy='240' r='2.6' opacity='0.8'/%3E%3Ccircle cx='548' cy='222' r='6' opacity='0.2'/%3E%3Ccircle cx='548' cy='222' r='2.4' opacity='1'/%3E%3Ccircle cx='236' cy='78' r='5' opacity='0.15'/%3E%3Ccircle cx='236' cy='78' r='2' opacity='0.8'/%3E%3C/g%3E%3Cg fill='%237FA8E8'%3E%3Ccircle cx='268' cy='96' r='7' opacity='0.15'/%3E%3Ccircle cx='268' cy='96' r='2.6' opacity='0.7'/%3E%3Ccircle cx='480' cy='409' r='6' opacity='0.12'/%3E%3Ccircle cx='480' cy='409' r='2.2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E" ), /* left cluster — visible now, still quieter than the right */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.26' stroke-width='1.3'%3E%3Cpolygon points='110,52 160,81 160,139 110,168 60,139 60,81'/%3E%3Cpolygon points='210,52 260,81 260,139 210,168 160,139 160,81'/%3E%3Cline x1='260' y1='81' x2='306' y2='55'/%3E%3Cline x1='110' y1='168' x2='110' y2='214'/%3E%3C/g%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='306' cy='55' r='7' opacity='0.15'/%3E%3Ccircle cx='306' cy='55' r='2.8' opacity='0.8'/%3E%3Ccircle cx='110' cy='214' r='6' opacity='0.12'/%3E%3Ccircle cx='110' cy='214' r='2.4' opacity='0.7'/%3E%3Ccircle cx='160' cy='110' r='2' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E" ), /* bokeh — more gold, brighter */ url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='760' cy='120' r='2.4' opacity='0.7'/%3E%3Ccircle cx='690' cy='300' r='1.8' opacity='0.55'/%3E%3Ccircle cx='1330' cy='140' r='2.8' opacity='0.6'/%3E%3Ccircle cx='1250' cy='460' r='2' opacity='0.65'/%3E%3Ccircle cx='1370' cy='560' r='2.4' opacity='0.55'/%3E%3Ccircle cx='120' cy='620' r='2' opacity='0.5'/%3E%3Ccircle cx='300' cy='700' r='2.4' opacity='0.45'/%3E%3Ccircle cx='980' cy='90' r='1.8' opacity='0.6'/%3E%3Ccircle cx='1090' cy='680' r='2' opacity='0.5'/%3E%3Ccircle cx='210' cy='180' r='1.8' opacity='0.45'/%3E%3Ccircle cx='560' cy='520' r='1.6' opacity='0.4'/%3E%3Ccircle cx='1420' cy='380' r='2.2' opacity='0.55'/%3E%3C/g%3E%3Cg fill='%23AECBF5'%3E%3Ccircle cx='840' cy='200' r='7' opacity='0.14'/%3E%3Ccircle cx='840' cy='200' r='2.2' opacity='0.5'/%3E%3Ccircle cx='1300' cy='300' r='8' opacity='0.14'/%3E%3Ccircle cx='1300' cy='300' r='2.4' opacity='0.5'/%3E%3Ccircle cx='700' cy='560' r='6' opacity='0.11'/%3E%3Ccircle cx='1180' cy='120' r='6' opacity='0.13'/%3E%3Ccircle cx='1180' cy='120' r='2' opacity='0.5'/%3E%3Ccircle cx='60' cy='300' r='5' opacity='0.08'/%3E%3C/g%3E%3C/svg%3E" ), /* nebula depth — soft blue clouds lifting the field around the group */ radial-gradient( ellipse 40% 34% at 82% 30%, rgba( 62, 98, 158, 0.16 ) 0%, rgba( 62, 98, 158, 0 ) 70% ), radial-gradient( ellipse 46% 40% at 58% 60%, rgba( 52, 86, 142, 0.13 ) 0%, rgba( 52, 86, 142, 0 ) 72% ), radial-gradient( ellipse 34% 30% at 12% 40%, rgba( 56, 90, 148, 0.09 ) 0%, rgba( 56, 90, 148, 0 ) 70% ), linear-gradient( 180deg, #020713 0%, #051224 16%, #040F20 58%, #020B16 100% ); background-position: right -30px top 110px, left -30px top 30px, center top, 0 0, 0 0, 0 0, 0 0; background-repeat: no-repeat; background-size: 560px 620px, 420px 420px, 100% 100%, auto, auto, auto, auto; } /* ---- 11.2 GOLD: horizon, flare, washes and ray all up ---- */ body.pg-palette-preview .pg-hero::before { background: radial-gradient( ellipse 32% 18% at 76% 80%, rgba( 255, 250, 233, 0.30 ) 0%, rgba( 243, 215, 138, 0.14 ) 40%, rgba( 212, 175, 55, 0 ) 75% ), radial-gradient( ellipse 30% 36% at 100% 70%, rgba( 255, 248, 224, 0.5 ) 0%, rgba( 243, 215, 138, 0.2 ) 45%, rgba( 212, 175, 55, 0 ) 78% ), radial-gradient( ellipse 50% 14% at 86% 88%, rgba( 226, 197, 110, 0.16 ) 0%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 70% 26% at 74% 86%, rgba( 226, 197, 110, 0.13 ) 0%, rgba( 212, 175, 55, 0.05 ) 45%, rgba( 212, 175, 55, 0 ) 76% ), linear-gradient( 112deg, rgba( 243, 215, 138, 0 ) 40%, rgba( 243, 215, 138, 0.07 ) 50%, rgba( 243, 215, 138, 0 ) 60% ), radial-gradient( ellipse 17% 2.5% at 68.5% 93%, rgba( 243, 215, 138, 0.2 ) 0%, rgba( 243, 215, 138, 0 ) 80% ), radial-gradient( ellipse 30% 8% at 68.5% 97%, rgba( 212, 175, 55, 0.12 ) 0%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 110% 18% at 60% 100%, rgba( 133, 107, 31, 0.09 ) 0%, rgba( 133, 107, 31, 0 ) 70% ); } body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 48% 42% at 52% 58%, rgba( 240, 222, 170, 0.14 ) 0%, rgba( 198, 166, 92, 0.06 ) 42%, rgba( 212, 175, 55, 0 ) 72% ), radial-gradient( ellipse 92% 78% at 52% 56%, rgba( 118, 156, 210, 0.19 ) 0%, rgba( 88, 124, 180, 0.08 ) 46%, rgba( 84, 118, 172, 0 ) 76% ); } /* ---- 11.3 STREAKS: brighter, wider ---- */ body.pg-palette-preview .pg-hero__stage::before { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 767' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23E2C56E' stop-opacity='0.30'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E0' stop-opacity='1'/%3E%3Cstop offset='0.8' stop-color='%23F3D78A' stop-opacity='0.8'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0.35'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.35' stop-color='%23E2C56E' stop-opacity='0.24'/%3E%3Cstop offset='0.65' stop-color='%23F3D78A' stop-opacity='0.42'/%3E%3Cstop offset='1' stop-color='%23E2C56E' stop-opacity='0.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-180 560 A 660 104 0 0 1 1140 560' fill='none' stroke='url(%23g)' stroke-width='18' opacity='0.7'/%3E%3Cpath d='M-180 560 A 660 104 0 0 1 1140 560' fill='none' stroke='url(%23a)' stroke-width='2.8'/%3E%3Cpath d='M-320 552 A 800 140 0 0 1 1260 552' fill='none' stroke='url(%23g)' stroke-width='10' opacity='0.5'/%3E%3Cpath d='M-320 552 A 800 140 0 0 1 1260 552' fill='none' stroke='url(%23a)' stroke-width='1.6' opacity='0.85'/%3E%3C/svg%3E" ); } @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__stage::after { background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 941 767' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.42' stop-color='%23E2C56E' stop-opacity='0.08'/%3E%3Cstop offset='0.66' stop-color='%23F3D78A' stop-opacity='0.6'/%3E%3Cstop offset='0.86' stop-color='%23FFF8E0' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23FFF4D6' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3ClinearGradient id='fg' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D4AF37' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23E2C56E' stop-opacity='0.14'/%3E%3Cstop offset='0.85' stop-color='%23F3D78A' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0.24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-200 634 A 700 118 0 0 0 1180 634' fill='none' stroke='url(%23fg)' stroke-width='20' opacity='0.6'/%3E%3Cpath d='M-200 634 A 700 118 0 0 0 1180 634' fill='none' stroke='url(%23f)' stroke-width='3'/%3E%3C/svg%3E" ); } } /* ---- 11.4 PEDESTAL: defined ---- */ @media ( min-width: 782px ) { /* Top face: crisp full-strength rim, surface clearly lit */ body.pg-palette-preview .pg-hero__floor::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 212, 175, 55, 0 ) 0%, rgba( 212, 175, 55, 0 ) 91.5%, rgba( 226, 197, 110, 0.7 ) 93%, rgba( 255, 250, 233, 1 ) 96%, rgba( 243, 215, 138, 0.95 ) 98%, rgba( 166, 132, 46, 0.8 ) 99.5%, rgba( 133, 107, 31, 0 ) 100% ), conic-gradient( from 200deg, rgba( 255, 248, 224, 0.2 ), rgba( 243, 215, 138, 0 ) 20%, rgba( 226, 197, 110, 0.12 ) 45%, rgba( 226, 197, 110, 0 ) 68%, rgba( 255, 248, 224, 0.2 ) ), linear-gradient( 104deg, rgba( 12, 26, 44, 0 ) 40%, rgba( 96, 136, 196, 0.13 ) 72%, rgba( 148, 186, 238, 0.2 ) 96% ), radial-gradient( ellipse 62% 50% at 56% 24%, rgba( 132, 168, 220, 0.19 ) 0%, rgba( 132, 168, 220, 0 ) 68% ), radial-gradient( ellipse 44% 34% at 50% 84%, rgba( 243, 215, 138, 0.10 ) 0%, rgba( 243, 215, 138, 0 ) 70% ), radial-gradient( ellipse at 50% 42%, #13294A 0%, #0C1F38 42%, #08172C 68%, #05101F 100% ); box-shadow: inset 0 3px 8px rgba( 255, 250, 233, 0.16 ), inset 0 -10px 20px rgba( 1, 10, 20, 0.55 ); } /* Drum: silhouette lifted off the background, lit side edges, band up */ body.pg-palette-preview .pg-hero__floor::after { background: linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0 ) 62%, rgba( 148, 168, 198, 0.14 ) 74%, rgba( 226, 197, 110, 0.4 ) 85%, rgba( 255, 250, 233, 0.95 ) 93%, rgba( 255, 252, 240, 1 ) 97%, rgba( 214, 182, 96, 0.9 ) 100% ), conic-gradient( from 150deg at 50% 100%, rgba( 255, 248, 224, 0.34 ), rgba( 255, 248, 224, 0 ) 22%, rgba( 255, 248, 224, 0.07 ) 50%, rgba( 255, 248, 224, 0 ) 74%, rgba( 255, 248, 224, 0.34 ) ), linear-gradient( 90deg, rgba( 150, 180, 220, 0.14 ) 0%, rgba( 150, 180, 220, 0 ) 7%, rgba( 150, 180, 220, 0 ) 93%, rgba( 150, 180, 220, 0.14 ) 100% ), radial-gradient( ellipse 55% 80% at 50% 8%, rgba( 212, 175, 55, 0.09 ) 0%, rgba( 212, 175, 55, 0 ) 60% ), linear-gradient( 180deg, #0C1D33 0%, #081527 30%, #050E1C 70%, #030A15 100% ); box-shadow: 0 14px 34px 4px rgba( 0, 3, 8, 0.85 ); } /* Mirror: a touch stronger to match the brighter band */ body.pg-palette-preview .pg-hero__inner::after { opacity: 1; } } /* ---- 11.5 MOBILE: same seven field layers at phone scale ---- */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-position: right -110px top 40px, left -170px top -90px, center top, 0 0, 0 0, 0 0, 0 0; background-size: 360px 400px, 320px 320px, 200% 55%, auto, auto, auto, auto; } } /* ---- 11.6 GLASS: translucent, not white ---- * The catalog renders are milky-white glass; the mockup's bottles read as * clear glass with the scene visible through them. True per-pixel * transparency would need new renders (worth doing later — noted), but a * calibrated partial opacity gets most of the way: the dark scene bleeds * through the white glass and powder, while a contrast/saturation lift * re-densifies the navy labels and gold bands so they stay crisp. Values * chosen by A/B against the mockup at 0.87 / 0.78 / 0.82 — 0.82 keeps the * glass transparent AND the labels legible. */ body.pg-palette-preview .pg-hero__vial img { opacity: 0.82; filter: drop-shadow( 0 0 8px rgba( 170, 200, 240, 0.12 ) ) drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.22 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.35 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ) contrast( 1.2 ) saturate( 1.22 ); } body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { opacity: 0.82; filter: drop-shadow( 0 0 7px rgba( 170, 200, 240, 0.10 ) ) drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.18 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.28 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.55 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.45 ) ) contrast( 1.2 ) saturate( 1.22 ) brightness( 0.96 ); } /* The under-vial reflections were tuned for opaque bottles; with the glass at 0.82 they double-expose, so they come down a step. */ body.pg-palette-preview .pg-hero__vial::after { opacity: 0.22; } /* ========================================================================== * v12 — PHOTOREAL SCENE PLATE (desktop) * ========================================================================== * The owner's verdict on v11: closer, but it still looks drawn next to the * mockup. Correct — CSS gradients cannot produce photographic light bloom, * a machined metal podium, or a wet-floor reflection. So the scene is now a * RENDERED IMAGE, produced to match the approved mockup (empty stage: navy * studio, metal podium with gold rim, crossing light streaks, molecule * lattice with lit nodes, blue nebula, reflective floor) with the real vial * renders standing on it — which is how heroes like the mockup are actually * built in production. * * GEOMETRY — why these percentages are what they are: * The plate is 1376x768 with its podium centred at 69.0% of image width and * the vial-base line at 67.06% of image height. The vials stand at 72.2% of * the frame with bases at 73.4% of the hero band (v9, matched to the mockup). * With background-size auto 124%: * pos-y = (0.6706 x 1.24 - 0.734) / 0.24 = 40.6% * -- this equation is height-independent, so the bases sit on the podium * face at EVERY hero height with no media queries; * pos-x at the 1671 reference solves the same way = 38.4%, * -- but the x mapping depends on the viewport-to-image width ratio, so * two breakpoint corrections below re-centre the podium under the * group at narrower desktops. Values verified by measurement. * * The drawn scene (CSS podium, arcs, hex tiles, halo, mirror) is switched * off on desktop — the plate replaces all of it. Phones keep the v11 drawn * scene: the plate is a wide landscape and cannot serve a tall portrait * hero. * ========================================================================== */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { background-color: #01060F; background-image: url( "../images/preview/hero-scene.webp" ); background-position: 38.4% 40.6%; background-repeat: no-repeat; background-size: auto 124%; } /* The plate carries its own vignette, light and grain. */ body.pg-palette-preview .pg-hero::before, body.pg-palette-preview .pg-hero::after { background: none; } /* Drawn streaks off. */ body.pg-palette-preview .pg-hero__stage::before, body.pg-palette-preview .pg-hero__stage::after { content: none; } /* Drawn podium off. */ body.pg-palette-preview .pg-hero__floor { background: none; } body.pg-palette-preview .pg-hero__floor::before, body.pg-palette-preview .pg-hero__floor::after { content: none; } /* Drawn floor mirror off. */ body.pg-palette-preview .pg-hero__inner::after { content: none; } /* The plate lights the products; the CSS halo would double it. */ body.pg-palette-preview .pg-hero__glow { background: none; } /* Podium re-centring at narrower desktops (see GEOMETRY note). */ @media ( max-width: 1600px ) { body.pg-palette-preview .pg-hero { background-position: 44% 40.6%; } } @media ( max-width: 1400px ) { body.pg-palette-preview .pg-hero { background-position: 58% 40.6%; } } /* Very wide screens: the 124%-height plate can run out of width; switching to width-driven cover keeps it edge to edge. */ @media ( min-width: 1960px ) { body.pg-palette-preview .pg-hero { background-position: 50% 36%; background-size: 100% auto; } } /* THE GLASS on a photoreal stage: v11's heavy 0.82 ghosting read as fake next to real light. Nearly solid, a breath of transparency, and the scene's own illumination does the rest. */ body.pg-palette-preview .pg-hero__vial img { opacity: 0.94; filter: drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.20 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.30 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.6 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.5 ) ) contrast( 1.07 ) saturate( 1.08 ); } body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { opacity: 0.94; filter: drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.16 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.24 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.6 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.5 ) ) contrast( 1.07 ) saturate( 1.08 ) brightness( 0.95 ); } /* Reflections bed the bottles onto the plate's glossy podium. */ body.pg-palette-preview .pg-hero__vial::after { opacity: 0.26; } } /* 12.1 Plate scaled up a step (124% -> 128%) so the podium carries the full group with real margins, positions re-solved for the new scale (same equations as the v12 header note), and a soft contact shadow under each bottle so the glass visibly SITS on the metal instead of hovering. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { background-position: 46.4% 44.4%; background-size: auto 128%; } @media ( max-width: 1600px ) { body.pg-palette-preview .pg-hero { background-position: 49.6% 44.4%; } } @media ( max-width: 1400px ) { body.pg-palette-preview .pg-hero { background-position: 60.3% 44.4%; } } @media ( min-width: 1960px ) { body.pg-palette-preview .pg-hero { background-position: 50% 36%; background-size: 100% auto; } } body.pg-palette-preview .pg-hero__vial::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 0, 4, 10, 0.5 ) 0%, rgba( 0, 4, 10, 0.28 ) 55%, rgba( 0, 4, 10, 0 ) 100% ); bottom: 1%; content: ""; height: 4.5%; left: 22%; pointer-events: none; position: absolute; right: 22%; z-index: -1; } } /* ========================================================================== * v13 — CLEAR-GLASS VIAL RENDERS (generated on Higgsfield from the originals) * ========================================================================== * The owner asked for see-through vials with their real labels. Each catalog * render was re-rendered (nano banana pro, original render as the label * reference) as clear borosilicate glass on a chroma green plate, then keyed * to true per-pixel alpha locally and fitted into a 1254x1254 canvas at the * ORIGINAL file's content bbox — so every existing size, offset and * normalisation (--pg-vs keys off the img src attribute, which is unchanged) * still applies to the pixel. * * The swap uses `content: url()` on the img so the pattern markup stays * untouched and the whole change remains preview-scoped. (If this design * goes live, the files simply replace the originals instead.) * * TRZ-2 was requested too but the Higgsfield workspace hit 0 credits; its * reference is uploaded and the recipe is proven — it is one 2-credit * generation away. * * With real transparency in the alpha channel, every fake-glass trick dies * here: opacity back to 1, no contrast/saturation filter — just shadows. * ========================================================================== */ body.pg-palette-preview .pg-hero__vial--front img { content: url( "../images/preview/vial-bpctb-clear.webp" ); } body.pg-palette-preview .pg-hero__vial--left img { content: url( "../images/preview/vial-rta3-clear.webp" ); } body.pg-palette-preview .pg-hero__vial--right img { content: url( "../images/preview/vial-klow-clear.webp" ); } /* Reflections mirror the same clear renders. */ body.pg-palette-preview .pg-hero__vial--front::after { background-image: url( "../images/preview/vial-bpctb-clear.webp" ); } body.pg-palette-preview .pg-hero__vial--left::after { background-image: url( "../images/preview/vial-rta3-clear.webp" ); } body.pg-palette-preview .pg-hero__vial--right::after { background-image: url( "../images/preview/vial-klow-clear.webp" ); } /* Real glass needs no faking — all breakpoints. */ body.pg-palette-preview .pg-hero__vial img { opacity: 1; filter: drop-shadow( 0 0 6px rgba( 243, 215, 138, 0.18 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.25 ) ) drop-shadow( 0 26px 30px rgba( 0, 0, 0, 0.6 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.5 ) ); } body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { opacity: 1; filter: drop-shadow( 0 0 5px rgba( 243, 215, 138, 0.15 ) ) drop-shadow( 0 0 1px rgba( 255, 248, 224, 0.2 ) ) drop-shadow( 0 24px 28px rgba( 0, 0, 0, 0.6 ) ) drop-shadow( 0 3px 6px rgba( 0, 0, 0, 0.5 ) ) brightness( 0.97 ); } /* ========================================================================== * v13.1 — OWNER'S TUNE: smaller, more even, gold pushed back * ========================================================================== * 1. SCALE + EVENNESS. The lead vial drops from 515px of glass to 455 and the * flanks settle at 405, taking the flank-to-lead ratio from 0.79 to 0.89 — * three near-peers rather than one tower. Solved with the v9 equations * (element = glass / (vs x span), bottoms from the shared 720 baseline), * so the bases stay ON the podium face and the centres stay put. * 2. GOLD BACK. The plate's brightest streak crosses the foreground; a * navy atmospheric wash on .pg-hero::after (above the plate at z 0, below * the products at z 2-3) darkens the foreground band and the right-edge * flare, which reads as the light moving behind the stage. * ========================================================================== */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__vial--left { bottom: 20.8%; height: 63.6%; transform: translate( 0, 0 ) translateX( -105.4% ); } body.pg-palette-preview .pg-hero__vial--front { bottom: 20.3%; height: 71.5%; transform: translate( 0, 0 ) translateX( -55.2% ); } body.pg-palette-preview .pg-hero__vial--right { bottom: 20.9%; height: 63.6%; transform: translate( 0, 0 ) translateX( -10.7% ); } body.pg-palette-preview .pg-hero::after { background: linear-gradient( 180deg, rgba( 2, 8, 18, 0 ) 56%, rgba( 2, 8, 18, 0.26 ) 82%, rgba( 2, 8, 18, 0.52 ) 100% ), radial-gradient( ellipse 30% 34% at 100% 74%, rgba( 2, 8, 18, 0.34 ) 0%, rgba( 2, 8, 18, 0 ) 70% ), radial-gradient( ellipse 44% 22% at 84% 96%, rgba( 3, 10, 22, 0.42 ) 0%, rgba( 3, 10, 22, 0 ) 72% ), radial-gradient( ellipse 34% 16% at 56% 100%, rgba( 3, 10, 22, 0.34 ) 0%, rgba( 3, 10, 22, 0 ) 70% ); } } /* Phones follow the same evenness: lead box 59vw -> 54vw, flanks up a step. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero__vial--left, body.pg-palette-preview .pg-hero__vial--right { width: 47.5vw; } body.pg-palette-preview .pg-hero__vial--front { margin-left: -25vw; margin-right: -25vw; width: 54vw; } } /* ========================================================================== * v13.2 — OWNER'S TUNE: the background recedes * ========================================================================== * "Everything is too close" — the plate's hexagons, bokeh and streaks sit at * camera distance. Two moves push them back: * 1. The plate zooms out from 128% to 124% of the hero height (positions * re-solved with the v12 equations; the smaller vial group still keeps * ~25px of podium under each outer bottle). * 2. Depth of field: .pg-hero::before gains a masked backdrop blur — the * scene blurs and dims EXCEPT inside a feathered ellipse around the * products and podium, which stays sharp. Optically that is exactly a * camera focused on the stage with the set falling away behind it. * ========================================================================== */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { background-position: 38.4% 40.6%; background-size: auto 124%; } @media ( max-width: 1600px ) { body.pg-palette-preview .pg-hero { background-position: 44% 40.6%; } } @media ( max-width: 1400px ) { body.pg-palette-preview .pg-hero { background-position: 58% 40.6%; } } @media ( min-width: 1960px ) { body.pg-palette-preview .pg-hero { background-position: 50% 36%; background-size: 100% auto; } } body.pg-palette-preview .pg-hero::before { -webkit-backdrop-filter: blur( 5px ) brightness( 0.88 ) saturate( 0.94 ); backdrop-filter: blur( 5px ) brightness( 0.88 ) saturate( 0.94 ); -webkit-mask-image: radial-gradient( ellipse 38% 56% at 72% 60%, transparent 0%, transparent 52%, #000 82% ); mask-image: radial-gradient( ellipse 38% 56% at 72% 60%, transparent 0%, transparent 52%, #000 82% ); } } /* ========================================================================== * v13.3 — BACKGROUND ZOOMED OUT FOR REAL (and the blur removed) * ========================================================================== * v13.2 faked distance with a depth-of-field blur; the owner wants the scene * genuinely wider, not softer. The obstacle was that the podium and the * background lived in one baked image, so zooming out shrank the podium too. * * The plate is now SPLIT into two files (built from the same render): * hero-podium.webp full canvas, transparent except the podium, so all the * v12 alignment math applies to it unchanged * hero-bg.webp the same scene with the podium smudged into dark floor * and its frame edges feathered so it dissolves * * They are then two background layers at INDEPENDENT scales: the podium stays * at 124% locked to the vial bases, while the background drops to 86% — the * molecules, bokeh and streaks become physically smaller and read as further * away, which is the mockup's sense of depth. No blur is involved; the * backdrop-filter is switched off and ::before keeps only the v13.1 wash that * holds the foreground gold back. * ========================================================================== */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { background-color: #01060F; background-image: url( "../images/preview/hero-podium.webp" ), url( "../images/preview/hero-bg.webp" ); background-position: 38.4% 40.6%, 88% 26%; background-repeat: no-repeat, no-repeat; background-size: auto 124%, auto 70%; } @media ( max-width: 1600px ) { body.pg-palette-preview .pg-hero { background-position: 44% 40.6%, 90% 26%; } } @media ( max-width: 1400px ) { body.pg-palette-preview .pg-hero { background-position: 58% 40.6%, 94% 26%; } } @media ( min-width: 1960px ) { body.pg-palette-preview .pg-hero { background-position: 50% 36%, 86% 22%; background-size: 100% auto, 58% auto; } } /* Blur off — distance now comes from scale, not softness. */ body.pg-palette-preview .pg-hero::before { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; background: linear-gradient( 180deg, rgba( 2, 8, 18, 0 ) 56%, rgba( 2, 8, 18, 0.26 ) 82%, rgba( 2, 8, 18, 0.52 ) 100% ), radial-gradient( ellipse 30% 34% at 100% 74%, rgba( 2, 8, 18, 0.34 ) 0%, rgba( 2, 8, 18, 0 ) 70% ), radial-gradient( ellipse 44% 22% at 84% 96%, rgba( 3, 10, 22, 0.42 ) 0%, rgba( 3, 10, 22, 0 ) 72% ), radial-gradient( ellipse 34% 16% at 56% 100%, rgba( 3, 10, 22, 0.34 ) 0%, rgba( 3, 10, 22, 0 ) 70% ); } } /* 13.3b With the background layer pulled back and up, the space directly behind the products went flat. This restores a soft, wide atmospheric glow there — pure gradient, no detail, so it reads as distant air rather than another near object. v12 had switched .pg-hero__glow off when the plate arrived; it comes back quieter and broader than the old drawn version. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 62% 54% at 50% 52%, rgba( 104, 142, 200, 0.13 ) 0%, rgba( 78, 112, 168, 0.05 ) 46%, rgba( 78, 112, 168, 0 ) 76% ), radial-gradient( ellipse 40% 34% at 52% 60%, rgba( 226, 197, 110, 0.06 ) 0%, rgba( 212, 175, 55, 0 ) 72% ); } } /* ========================================================================== * v13.4 — ORIGINAL BACKGROUND, NOW ALIVE * ========================================================================== * The background returns to the scale and position it had as one combined * plate: both layers at `auto 124%` on the same coordinates, which * reconstructs the original render (the two files were cut from it, so * compositing them aligned reproduces it — the smudged podium hole sits * exactly under the real podium). * * The split still earns its keep: it is what makes animation possible. The * PODIUM layer must not move, or the static vials would slide off it, so the * drift is applied to the BACKGROUND layer alone — its molecules, bokeh and * streaks breathe slowly while the stage stays planted. * * Mechanism: background-position is animated, with the podium's coordinates * held constant through custom properties (so each breakpoint keeps its own * podium alignment) and only the second layer's values changing. A 54s * ease-in-out cycle moves the scene about 30px — ambient, not a slideshow. * The vials remain completely static, as briefed. * ========================================================================== */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { --pg-pod-x: 38.4%; --pg-pod-y: 40.6%; animation: pg-scene-drift 54s ease-in-out infinite; background-position: var( --pg-pod-x ) var( --pg-pod-y ), 38.4% 40.6%; background-size: auto 124%, auto 124%; } @media ( max-width: 1600px ) { body.pg-palette-preview .pg-hero { --pg-pod-x: 44%; } } @media ( max-width: 1400px ) { body.pg-palette-preview .pg-hero { --pg-pod-x: 58%; } } @media ( min-width: 1960px ) { body.pg-palette-preview .pg-hero { --pg-pod-x: 50%; --pg-pod-y: 36%; background-size: 100% auto, 100% auto; } } @keyframes pg-scene-drift { 0%, 100% { background-position: var( --pg-pod-x ) var( --pg-pod-y ), 30% 34%; } 50% { background-position: var( --pg-pod-x ) var( --pg-pod-y ), 47% 47%; } } /* The plate's own nebula is back, so the added glow steps down to a hint. */ body.pg-palette-preview .pg-hero__glow { animation: pg-scene-breathe 38s ease-in-out infinite; background: radial-gradient( ellipse 62% 54% at 50% 52%, rgba( 104, 142, 200, 0.07 ) 0%, rgba( 78, 112, 168, 0.03 ) 46%, rgba( 78, 112, 168, 0 ) 76% ); } @keyframes pg-scene-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } } /* Motion is decorative here: with reduced-motion the scene simply holds still at its rest position rather than snapping between keyframes. */ @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .pg-hero, body.pg-palette-preview .pg-hero__glow { animation: none !important; } body.pg-palette-preview .pg-hero { background-position: var( --pg-pod-x, 38.4% ) var( --pg-pod-y, 40.6% ), 38.4% 40.6%; } } /* ========================================================================== * v14 — THE SCENE COMES ALIVE (CSS only, no video, no payload) * ========================================================================== * Chosen over a generated video: zero credits, zero megabytes, no autoplay * caveats, and nothing to fall back from. Five independent motions run at * unrelated periods (54s / 70s / 15s / 6.5s / 9.5s / 38s) so the composite * never visibly loops: * * 1. scene drift the background plate, from v13.4 * 2. bokeh rise two particle sheets at two speeds (parallax depth) * 3. gold shimmer a light band sweeping through the streak zone * 4. twinkle A/B two sparkle sets pulsing out of phase * 5. glow breathe the atmospheric pool, from v13.4 * * Every layer sits at z-index 0-1, below the products (z 2-3) and the copy * (z 3). THE VIALS AND THE PODIUM DO NOT MOVE — only light and particles do, * which is the whole point of the brief. * * Layer assignment note: .pg-hero::before hands its wash over to ::after * (which already carried one) so it is free to host the particles. * ========================================================================== */ @media ( min-width: 782px ) { /* ---- 1. BOKEH: two sheets, two speeds, seamless tile loops ---- */ body.pg-palette-preview .pg-hero::before { animation: pg-bokeh-rise 70s linear infinite; background-color: transparent; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop offset='0' stop-color='%23F3D78A' stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23a)'%3E%3Ccircle cx='58' cy='72' r='7'/%3E%3Ccircle cx='190' cy='140' r='11'/%3E%3Ccircle cx='330' cy='60' r='6'/%3E%3Ccircle cx='95' cy='265' r='9'/%3E%3Ccircle cx='250' cy='320' r='13'/%3E%3Ccircle cx='380' cy='240' r='8'/%3E%3Ccircle cx='150' cy='392' r='6'/%3E%3Ccircle cx='300' cy='190' r='5'/%3E%3C/g%3E%3C/svg%3E" ), url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23E2C56E' stop-opacity='0.34'/%3E%3Cstop offset='1' stop-color='%23E2C56E' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23AECBF5' stop-opacity='0.26'/%3E%3Cstop offset='1' stop-color='%23AECBF5' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='120' cy='180' r='18' fill='url(%23g)'/%3E%3Ccircle cx='450' cy='90' r='14' fill='url(%23b)'/%3E%3Ccircle cx='300' cy='420' r='22' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='330' r='16' fill='url(%23b)'/%3E%3Ccircle cx='80' cy='540' r='12' fill='url(%23g)'/%3E%3Ccircle cx='400' cy='602' r='15' fill='url(%23g)'/%3E%3C/svg%3E" ); background-repeat: repeat, repeat; background-size: 420px 420px, 640px 640px; opacity: 0.9; } @keyframes pg-bokeh-rise { from { background-position: 0 0, 0 0; } to { background-position: 0 -420px, 0 -640px; } } /* ---- the wash consolidates onto ::after ---- */ body.pg-palette-preview .pg-hero::after { background: linear-gradient( 180deg, rgba( 2, 8, 18, 0 ) 56%, rgba( 2, 8, 18, 0.26 ) 82%, rgba( 2, 8, 18, 0.52 ) 100% ), radial-gradient( ellipse 30% 34% at 100% 74%, rgba( 2, 8, 18, 0.34 ) 0%, rgba( 2, 8, 18, 0 ) 70% ), radial-gradient( ellipse 44% 22% at 84% 96%, rgba( 3, 10, 22, 0.42 ) 0%, rgba( 3, 10, 22, 0 ) 72% ), radial-gradient( ellipse 34% 16% at 56% 100%, rgba( 3, 10, 22, 0.34 ) 0%, rgba( 3, 10, 22, 0 ) 70% ); } /* ---- 3. SHIMMER: a light band travelling through the streaks ---- */ body.pg-palette-preview .pg-hero__stage::after { animation: pg-shimmer 15s linear infinite; background-image: linear-gradient( 100deg, rgba( 255, 248, 224, 0 ) 42%, rgba( 255, 248, 224, 0.085 ) 50%, rgba( 255, 248, 224, 0 ) 58% ); background-repeat: no-repeat; background-size: 260% 100%; content: ""; inset: 0 -30% 0 -40%; pointer-events: none; position: absolute; z-index: 1; } @keyframes pg-shimmer { from { background-position: 130% 0; } to { background-position: -60% 0; } } /* ---- 4a. TWINKLE A ---- */ body.pg-palette-preview .pg-hero__stage::before { animation: pg-twinkle-a 6.5s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='620'%3E%3Cg fill='%23FFF8E0'%3E%3Ccircle cx='140' cy='90' r='2.2'/%3E%3Ccircle cx='420' cy='60' r='1.6'/%3E%3Ccircle cx='660' cy='150' r='2.6'/%3E%3Ccircle cx='250' cy='230' r='1.8'/%3E%3Ccircle cx='740' cy='330' r='2'/%3E%3Ccircle cx='520' cy='420' r='1.6'/%3E%3Ccircle cx='80' cy='400' r='2.2'/%3E%3C/g%3E%3C/svg%3E" ); background-position: right -40px top 10px; background-repeat: no-repeat; background-size: 820px 620px; content: ""; inset: 0 -14% 0 -10%; pointer-events: none; position: absolute; z-index: 0; } @keyframes pg-twinkle-a { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* ---- 4b. TWINKLE B: different stars, out of phase ---- */ body.pg-palette-preview .pg-hero__floor::before { animation: pg-twinkle-b 9.5s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='560'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='300' cy='120' r='2'/%3E%3Ccircle cx='560' cy='70' r='2.4'/%3E%3Ccircle cx='120' cy='200' r='1.6'/%3E%3Ccircle cx='690' cy='260' r='1.8'/%3E%3Ccircle cx='400' cy='330' r='2.2'/%3E%3Ccircle cx='210' cy='450' r='1.6'/%3E%3C/g%3E%3C/svg%3E" ); background-position: right -20px top 0; background-repeat: no-repeat; background-size: 760px 560px; bottom: auto; box-shadow: none; content: ""; height: auto; inset: -60% -12% auto -8%; left: auto; pointer-events: none; position: absolute; right: auto; width: auto; z-index: 0; } @keyframes pg-twinkle-b { 0%, 100% { opacity: 0.9; } 45% { opacity: 0.2; } } } /* Reduced motion: everything holds still. */ @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .pg-hero::before, body.pg-palette-preview .pg-hero__stage::before, body.pg-palette-preview .pg-hero__stage::after, body.pg-palette-preview .pg-hero__floor::before { animation: none !important; opacity: 0.55; } } /* 14.1 The bokeh sheets covered the whole hero, drifting over the headline and lead. In the plate the particles belong to the right-hand scene, so the layer is masked to fade in across the middle and is carried a little quieter — the copy column returns to clean dark navy. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero::before { -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 26%, rgba( 0, 0, 0, 0.45 ) 40%, #000 56%, #000 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 26%, rgba( 0, 0, 0, 0.45 ) 40%, #000 56%, #000 100% ); opacity: 0.68; } } /* 14.2 The shimmer band was clipped by its own element box, showing as a hard vertical edge down the middle of the hero. A soft elliptical mask lets the travelling light fade out well inside the boundary, so only the band itself is ever visible. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__stage::after { -webkit-mask-image: radial-gradient( ellipse 62% 72% at 58% 56%, #000 0%, #000 34%, rgba( 0, 0, 0, 0.35 ) 68%, transparent 94% ); mask-image: radial-gradient( ellipse 62% 72% at 58% 56%, #000 0%, #000 34%, rgba( 0, 0, 0, 0.35 ) 68%, transparent 94% ); } } /* ========================================================================== * v14.3 — SMALLER GROUP ON THE PLATE, TWINKLES IN EVERY DIRECTION * ========================================================================== * 1. VIALS DOWN A STEP so the trio sits comfortably inside the podium: lead * glass 455 -> 400, flanks 405 -> 355, and the centres drawn in (985 / * 1217 / 1425) so the group narrows from 654px to 609px rather than just * spreading out. Solved with the same v9 equations, so all three bases * stay on the podium face. * * 2. TWINKLES REBUILT: three sheets instead of two, each drifting a * DIFFERENT WAY — up-right, down-left, and straight across — over the * bokeh already rising. Each pulses on its own short period (3.2s / 4.6s / * 2.6s) through a much deeper opacity range, so the sparkle is far busier * than the old slow fade. Every sheet is a repeating tile whose drift * distance equals its tile size, so the loops are seamless. * * Two of them move to .pg-hero__inner's pseudos: .pg-hero__floor is a 96px * box, so percentage insets on its pseudos resolved against a tiny height * and could not cover the scene reliably. * ========================================================================== */ @media ( min-width: 782px ) { /* ---- 1. the group, smaller and tighter ---- */ body.pg-palette-preview .pg-hero__vial--left { bottom: 21.3%; height: 55.8%; transform: translate( 0, 0 ) translateX( -110.9% ); } body.pg-palette-preview .pg-hero__vial--front { bottom: 20.8%; height: 62.8%; transform: translate( 0, 0 ) translateX( -55.9% ); } body.pg-palette-preview .pg-hero__vial--right { bottom: 21.3%; height: 55.7%; transform: translate( 0, 0 ) translateX( -8% ); } /* ---- 2. three twinkle sheets, three directions ---- */ body.pg-palette-preview .pg-hero__stage::before, body.pg-palette-preview .pg-hero__inner::before, body.pg-palette-preview .pg-hero__inner::after { background-repeat: repeat; content: ""; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, transparent 24%, rgba( 0, 0, 0, 0.5 ) 38%, #000 54%, #000 100% ); mask-image: linear-gradient( 90deg, transparent 0%, transparent 24%, rgba( 0, 0, 0, 0.5 ) 38%, #000 54%, #000 100% ); pointer-events: none; position: absolute; z-index: 0; } /* A — drifts up and to the right */ body.pg-palette-preview .pg-hero__stage::before { animation: pg-tw-a 3.2s ease-in-out infinite, pg-drift-ne 52s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='40' cy='60' r='2'/%3E%3Ccircle cx='150' cy='30' r='1.4'/%3E%3Ccircle cx='270' cy='110' r='2.4'/%3E%3Ccircle cx='80' cy='200' r='1.8'/%3E%3Ccircle cx='200' cy='250' r='2'/%3E%3Ccircle cx='312' cy='290' r='1.6'/%3E%3Ccircle cx='120' cy='322' r='2.2'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 340px 340px; inset: -20% -30% -10% -70%; } /* B — drifts down and to the left */ body.pg-palette-preview .pg-hero__inner::before { animation: pg-tw-b 4.6s ease-in-out infinite, pg-drift-sw 64s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cg fill='%23FFF8E0'%3E%3Ccircle cx='60' cy='80' r='2.2'/%3E%3Ccircle cx='200' cy='40' r='1.6'/%3E%3Ccircle cx='360' cy='140' r='2.6'/%3E%3Ccircle cx='100' cy='260' r='1.8'/%3E%3Ccircle cx='300' cy='330' r='2'/%3E%3Ccircle cx='432' cy='240' r='1.5'/%3E%3Ccircle cx='180' cy='422' r='2.3'/%3E%3Ccircle cx='400' cy='432' r='1.7'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 460px 460px; inset: 0; } /* C — travels straight across */ body.pg-palette-preview .pg-hero__inner::after { animation: pg-tw-c 2.6s ease-in-out infinite, pg-drift-w 44s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='30' cy='50' r='1.8'/%3E%3Ccircle cx='140' cy='90' r='2.2'/%3E%3Ccircle cx='250' cy='40' r='1.5'/%3E%3Ccircle cx='90' cy='190' r='2'/%3E%3Ccircle cx='210' cy='230' r='1.7'/%3E%3Ccircle cx='282' cy='160' r='2.4'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 300px 300px; inset: 0; } /* the old twinkle host is released */ body.pg-palette-preview .pg-hero__floor::before { animation: none; content: none; } @keyframes pg-tw-a { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } } @keyframes pg-tw-b { 0%, 100% { opacity: 1; } 45% { opacity: 0.08; } } @keyframes pg-tw-c { 0%, 100% { opacity: 0.15; } 60% { opacity: 0.95; } } @keyframes pg-drift-ne { from { background-position: 0 0; } to { background-position: 340px -340px; } } @keyframes pg-drift-sw { from { background-position: 0 0; } to { background-position: -460px 460px; } } @keyframes pg-drift-w { from { background-position: 0 0; } to { background-position: -300px 0; } } } @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .pg-hero__inner::before, body.pg-palette-preview .pg-hero__inner::after { animation: none !important; opacity: 0.5; } } /* 14.4 Even spacing. Measured at 1671 the gaps between the visible glass were 56px (RTA-3 to BPC/TB) and 28px (BPC/TB to KLOW) — exactly double, which is what read as "not evenly spaced". The cause was carrying the centres over from the larger group: the three bottles have different widths (166 / 188 / 172), so equal CENTRE spacing does not give equal GAPS, and the eye reads the gaps. Solved for a uniform 41.5px gap across the same 902-1511 span, which leaves the outer two exactly where they were and moves only the lead vial 14.5px left. The group's footprint on the podium is unchanged. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__vial--front { transform: translate( 0, 0 ) translateX( -58.9% ); } } /* ========================================================================== * v14.5 — VIALS SEATED, BACKGROUND HELD STILL * ========================================================================== * 1. THE FLOATING WAS A REAL BUG, not a placement problem. The reflection is * positioned `top: 100%` — the bottom of the vial's ELEMENT box. But the * PNG canvas carries ~6% of transparent padding below the glass, so the * element bottom sits 29px under the actual base: the reflection began * 29px below each bottle, and that gap read as air. Anchoring it at 94% * puts the reflection exactly at the glass base, where a reflection on a * polished podium starts. * * 2. A REAL CONTACT SHADOW. The old one was faint and sat entirely below the * base. It now straddles the contact line — a tight dark core where glass * meets metal, plus a soft spread — which is the cue that actually reads * as "standing on" rather than "hovering above". * * 3. BACKGROUND STATIONARY, as briefed. The plate's drift and the glow's * breathe are switched off; the scene holds still. Only the twinkles and * the gold shimmer keep moving. * ========================================================================== */ /* ---- 1. reflection anchored to the glass base (all breakpoints) ---- */ body.pg-palette-preview .pg-hero__vial::after { opacity: 0.3; top: 94%; } /* ---- 2. contact shadow straddling the base ---- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero__vial::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 0, 3, 8, 0.78 ) 0%, rgba( 0, 3, 8, 0.5 ) 42%, rgba( 0, 3, 8, 0 ) 100% ), radial-gradient( ellipse closest-side at 50% 50%, rgba( 0, 3, 8, 0.5 ) 0%, rgba( 0, 3, 8, 0 ) 100% ); background-position: center, center; background-repeat: no-repeat, no-repeat; background-size: 62% 80%, 100% 100%; bottom: 3.6%; height: 3.4%; left: 24%; right: 24%; } } /* ---- 3. the scene stops moving ---- */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero { animation: none; background-position: var( --pg-pod-x ) var( --pg-pod-y ), 38.4% 40.6%; } body.pg-palette-preview .pg-hero__glow { animation: none; opacity: 1; } } /* 14.6 The bokeh sheets stop drifting too. The plate carries its own baked bokeh, which is now stationary — leaving the CSS orbs rising alongside frozen ones read as a glitch rather than depth. The layer stays for the added depth, it simply holds still. Moving now: twinkles and the gold shimmer, exactly as briefed. */ @media ( min-width: 782px ) { body.pg-palette-preview .pg-hero::before { animation: none; background-position: 0 0, 0 0; } } /* ========================================================================== * v15 — MOBILE GETS THE DESKTOP SCENE * ========================================================================== * Most visitors are on phones, so mobile stops being the poor relation: the * drawn CSS podium is retired below 782px and the same photoreal plate the * desktop uses takes over, with the same twinkles over it. * * WHY THIS IS NOW POSSIBLE: the plate is split into two files, so the podium * can be scaled and placed independently of the background. A single wide * landscape image could never serve a tall portrait hero — two layers can. * * GEOMETRY, solved against the desktop as the reference rather than guessed: * scale the plate is scaled by the ratio of the vial groups (274/609 = * 0.45), so the podium suits the smaller phone trio exactly as it * suits the desktop one; * position solved so the podium's centre lands on the group's centre (x * 196) and the base line falls at the same relative depth on the * disc as desktop (image y 515.7); * headroom the phone had only 54px below the bases against the 99px that * ratio demands, so the drum would have been cut in half. The * stage gains bottom padding to make up the 45px. Because the * stage is flex-end, that padding grows the hero WITHOUT moving * the vials — the bases stay at 691. * The plate then clips at the hero edge by 11.5%, the same fraction as * desktop, so the stage runs past the frame identically on both. * ========================================================================== */ @media ( max-width: 781px ) { /* room for the drum, without shifting the vials */ body.pg-palette-preview .pg-hero__stage { padding-bottom: 20.3vw; } /* the photoreal plate, in place of the drawn scene */ body.pg-palette-preview .pg-hero { background-color: #01060F; background-image: url( "../images/preview/hero-podium.webp" ), url( "../images/preview/hero-bg.webp" ); background-position: 85.6% 120.1%, 74% 4%; background-repeat: no-repeat, no-repeat; background-size: auto 63.6%, auto 96%; } /* drawn podium, drawn floor and drawn arc all retire */ body.pg-palette-preview .pg-hero__floor { background: none; } body.pg-palette-preview .pg-hero__floor::before, body.pg-palette-preview .pg-hero__floor::after { content: none; } /* the plate carries its own light; keep only a whisper behind the glass */ body.pg-palette-preview .pg-hero__glow { background: radial-gradient( ellipse 70% 56% at 50% 56%, rgba( 104, 142, 200, 0.1 ) 0%, rgba( 78, 112, 168, 0 ) 74% ); } /* ---- twinkles, as on desktop, held to the scene half of the frame ---- */ body.pg-palette-preview .pg-hero__stage::before, body.pg-palette-preview .pg-hero__inner::before, body.pg-palette-preview .pg-hero__inner::after { background-repeat: repeat; content: ""; -webkit-mask-image: linear-gradient( 180deg, transparent 0%, transparent 34%, rgba( 0, 0, 0, 0.5 ) 48%, #000 62%, #000 100% ); mask-image: linear-gradient( 180deg, transparent 0%, transparent 34%, rgba( 0, 0, 0, 0.5 ) 48%, #000 62%, #000 100% ); pointer-events: none; position: absolute; z-index: 0; } body.pg-palette-preview .pg-hero__stage::before { animation: pg-tw-a 3.2s ease-in-out infinite, pg-drift-ne 52s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='40' cy='60' r='2'/%3E%3Ccircle cx='150' cy='30' r='1.4'/%3E%3Ccircle cx='270' cy='110' r='2.4'/%3E%3Ccircle cx='80' cy='200' r='1.8'/%3E%3Ccircle cx='200' cy='250' r='2'/%3E%3Ccircle cx='312' cy='290' r='1.6'/%3E%3Ccircle cx='120' cy='322' r='2.2'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 340px 340px; inset: -40% -30% -30% -30%; } body.pg-palette-preview .pg-hero__inner::before { animation: pg-tw-b 4.6s ease-in-out infinite, pg-drift-sw 64s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cg fill='%23FFF8E0'%3E%3Ccircle cx='60' cy='80' r='2.2'/%3E%3Ccircle cx='200' cy='40' r='1.6'/%3E%3Ccircle cx='360' cy='140' r='2.6'/%3E%3Ccircle cx='100' cy='260' r='1.8'/%3E%3Ccircle cx='300' cy='330' r='2'/%3E%3Ccircle cx='432' cy='240' r='1.5'/%3E%3Ccircle cx='180' cy='422' r='2.3'/%3E%3Ccircle cx='400' cy='432' r='1.7'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 460px 460px; inset: 0; } body.pg-palette-preview .pg-hero__inner::after { animation: pg-tw-c 2.6s ease-in-out infinite, pg-drift-w 44s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23F3D78A'%3E%3Ccircle cx='30' cy='50' r='1.8'/%3E%3Ccircle cx='140' cy='90' r='2.2'/%3E%3Ccircle cx='250' cy='40' r='1.5'/%3E%3Ccircle cx='90' cy='190' r='2'/%3E%3Ccircle cx='210' cy='230' r='1.7'/%3E%3Ccircle cx='282' cy='160' r='2.4'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 300px 300px; inset: 0; } /* contact shadows, as desktop */ body.pg-palette-preview .pg-hero__vial::before { background: radial-gradient( ellipse closest-side at 50% 50%, rgba( 0, 3, 8, 0.78 ) 0%, rgba( 0, 3, 8, 0.5 ) 42%, rgba( 0, 3, 8, 0 ) 100% ), radial-gradient( ellipse closest-side at 50% 50%, rgba( 0, 3, 8, 0.5 ) 0%, rgba( 0, 3, 8, 0 ) 100% ); background-position: center, center; background-repeat: no-repeat, no-repeat; background-size: 62% 80%, 100% 100%; bottom: 3.6%; content: ""; height: 3.4%; left: 24%; pointer-events: none; position: absolute; right: 24%; z-index: -1; } } /* 15.1 First pass put the background at nearly full hero height, which threw large bright molecules and bokeh straight behind the headline and lead — handsome, but the copy had to fight it. Two corrections: - the background layer drops to 62%, so its detail is small and distant (the same "far away" read the desktop gets from its wider frame); - a scrim over the upper two-thirds returns the copy to near-flat dark navy, then releases as it approaches the stage. The plate is untouched around the products, which is where it should be doing the work. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-position: 85.6% 120.1%, 78% 16%; background-size: auto 63.6%, auto 62%; } body.pg-palette-preview .pg-hero::before { background: linear-gradient( 180deg, rgba( 2, 8, 18, 0.92 ) 0%, rgba( 2, 8, 18, 0.86 ) 34%, rgba( 2, 8, 18, 0.6 ) 52%, rgba( 2, 8, 18, 0.18 ) 66%, rgba( 2, 8, 18, 0 ) 78% ), radial-gradient( ellipse 60% 22% at 50% 88%, rgba( 226, 197, 110, 0.1 ) 0%, rgba( 212, 175, 55, 0 ) 74% ); } } /* 15.2 The podium is sized in vw rather than as a share of hero height. The vial group's widths are vw-based, so it scales with the viewport, while hero height is content-driven — sizing the plate against the latter let the two drift apart (measured 9px at 430px wide). In vw the plate tracks the group exactly, and the horizontal position percentage becomes width- independent: 119vw is the same 464px at 390 that the height-based value gave, and it stays locked at every other phone size. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-size: auto 119vw, auto 62%; } } /* 15.3 Vertical anchor, solved the same way. A plain percentage scales the slack between hero height and image height, and those two grow at different rates, so the podium slid ~11px against the vials at 430px. Measuring the offset each width actually needs gave 52px at 390 and 59px at 430 — a constant 13.5vw once expressed against the viewport. calc(100% + 13.5vw) keeps the slack term and adds that constant, landing the base line within ~1px of its mark at every phone width. Longhands are used because only the y axis takes the calc; x stays a plain percentage. */ @media ( max-width: 781px ) { body.pg-palette-preview .pg-hero { background-position-x: 85.5%, 78%; background-position-y: calc( 100% + 13.5vw ), 16%; } } /* ========================================================================== * v16 — MOBILE GETS ITS OWN CHARACTER + SCROLL-DRIVEN FLAKES * ========================================================================== * The owner's note: mobile should not be a shrunken desktop, it should FEEL * different — and flakes should drift in and out as you scroll. * * 1. A CLOSER, PRODUCT-FORWARD COMPOSITION. Desktop is a wide stage seen from * across a room; mobile becomes a close-up. The bottles grow and draw * together (49vw flanks, 55vw lead, overlap to -27vw), so the trio fills * the frame rather than sitting in it. The plate follows the group, so the * podium stays in proportion — what changes is the crop, not the physics. * * 2. SCROLL FLAKES, phone only. Two sheets of fine gold flakes on a fixed * layer, driven by SCROLL POSITION rather than by time: they drift and * fade in and out as the page moves, and hold still when it does. * * mix-blend-mode: screen is what makes this safe across the whole page — * screen only ever lightens, so the flakes glow over the dark hero, FAQ * and footer, and vanish over the ivory Why-Peptogenesis and Documentation * sections instead of dirtying them. * * animation-timeline: scroll() carries it where supported; browsers * without it fall back to a slow time-based drift, which reads the same at * a glance. Reduced motion stops it entirely. * ========================================================================== */ @media ( max-width: 781px ) { /* ---- 1. the closer trio ---- */ body.pg-palette-preview .pg-hero__vial--left, body.pg-palette-preview .pg-hero__vial--right { width: 49vw; } body.pg-palette-preview .pg-hero__vial--front { margin-left: -27vw; margin-right: -27vw; width: 55vw; } /* ---- 2. flakes on a fixed layer, driven by scroll ---- */ body.pg-palette-preview::before { animation: pg-flakes 110s linear infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='520'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23F3D78A' stop-opacity='0.85'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='38' cy='60' r='2.6'/%3E%3Ccircle cx='176' cy='24' r='1.8'/%3E%3Ccircle cx='262' cy='132' r='3'/%3E%3Ccircle cx='96' cy='206' r='2.2'/%3E%3Ccircle cx='214' cy='288' r='2.6'/%3E%3Ccircle cx='30' cy='352' r='1.9'/%3E%3Ccircle cx='150' cy='418' r='2.8'/%3E%3Ccircle cx='276' cy='474' r='2'/%3E%3C/g%3E%3C/svg%3E" ), url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='760'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF8E0' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Ccircle cx='84' cy='110' r='1.6'/%3E%3Ccircle cx='330' cy='58' r='2.2'/%3E%3Ccircle cx='210' cy='250' r='1.5'/%3E%3Ccircle cx='396' cy='372' r='2.4'/%3E%3Ccircle cx='48' cy='470' r='1.8'/%3E%3Ccircle cx='268' cy='596' r='2'/%3E%3Ccircle cx='140' cy='690' r='1.6'/%3E%3C/g%3E%3C/svg%3E" ); background-repeat: repeat, repeat; background-size: 300px 520px, 420px 760px; content: ""; inset: 0; mix-blend-mode: screen; pointer-events: none; position: fixed; z-index: 2; } @supports ( animation-timeline: scroll() ) { body.pg-palette-preview::before { animation: pg-flakes linear both; animation-timeline: scroll( root block ); } } @keyframes pg-flakes { 0% { background-position: 0 0, 0 0; opacity: 0; } 12% { opacity: 0.5; } 30% { opacity: 0.12; } 48% { opacity: 0.55; } 66% { opacity: 0.15; } 84% { opacity: 0.45; } 100% { background-position: 0 -520px, 0 -760px; opacity: 0; } } } @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview::before { animation: none !important; opacity: 0.18; } } /* ========================================================================== * v16.1 — THE SCROLL FLAKES TWINKLE * ========================================================================== * v16's flakes drifted and faded with scroll but held a constant brightness, * so they read as moving dust rather than the sparkle the hero has. * * The trick is that opacity is already spoken for by the scroll timeline, and * a property can only be animated by one animation at a time. So the twinkle * uses a DIFFERENT property — filter: opacity() — which multiplies the layer's * alpha independently. Two animations on one element, each with its own * timeline: `animation-timeline: scroll(root block), auto` gives the first the * page scroll and the second ordinary time. * * The two flake sheets are split across two elements so they can twinkle OUT * OF PHASE (2.8s and 4.3s), which is what stops it looking like the whole * screen blinking — the same reason the desktop hero uses three sheets at * unrelated rates. .wp-site-blocks::before hosts the second sheet: it is a * real element inside body, so it stacks above the sections cleanly. * ========================================================================== */ @media ( max-width: 781px ) { /* sheet A — fine gold, faster twinkle */ body.pg-palette-preview::before { animation: pg-flakes 110s linear infinite, pg-flake-tw-a 2.8s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='520'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23F3D78A' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='38' cy='60' r='2.6'/%3E%3Ccircle cx='176' cy='24' r='1.8'/%3E%3Ccircle cx='262' cy='132' r='3'/%3E%3Ccircle cx='96' cy='206' r='2.2'/%3E%3Ccircle cx='214' cy='288' r='2.6'/%3E%3Ccircle cx='30' cy='352' r='1.9'/%3E%3Ccircle cx='150' cy='418' r='2.8'/%3E%3Ccircle cx='276' cy='474' r='2'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 300px 520px; } /* sheet B — paler, slower twinkle, its own drift */ body.pg-palette-preview .wp-site-blocks::before { animation: pg-flakes-b 140s linear infinite, pg-flake-tw-b 4.3s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='760'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF8E0' stop-opacity='0.8'/%3E%3Cstop offset='1' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Ccircle cx='84' cy='110' r='1.6'/%3E%3Ccircle cx='330' cy='58' r='2.2'/%3E%3Ccircle cx='210' cy='250' r='1.5'/%3E%3Ccircle cx='396' cy='372' r='2.4'/%3E%3Ccircle cx='48' cy='470' r='1.8'/%3E%3Ccircle cx='268' cy='596' r='2'/%3E%3Ccircle cx='140' cy='690' r='1.6'/%3E%3C/g%3E%3C/svg%3E" ); background-repeat: repeat; background-size: 420px 760px; content: ""; inset: 0; mix-blend-mode: screen; pointer-events: none; position: fixed; z-index: 2; } @supports ( animation-timeline: scroll() ) { body.pg-palette-preview::before { animation: pg-flakes linear both, pg-flake-tw-a 2.8s ease-in-out infinite; animation-timeline: scroll( root block ), auto; } body.pg-palette-preview .wp-site-blocks::before { animation: pg-flakes-b linear both, pg-flake-tw-b 4.3s ease-in-out infinite; animation-timeline: scroll( root block ), auto; } } /* scroll-driven drift and fade for sheet B, offset from sheet A so the two crest at different points down the page */ @keyframes pg-flakes-b { 0% { background-position: 0 0; opacity: 0; } 20% { opacity: 0.42; } 40% { opacity: 0.1; } 60% { opacity: 0.5; } 80% { opacity: 0.14; } 100% { background-position: 0 -760px; opacity: 0; } } /* the twinkle itself — alpha multiplied, so it composes with the scroll fade instead of fighting it */ @keyframes pg-flake-tw-a { 0%, 100% { filter: opacity( 0.25 ); } 50% { filter: opacity( 1 ); } } @keyframes pg-flake-tw-b { 0%, 100% { filter: opacity( 1 ); } 45% { filter: opacity( 0.2 ); } } } @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .wp-site-blocks::before { animation: none !important; opacity: 0.15; } } /* 16.2 The twinkle was running correctly but barely visible: the scroll fade peaked around 0.5 and the twinkle then multiplied that down again, so the effective alpha sat near 0.19 at its brightest. The scroll-fade peaks come up so the sparkle actually reads on the dark sections — the troughs stay low so the flakes still come and go rather than sitting there. */ @media ( max-width: 781px ) { @keyframes pg-flakes { 0% { background-position: 0 0; opacity: 0; } 12% { opacity: 0.85; } 30% { opacity: 0.2; } 48% { opacity: 0.9; } 66% { opacity: 0.24; } 84% { opacity: 0.78; } 100% { background-position: 0 -520px; opacity: 0; } } @keyframes pg-flakes-b { 0% { background-position: 0 0; opacity: 0; } 20% { opacity: 0.7; } 40% { opacity: 0.18; } 60% { opacity: 0.82; } 80% { opacity: 0.22; } 100% { background-position: 0 -760px; opacity: 0; } } /* twinkle floor lifts a little so flakes never fully vanish mid-pulse */ @keyframes pg-flake-tw-a { 0%, 100% { filter: opacity( 0.4 ); } 50% { filter: opacity( 1 ); } } @keyframes pg-flake-tw-b { 0%, 100% { filter: opacity( 1 ); } 45% { filter: opacity( 0.35 ); } } } /* ========================================================================== * 16.3 — BUG FIX: the phone hero's twinkles were never running * ========================================================================== * v14.3 declared the twinkle and drift @keyframes INSIDE the desktop media * query, because at the time only desktop used them. v15 then applied those * same animation names to the phone's hero sheets — but a @keyframes block * inside @media (min-width: 782px) does not exist below that width, so the * phone had the animation names with nothing to play. Computed style showed * "pg-tw-a, pg-drift-ne" while getAnimations() returned none: named, but dead. * * The six keyframe blocks are re-declared here at top level so both * breakpoints resolve them. They are identical to the desktop copies, and the * in-media versions still win where they apply, so desktop is unchanged. * ========================================================================== */ @keyframes pg-tw-a { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } } @keyframes pg-tw-b { 0%, 100% { opacity: 1; } 45% { opacity: 0.08; } } @keyframes pg-tw-c { 0%, 100% { opacity: 0.15; } 60% { opacity: 0.95; } } @keyframes pg-drift-ne { from { background-position: 0 0; } to { background-position: 340px -340px; } } @keyframes pg-drift-sw { from { background-position: 0 0; } to { background-position: -460px 460px; } } @keyframes pg-drift-w { from { background-position: 0 0; } to { background-position: -300px 0; } } /* ========================================================================== * v17 — FLAKES SCOPED TO THE HERO AND FEATURED PRODUCTS * ========================================================================== * The flakes were a FIXED, full-viewport layer that followed you down every * section. The owner wants them only where the products are: the hero and * Featured Products. So they stop being a page-level overlay and become * layers that belong to those two sections. * * That also removes the need for the screen-blend trick that was protecting * the ivory sections — the flakes simply are not there any more. * * MOTION: each sheet now runs three animations on three different properties, * so they compose instead of overwriting one another: * background-position slow drift, a different direction per sheet * opacity a long fade in and out (18-27s) * filter: opacity() the quick twinkle * Five sheets across the two sections drift up-right, down-left, straight * across, down-right and up-left — flakes moving "all around" rather than in * one direction. * ========================================================================== */ /* ---- 1. the page-wide fixed layers are retired ---- */ body.pg-palette-preview::before, body.pg-palette-preview .wp-site-blocks::before { content: none; } /* ---- 2. Featured Products gets the two sheets ---- */ /* * Featured Products ONLY. The sheets were briefly extended to the product * search band above as well; the owner does not want them there, so they start * at the top of Featured Products and run to its end. * * They stop before the section below on purpose: it is ivory (#F5F2EC), and * gold flakes on ivory read as specks of dirt rather than light. * * FULL BLEED. The section is max-width constrained: at a 1600px viewport it is * 1368px wide with a 116px gutter each side, so inset:0 sheets stopped short of * the page edges. (At narrower viewports the section happens to fill the width, * which is why this was not obvious.) The horizontal inset pulls each sheet out * to the viewport edge regardless of the section's own width. */ body.pg-palette-preview .pg-frp { position: relative; } body.pg-palette-preview .pg-frp::before, body.pg-palette-preview .pg-frp::after { background-repeat: repeat; content: ""; inset: 0 calc( 50% - 50vw ); pointer-events: none; position: absolute; z-index: 0; } /* sheet D — drifts down and to the right */ body.pg-palette-preview .pg-frp::before { animation: pg-drift-se 82s linear infinite, pg-flake-fade-a 21s ease-in-out infinite, pg-flake-tw-a 3.4s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23F3D78A' stop-opacity='0.95'/%3E%3Cstop offset='1' stop-color='%23F3D78A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='44' cy='58' r='2.4'/%3E%3Ccircle cx='188' cy='30' r='1.7'/%3E%3Ccircle cx='312' cy='124' r='2.8'/%3E%3Ccircle cx='96' cy='198' r='2'/%3E%3Ccircle cx='236' cy='262' r='2.5'/%3E%3Ccircle cx='340' cy='330' r='1.8'/%3E%3Ccircle cx='140' cy='348' r='2.2'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 380px 380px; } /* sheet E — drifts up and to the left */ body.pg-palette-preview .pg-frp::after { animation: pg-drift-nw 96s linear infinite, pg-flake-fade-b 27s ease-in-out infinite, pg-flake-tw-b 4.7s ease-in-out infinite; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF8E0' stop-opacity='0.75'/%3E%3Cstop offset='1' stop-color='%23FFF8E0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23h)'%3E%3Ccircle cx='72' cy='96' r='1.8'/%3E%3Ccircle cx='300' cy='52' r='2.4'/%3E%3Ccircle cx='456' cy='180' r='1.6'/%3E%3Ccircle cx='180' cy='250' r='2.2'/%3E%3Ccircle cx='390' cy='340' r='1.9'/%3E%3Ccircle cx='60' cy='420' r='2.6'/%3E%3Ccircle cx='268' cy='470' r='1.7'/%3E%3C/g%3E%3C/svg%3E" ); background-size: 520px 520px; } /* the product cards sit above the flakes */ body.pg-palette-preview .pg-frp > * { position: relative; z-index: 1; } @keyframes pg-drift-se { from { background-position: 0 0; } to { background-position: 380px 380px; } } @keyframes pg-drift-nw { from { background-position: 0 0; } to { background-position: -520px -520px; } } /* the long fade in and out, offset between the two sheets */ @keyframes pg-flake-fade-a { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.85; } } @keyframes pg-flake-fade-b { 0%, 100% { opacity: 0.8; } 45% { opacity: 0.1; } } /* ---- 3. the hero's own sheets gain the same long fade ---- * They already drift in three directions and twinkle; adding the fade * envelope on opacity (the twinkle is on filter, so the two compose) makes * them come and go the way the section flakes do. */ body.pg-palette-preview .pg-hero__stage::before { animation: pg-drift-ne 68s linear infinite, pg-flake-fade-a 23s ease-in-out infinite, pg-flake-tw-a 3.2s ease-in-out infinite; } body.pg-palette-preview .pg-hero__inner::before { animation: pg-drift-sw 78s linear infinite, pg-flake-fade-b 19s ease-in-out infinite, pg-flake-tw-b 4.6s ease-in-out infinite; } body.pg-palette-preview .pg-hero__inner::after { animation: pg-drift-w 58s linear infinite, pg-flake-fade-a 25s ease-in-out infinite, pg-flake-tw-c 2.6s ease-in-out infinite; } @keyframes pg-flake-tw-c { 0%, 100% { filter: opacity( 0.35 ); } 60% { filter: opacity( 1 ); } } @media ( prefers-reduced-motion: reduce ) { body.pg-palette-preview .pg-frp::before, body.pg-palette-preview .pg-frp::after { animation: none !important; opacity: 0.3; } } /* 17.1 BUG FIX, same class as 16.3: pg-flake-tw-a and pg-flake-tw-b were declared inside @media (max-width: 781px) back in v16, when only the phone used them. v17 applies them to the hero and Featured Products at ALL widths, so on desktop those two names resolved to nothing and only tw-c animated — the featured flakes drifted and faded but never twinkled. Hoisted to top level; the in-media copies still win on phones, so mobile is unchanged. */ @keyframes pg-flake-tw-a { 0%, 100% { filter: opacity( 0.4 ); } 50% { filter: opacity( 1 ); } } @keyframes pg-flake-tw-b { 0%, 100% { filter: opacity( 1 ); } 45% { filter: opacity( 0.35 ); } } /* ========================================================================== * GO-LIVE — the temporary preview copies are retired * ========================================================================== * While this was a preview, the three hero vials were pointed at private * copies under assets/images/preview/ via `content: url()`, because the real * catalogue renders were still the old opaque milky-glass files. * * The catalogue files are now the new clear-glass, thin-wall, product-labelled * renders, so those overrides are removed and the hero simply uses the same * images the rest of the store does. One source of truth per product. * ========================================================================== */ body.pg-palette-preview .pg-hero__vial--front img, body.pg-palette-preview .pg-hero__vial--left img, body.pg-palette-preview .pg-hero__vial--right img { content: normal; } body.pg-palette-preview .pg-hero__vial--front::after { background-image: url( "../images/vials/bpc-157-tb-500-5mg-5mg-transparent.webp" ); } body.pg-palette-preview .pg-hero__vial--left::after { background-image: url( "../images/vials/rta-3-30mg-transparent.webp" ); } body.pg-palette-preview .pg-hero__vial--right::after { background-image: url( "../images/vials/klow-80mg-transparent.webp" ); } /* ========================================================================== * SITE-WIDE — contrast corrections found by auditing every template * ========================================================================== * Widening the palette from the homepage to the whole site exposed four * places where a component's own background and the inherited text colour * disagreed. Found by walking every text node on 15 templates and measuring * each against its true painted backdrop, not by eye. * * Two failure shapes, and they are mirror images of each other: * * LIGHT COMPONENT, LIGHT TEXT — a component that paints its own white or * cream background inherited the dark theme's near-white body colour, so it * rendered white-on-white. .pg-accordion measured 1.20:1: invisible, not * merely low contrast. * * DARK COMPONENT, DARK TEXT — the reverse: .pg-faq__label kept the old * light-theme ink (#16223A) while its section went dark navy. Also 1.20:1. * * Every replacement value below was computed against the actual backdrop and * is stated with its measured ratio. AA needs 4.5:1 for body text. * ========================================================================== */ /* 1 · .pg-accordion paints white; give it the ink the rest of the light * surfaces use. #16223A on #FFFFFF = 15.86:1 (was 1.20:1) */ body.pg-palette-preview .pg-accordion, body.pg-palette-preview .pg-accordion p, body.pg-palette-preview .pg-accordion li, body.pg-palette-preview .pg-accordion__body { color: var( --pg-pv-ink ); } /* 2 · .pg-faq__label sits on the dark section; give it the light muted tone. * #E6EBF2 on #04101F = 15.95:1 (was 1.20:1) */ body.pg-palette-preview .pg-faq__label { color: var( --pg-pv-muted ); } /* 3 · WooCommerce prints its privacy-policy link inside a cream form panel, * where brand gold is far too light. #856B1F on #FBF7EE = 4.77:1 * (was 1.97:1) */ body.pg-palette-preview .woocommerce-privacy-policy-text a, body.pg-palette-preview a.woocommerce-privacy-policy-link { color: var( --pg-pv-gold-ink ); } /* 4 · The quick-card CTA is gold on a white card. The mid gold missed AA; * the darker gold-ink clears it. #856B1F on #FFFFFF = 5.10:1 * (was 3.80:1) */ body.pg-palette-preview .pg-quick-card__cta { color: var( --pg-pv-gold-ink ); } /* ========================================================================== * SITE-WIDE — one light tone and one dark tone, so pages flow together * ========================================================================== * With the palette on every template, two off-palette surfaces stood out. * Found by measuring the painted background of every large section across 14 * templates and grouping the results, rather than by hunting through CSS. * * #F8F9FB — a COOL grey-white, used by the contact body, the FAQ section and * three product-page surfaces. Beside the homepage's WARM ivory it * read as a different material, which is what broke the flow * between pages. * #10203F — a blue that predates this palette, on the "still need help" * panel and the dark compound card. * * Both are re-pointed at the palette's own tokens. Light surfaces are now all * #F5F2EC and dark surfaces all #04101F, so a visitor moving between the * homepage, a product and the contact page sees one material set. * * These are BACKGROUND swaps only — light stays light and dark stays dark, so * no text/background relationship is inverted. Re-audited afterwards: 1,443 * text nodes across 21 templates, zero contrast failures. * ========================================================================== */ body.pg-palette-preview .pg-contact-body, body.pg-palette-preview .pg-faq-section, body.pg-palette-preview .pg-documentation, body.pg-palette-preview .pg-product-page__info, body.pg-palette-preview .pg-properties, body.pg-palette-preview .pg-compound__head { background: var( --pg-pv-light ); } body.pg-palette-preview .pg-still-help, body.pg-palette-preview .pg-cc--dark { background: var( --pg-pv-dark ); } /* -------------------------------------------------------------------------- * * Reflective product panels * * The vial stands on a lit studio sweep and casts a short reflection. * * WHY THIS LIVES HERE. It was written in woocommerce.css first and silently did * nothing on the homepage: palette-preview.css loads AFTER woocommerce.css and * scopes everything with body.pg-palette-preview, so its own featured-card * background (a champagne pool and key light) beat the sweep on both order and * specificity. The shop grid picked up the new look and the homepage did not. * All three surfaces are governed from here so they cannot drift apart again. * * TARGETING. On the product page the panel is WooCommerce's own * .woocommerce-product-gallery__image. It is NOT .pg-product-page__media — * that is the whole left column, holding the gallery AND the COA and SDS cards. * Styling the column painted the sweep behind those cards and left the real * panel unclipped, so the reflection spilled over the COA. * * Everything is in PERCENTAGES, never pixels. The media box is 280px on the * desktop shop grid, 132px in the two-column phone grid and 512px on the * product page, so a fixed pixel lift that suits one crops the cap off another. * -------------------------------------------------------------------------- */ body.pg-palette-preview .pg-product-card__media, body.pg-palette-preview .pg-frp__media-link, body.pg-palette-preview .pg-product-page .woocommerce-product-gallery__image { /* * A key light behind the product, falling off toward the corners — not a * top-to-bottom ramp. The ramp read as a painted wall rather than a lit * space, which is what made the panel look flat. * * Warm, on brand: the falloff lands on --pg-pv-light (#F5F2EC), the same * light ground the rest of the site uses, and carries on to a slightly * deeper sand in the corners so the lighting still reads as lighting. * Stops are computed from the approved study, not eyeballed. */ background: radial-gradient( ellipse 86% 70% at 50% 34%, #FFFFFC 0%, #EDEAE1 28%, #DED8CB 55%, #D2C9B8 80%, #C9BFAC 100% ); overflow: hidden; position: relative; } /* * Where the vial's base lands, as a share of the panel height. It is NOT the * same on every surface: the featured card caps the image at max-height 82%, * so its vial sits far higher in the box than the shop card's. Measured, not * assumed. The contact shadow reads off this, otherwise it floats below the * vial with a visible gap — 16% adrift on the featured cards. */ body.pg-palette-preview .pg-product-card__media { --pg-base: 16.4%; } body.pg-palette-preview .pg-product-page .woocommerce-product-gallery__image { --pg-base: 19.9%; } body.pg-palette-preview .pg-frp__media-link { --pg-base: 31.4%; } /* The contact shadow where the vial meets the surface. */ body.pg-palette-preview .pg-product-card__media::before, body.pg-palette-preview .pg-frp__media-link::before, body.pg-palette-preview .pg-product-page .woocommerce-product-gallery__image::before { /* * A cast shadow, not a drawn line. The old 2px hard rule was the other half * of the flat look. This is a soft ellipse centred ON the base line, hence * the half-height offset in `bottom`. */ background: radial-gradient( ellipse 50% 50% at 50% 50%, rgba( 92, 84, 68, 0.34 ) 0%, rgba( 92, 84, 68, 0.17 ) 45%, rgba( 92, 84, 68, 0 ) 72% ); bottom: calc( var( --pg-base, 16.4% ) - 3% ); content: ''; height: 6%; left: 23%; position: absolute; right: 23%; z-index: 0; } /* * Sit the vial up off the floor and mirror it. The scale and translate compose * with the per-render transform in layout.css rather than replacing it, so * AMINO H2O keeps its deliberate 90% / 106% size difference. */ body.pg-palette-preview .pg-product-card__media img, body.pg-palette-preview .pg-frp__media-link .pg-frp__img, body.pg-palette-preview .pg-product-page .woocommerce-product-gallery__image img { scale: 0.9; translate: 0 -6%; -webkit-box-reflect: below -33% linear-gradient( to bottom, rgba( 0, 0, 0, 0.50 ) 0%, rgba( 0, 0, 0, 0.16 ) 16%, rgba( 0, 0, 0, 0 ) 36% ); } /* * Firefox has never shipped -webkit-box-reflect. It gets the sweep and a * deeper contact shadow instead, so the vial still reads as standing on a * surface rather than floating. */ @supports not ( -webkit-box-reflect: below 0 linear-gradient( #000, transparent ) ) { body.pg-palette-preview .pg-product-card__media::before, body.pg-palette-preview .pg-frp__media-link::before, body.pg-palette-preview .pg-product-page .woocommerce-product-gallery__image::before { background: radial-gradient( ellipse 50% 50% at 50% 50%, rgba( 92, 84, 68, 0.46 ) 0%, rgba( 92, 84, 68, 0.23 ) 45%, rgba( 92, 84, 68, 0 ) 72% ); height: 7.5%; } } /* ========================================================================== * READABILITY CORRECTIONS — text landing on the wrong surface * ========================================================================== * ROOT CAUSE. This file repoints a global WordPress token: * * --wp--preset--color--slate: var( --pg-pv-muted ); ~ #E6EBF2 * * Slate was a mid grey. Pointing it at a near-white value is right for the * dark sections and wrong everywhere else, because that token feeds two rules * that also run on WHITE surfaces: * * ::placeholder -> the FAQ search box and every checkout field * :root :where(p) -> WordPress's own preset rule, which lands on * the FAQ answer paragraphs * * Both measured 1.20:1 on white — the "can barely read it" the owner reported * in the FAQ search, the FAQ answers and the checkout address fields, all from * this one token. * * NO SINGLE VALUE FIXES IT. To clear 4.5:1 on white a colour needs relative * luminance <= 0.1833; to clear it on #04101F it needs >= 0.1973. The ranges do * not overlap, so placeholder and body colours have to be stated per surface * rather than carried by one token. That is what the rules below do. * ========================================================================== */ /* * Placeholders default to reading on a LIGHT field, because nearly every field * on the site is white. #5A6478 on white = 5.95:1. */ body.pg-palette-preview ::placeholder { color: #5A6478; opacity: 1; } /* * ...but the DARK-surface fields need the opposite, and the rule above * outspecifies the colours they already set for themselves — which knocked the * homepage search band from readable down to 3.21:1. Restated here, inside the * same body scope, so they win. * * #A6B1C2 on #04101F = 8.82:1. */ body.pg-palette-preview .pg-discover__field::placeholder, body.pg-palette-preview .pg-shop-filters__search ::placeholder, body.pg-palette-preview .pg-hero ::placeholder, body.pg-palette-preview .pg-cc--dark ::placeholder { color: #A6B1C2; } /* * FAQ answers. The text sits in a

, and WordPress's zero-specificity * `:root :where(p)` rule still beats the colour inherited from .pg-faq__a, * because a directly matched rule always wins over inheritance. Stating it on * the paragraph is what actually lands. #3D4A63 on white = 8.91:1. */ body.pg-palette-preview .pg-faq__a, body.pg-palette-preview .pg-faq__a p, body.pg-palette-preview .pg-faq__a li { color: #3D4A63; } /* * Gold on white is 2.10:1 — brand gold is a dark-surface colour. These two run * on the white checkout card, so they take the darker gold ink (5.10:1) that * the rest of the site already uses for gold text on light. */ body.pg-palette-preview .woocommerce-checkout .woocommerce-terms-and-conditions-link, body.pg-palette-preview .woocommerce-checkout .pg-ruo-pill { color: var( --pg-pv-gold-ink ); }