/** * Peptogenesis V2 — homepage sections. Front page only. */ /* ================================================================= hero */ .pg-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--pg-navy-950); } .pg-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* atmospheric backdrop plate: spotlight haze, gold dust, faint hex lattice; a slow cinematic push */ .pg-hero__plate { position: absolute; inset: -4%; will-change: transform; } .pg-hero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; display: block; opacity: .92; animation: pg-push 48s ease-in-out infinite alternate; transform-origin: 60% 65%; } @media (min-width: 1024px) { .pg-hero__plate { left: 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); } .pg-hero__plate img { object-position: 19% 58%; } } @media (max-width: 1023px) { .pg-hero__plate { inset: auto; top: 0; left: -6%; right: -6%; height: min(118vw, 470px); -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 92%); mask-image: linear-gradient(180deg, #000 50%, transparent 92%); } .pg-hero__plate img { object-position: 50% 82%; opacity: .88; } .pg-hero__light--gold { display: none; } } @keyframes pg-push { from { transform: scale(1); } to { transform: scale(1.07); } } .pg-hero__light { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; mix-blend-mode: screen; } .pg-hero__light--blue { width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; right: -12vw; top: -22vw; background: radial-gradient(circle, rgba(79,123,217,.26) 0%, rgba(33,58,106,.16) 38%, transparent 68%); animation: pg-drift-a 46s ease-in-out infinite alternate; } .pg-hero__light--gold { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: 4vw; bottom: -18vw; background: radial-gradient(circle, rgba(212,175,55,.20) 0%, rgba(212,175,55,.07) 40%, transparent 68%); } /* still since 6.7.3: no gold movement behind the scene (owner: restrained champagne light, no streaks) */ .pg-hero__lattice { position: absolute; inset: 0; opacity: .45; background-image: url("data:image/svg+xml;utf8,"); background-size: 120px 104px; -webkit-mask-image: radial-gradient(60% 70% at 78% 40%, #000 0%, transparent 100%); mask-image: radial-gradient(60% 70% at 78% 40%, #000 0%, transparent 100%); } .pg-hero__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(3,7,20,.75) 100%), linear-gradient(180deg, rgba(3,7,20,.35) 0%, transparent 18%, transparent 84%, var(--pg-navy-950) 100%); } @keyframes pg-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(-6%, 8%) scale(1.08); } } .pg-hero__inner { max-width: calc(var(--pg-container-wide) + var(--pg-gutter) * 2); margin-inline: auto; padding: var(--pg-s-8) var(--pg-gutter) var(--pg-s-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pg-s-8); align-items: center; } .pg-hero__copy, .pg-hero__stage { min-width: 0; } @media (min-width: 1024px) { .pg-hero__inner { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--pg-s-10); min-height: min(calc(100vh - var(--pg-header-h)), 880px); padding-block: var(--pg-s-10) var(--pg-s-8); } } @media (min-width: 1280px) { .pg-hero__inner { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); } } .pg-hero__copy { position: relative; z-index: 2; } .pg-eyebrow__sep { margin: 0 .35em; opacity: .5; } .pg-hero__title { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem); line-height: .98; margin-bottom: var(--pg-s-5); max-width: 14ch; } .pg-hero__accent { color: var(--pg-gold-400); } .pg-hero__lead { font-size: var(--pg-fs-lead); line-height: var(--pg-lh-relaxed); color: var(--pg-text-mid); max-width: 52ch; margin-bottom: var(--pg-s-6); } .pg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--pg-s-3); margin-bottom: var(--pg-s-6); } .pg-hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pg-s-2); } .pg-hero__quick-label { flex-basis: 100%; font-family: var(--pg-font-mono); font-size: var(--pg-fs-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--pg-text-mid); } .pg-hero .pg-eyebrow { flex-wrap: wrap; row-gap: 2px; } .pg-eyebrow__item { white-space: nowrap; } @media (min-width: 1024px) { .pg-hero__quick .pg-chip { padding-inline: .8rem; font-size: 13px; } } .pg-hero__proof-item span { color: var(--pg-text-mid); } /* ---- stage: spotlight, pedestal, vials on the disc, dust ------------------ */ .pg-hero__stage { position: relative; height: clamp(360px, 94vw, 420px); z-index: 1; } @media (min-width: 1024px) { .pg-hero__stage { height: clamp(600px, 66vh, 760px); translate: 0 36px; } } /* volumetric cone from the top centre, breathing slowly */ .pg-hero__spot { position: absolute; left: 50%; top: -6%; width: 78%; height: 112%; transform: translateX(-50%); pointer-events: none; opacity: .85; background: linear-gradient(180deg, rgba(232,214,160,.16) 0%, rgba(232,214,160,.07) 30%, rgba(200,214,255,.04) 60%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%), radial-gradient(50% 100% at 50% 100%, #000 40%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%), radial-gradient(50% 100% at 50% 100%, #000 40%, transparent 100%); mask-composite: intersect; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(14px); animation: pg-breathe 19s ease-in-out infinite; } @keyframes pg-breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } } /* vials standing on the disc: lead at the front centre, two set back on the surface, each with a contact shadow */ .pg-hero__vial { position: absolute; left: 50%; transform: translateX(-50%); will-change: transform; } .pg-hero__vial::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 1.2%; height: 5%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 55%, transparent 75%); filter: blur(3px); z-index: -1; } .pg-hero__vial--lead { z-index: 3; height: 60%; bottom: 31%; } .pg-hero__vial--back-left { z-index: 1; height: 44%; left: 26%; bottom: 33%; opacity: .86; filter: blur(.6px) brightness(.84) saturate(.95); } .pg-hero__vial--back-right { z-index: 1; height: 42%; left: 74%; bottom: 33%; opacity: .82; filter: blur(.8px) brightness(.8) saturate(.95); } @media (min-width: 1024px) { .pg-hero__vial--lead { height: 70%; bottom: 21%; } .pg-hero__vial--back-left { left: 31%; bottom: 22.5%; height: 58%; } .pg-hero__vial--back-right { left: 69%; bottom: 22.5%; height: 54%; } } .pg-hero__float { position: relative; height: 100%; animation: pg-float 9s ease-in-out infinite; } .pg-hero__img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); } .pg-hero__img--lead { filter: drop-shadow(0 30px 38px rgba(0,0,0,.7)) drop-shadow(0 0 70px rgba(212,175,55,.14)); } @keyframes pg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* reflection on the glossy disc: the base end of the flipped image, fading away from the contact line */ .pg-hero__reflection { position: absolute; top: calc(100% - 5.2%); left: 0; right: 0; height: 100%; transform: scaleY(-1); opacity: .34; clip-path: inset(62% 0 0 0); -webkit-mask-image: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55) 82%, #000 100%); mask-image: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55) 82%, #000 100%); pointer-events: none; filter: blur(1.2px); } .pg-hero__reflection .pg-hero__img { filter: none; height: 100%; margin-inline: auto; } /* a scene with its own wide backdrop keeps it behind the whole hero, dark under the copy */ .pg-hero__plate--scene img { opacity: 1; object-position: 60% 50%; } @media (min-width: 1024px) { .pg-hero__plate--scene { left: 0; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.7) 34%, #000 60%, #000 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.7) 34%, #000 60%, #000 100%); } .pg-hero__plate--scene img { object-position: 68% 50%; } } @media (max-width: 1023px) { .pg-hero__plate--scene { height: min(150vw, 700px); -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 95%); mask-image: linear-gradient(180deg, #000 45%, transparent 95%); } .pg-hero__plate--scene img { object-position: 62% 60%; } } .pg-hero--scene .pg-hero__spot { opacity: .45; } .pg-hero--scene .pg-hero__stage { height: auto; aspect-ratio: 4 / 5; translate: 0 0; } @media (min-width: 1024px) { .pg-hero--scene .pg-hero__stage { aspect-ratio: 1 / 1; translate: 0 24px; } } .pg-hero__scene { position: absolute; inset: -5% -9%; } .pg-hero__scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; -webkit-mask-image: radial-gradient(74% 70% at 50% 58%, #000 50%, transparent 100%); mask-image: radial-gradient(74% 70% at 50% 58%, #000 50%, transparent 100%); animation: pg-push 48s ease-in-out infinite alternate; transform-origin: 50% 70%; } /* --surface: the plate's standing surface as a distance from the stage bottom; vials sit on it (PNG bottom pad allowed for) */ .pg-hero--scene { --surface: 28%; } .pg-hero--scene .pg-hero__vial--lead { height: 58%; bottom: calc(var(--surface) - 1.5%); } .pg-hero--scene .pg-hero__vial--back-left { left: 34%; height: 43%; bottom: calc(var(--surface) + 1.6%); } .pg-hero--scene .pg-hero__vial--back-right { left: 66%; height: 41%; bottom: calc(var(--surface) + 1.8%); } .pg-hero--scene .pg-hero__reflection { opacity: .3; } @media (max-width: 1023px) { .pg-hero--scene .pg-hero__vial--lead { height: 58%; } .pg-hero--scene .pg-hero__vial--back-left { left: 27%; height: 43%; } .pg-hero--scene .pg-hero__vial--back-right { left: 73%; height: 41%; } .pg-hero--scene .pg-hero__stage { display: flex; flex-direction: column; justify-content: flex-end; } } /* ---- marble scene, final direction: vials still, no dust, environment-only motion ----------------- */ .pg-hero--still .pg-hero__float, .pg-hero--still .pg-hero__scene img, .pg-hero--still .pg-hero__plate--scene img { animation: none; } .pg-hero--still .pg-hero__vial--back-left, .pg-hero--still .pg-hero__vial--back-right { opacity: 1; filter: brightness(.93) saturate(.98); } .pg-hero--still .pg-hero__spot { opacity: .28; } /* subtle atmosphere: a warm haze that drifts very slowly over the scene (screen blend) */ .pg-hero__haze { position: absolute; inset: -20% -30%; pointer-events: none; mix-blend-mode: screen; opacity: .55; background: radial-gradient(38% 34% at 62% 38%, rgba(236,206,140,.16) 0%, rgba(236,206,140,.05) 45%, transparent 70%), radial-gradient(30% 40% at 30% 70%, rgba(120,150,230,.10) 0%, transparent 70%); animation: pg-haze 52s ease-in-out infinite alternate; } @keyframes pg-haze { from { transform: translate(-1.5%, 1%) scale(1); opacity: .45; } to { transform: translate(1.5%, -1%) scale(1.06); opacity: .65; } } @media (prefers-reduced-motion: reduce) { .pg-hero__haze { animation: none; } } /* ---- campaign scene: ONE plate (2560x1267, from the mockup) carries the whole environment: marble walls, fluted gold panels, the wide low drum, glassware, haze. .pg-hero__set is the plate box: as tall as the stage (taller on desktop, so it also covers the hero's padding), 16:9 from that height, shifted so the drum's centre (63.44% of the plate) lands where the mockup puts it. Everything inside is placed in plate percentages, so the vials stand on the drum at every viewport. Plate geometry: drum centre x 63.44%, drum width 39.39%; top-face back edge 60.26%, centre 61.97%, front edge 63.68%; base bottom 75.66%. Vial PNG: bottom pad 2.63% of the box. */ .pg-hero--scene-campaign .pg-hero__stage { overflow: visible; } .pg-hero__set { position: absolute; top: -4%; height: 100%; aspect-ratio: 3072 / 1520; left: 50%; transform: translateX(-64.99%); } @media (min-width: 1024px) { .pg-hero__set { top: -14%; height: 123%; left: 44%; } } /* narrow desktops: the copy column is tall, so give the stage a 3:4 box and centre the drum in it */ @media (min-width: 1024px) and (max-width: 1279px) { .pg-hero--scene-campaign .pg-hero__stage { aspect-ratio: 3 / 4; } .pg-hero__set { top: -9%; height: 112%; left: 50%; } } /* tablets: a shorter stage so the copy stays near the fold */ @media (min-width: 600px) and (max-width: 1023px) { .pg-hero--scene-campaign .pg-hero__stage { aspect-ratio: 16 / 11; } } .pg-hero--scene-campaign .pg-hero__scene { inset: 0; } .pg-hero--scene-campaign .pg-hero__scene img { object-fit: fill; object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 87%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 87%, transparent 100%); mask-composite: intersect; } /* legibility: the copy column sits over the plate's dark left wall; deepen it a little there (desktop only) */ @media (min-width: 1024px) { .pg-hero__set::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,7,20,.55) 0%, rgba(3,7,20,.34) 22%, transparent 44%), linear-gradient(0deg, rgba(3,7,20,.82) 0%, rgba(3,7,20,.45) 8%, transparent 17%); } } /* the same plate, blurred and darkened, fills whatever the plate box does not reach (wide viewports, the proof strip) */ .pg-hero--scene-campaign .pg-hero__plate--scene img { filter: blur(16px) brightness(.5) saturate(1.05); transform: scale(1.08); } @media (min-width: 1024px) { .pg-hero--scene-campaign .pg-hero__plate--scene { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.7) 0%, #000 45%, #000 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.7) 0%, #000 45%, #000 100%); } .pg-hero--scene-campaign .pg-hero__plate--scene img { object-position: 65% 50%; } .pg-hero--scene-campaign .pg-hero__stage { translate: 0 10px; } } @media (max-width: 599px) { .pg-hero--scene-campaign .pg-hero__stage { aspect-ratio: 4 / 5; } } @media (max-width: 1023px) { .pg-hero--scene-campaign .pg-hero__plate--scene img { object-position: 65% 60%; } } /* the vials on the drum's top face: lead at the front, two set back and tucked slightly behind it (mockup ratios: lead 0.61, back 0.48 of the drum width) */ .pg-hero--scene-campaign .pg-hero__vial--lead { left: 64.99%; height: 45.8%; bottom: 32.4%; } .pg-hero--scene-campaign .pg-hero__vial--back-left { left: 54.6%; height: 34.7%; bottom: 32.9%; } .pg-hero--scene-campaign .pg-hero__vial--back-right { left: 75.4%; height: 34.7%; bottom: 32.9%; } .pg-hero--scene-campaign .pg-hero__reflection { opacity: .45; clip-path: inset(92% 0 0 0); -webkit-mask-image: linear-gradient(180deg, transparent 90%, rgba(0,0,0,.6) 96%, #000 100%); mask-image: linear-gradient(180deg, transparent 90%, rgba(0,0,0,.6) 96%, #000 100%); filter: blur(.8px); } .pg-hero--scene-campaign .pg-hero__vial::after { left: 16%; right: 16%; bottom: .6%; height: 6%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 52%, transparent 74%); filter: blur(4px); } .pg-hero--scene-campaign .pg-hero__spot { left: 64.99%; width: 44%; top: -4%; height: 70%; opacity: .1; } /* cool, near-neutral haze for the stone environment: the warm haze belonged to the gold panels */ .pg-hero--scene-campaign .pg-hero__haze { opacity: .45; background: radial-gradient(40% 36% at 30% 30%, rgba(150,180,235,.14) 0%, rgba(150,180,235,.05) 45%, transparent 70%), radial-gradient(34% 40% at 34% 74%, rgba(200,210,230,.09) 0%, transparent 70%); } /* owner: no wall logo in this scene */ /* a very subtle warm back light behind the vial group (screen blend), so the clear glass and the gold pick up a rim without the scene getting brighter */ .pg-hero__rim { position: absolute; left: 64.99%; bottom: 30%; width: 44%; height: 52%; transform: translateX(-50%); pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .9; background: radial-gradient(ellipse 50% 60% at 50% 62%, rgba(236,204,140,.13) 0%, rgba(236,204,140,.05) 45%, transparent 72%); filter: blur(6px); } @media (prefers-reduced-motion: no-preference) { .pg-hero__rim { animation: pg-rim 17s ease-in-out infinite; } } @keyframes pg-rim { 0%, 100% { opacity: .78; } 50% { opacity: 1; } } /* ---- cinematic hero (6.7.2) --------------------------------------------------------------------------------------------- No video. The picture itself never changes: the plate, the pedestal, the gold architecture and the three vial renders are the approved artwork, and after the intro none of them moves. Everything here is built from layers laid over that artwork: ATMOSPHERE two procedural haze textures (tools/hero-plate/smoke.py; each tiles left to right without a seam). A layer is a clipped box holding one child twice the box's width; the child carries the texture as a repeating background and slides by exactly one tile on a linear loop, so the drift never ends and never jumps. Transform and opacity only. .pg-hero__air broad soft masses, behind the vials, across the room .pg-hero__mist sideways-drawn strands low on the floor around the pedestal (inside the pedestal group, so its hole over the pedestal stays aligned while the camera moves) .pg-hero__veil the haze IN FRONT of the vials. Intro only: at rest it is not rendered at all. INTRO a DOLLY, not a zoom (owner, 2026-09-21: "it looks like the entire hero is simply being scaled from a small centered image... I want it to feel like the camera is actually traveling forward through the environment"). The plate is cut along the room's depth into layers (tools/hero-plate/layers.py: the fluted niche = far, the marble walls = near, the floor, a run-up of floor below the plate's edge, the pedestal), each standing at its own distance, and one camera model (tools/hero-plate/dolly.py) moves them all: standing pictures scale about the focus of expansion by Z/(Z+D), the floor converges toward the eye line as a plane does (perspective(100cqh) rotateX scaleY, the exact map), the pedestal group carries the vials and the mist, and the blurred backdrop behind everything moves slowest. Nearer things move more; the floor flows out of the bottom of the frame; the pedestal stays planted on it. Every layer ends on the identity, where the layers reassemble the plate to within a fraction of a level, so they simply fade away over the last 6%: the approved plate is underneath them the whole time, nothing cross-fades, and a layer that fails to arrive leaves the approved plate showing rather than a hole. The vials are opaque from the first frame but unlit (silhouettes in haze) and are lit through thinning smoke near the end; the headline, buttons and proof strip fade in as the camera arrives and never move with it. html.pg-intro is set before first paint by the head script (inc/enqueue.php) on the first homepage view of a visit and HOLDS the opening frame (generated hold rules below). home.js reports when the artwork has decoded, the head script adds html.pg-intro-play once the entry gate is out of the way, and --pg-intro-t later removes both classes; the dolly layers are display: none without html.pg-intro, so their lazy images are never even fetched on views that play no intro. AT REST no camera movement of any kind. What keeps moving: the two haze layers, the soft haze gradient, and the champagne light (the back light behind the vials breathing over 17 s, the gold floor light and the streak). Loops pause while the hero is off screen (home.js sets .is-offscreen). Reduced motion: no intro, no drift, the haze holds still. */ .pg-hero__set { container-type: size; } /* the floor's perspective is written in cqh so its numbers are viewport-independent */ /* the pedestal group: the pedestal's own layer during the intro, the floor fog and the three vials, moved as one. Composited permanently, not only while the intro plays: a promoted box and a painted one snap a half-pixel offset differently, which would put the vials 1 px off during the intro on phones and tick them at the hand-over */ .pg-hero__group { position: absolute; inset: 0; z-index: 1; will-change: transform; } /* The pedestal is nearer than the wall behind it, so early in the move it is smaller than the hole it was cut out of and a ring of the (darkened) fill shows around it. The socket is a soft dark ellipse on the pedestal's own footprint, inside the group so it travels with it, under the pedestal image: it reads as the shadow the pedestal stands in, and it is gone by the time the ring has closed. Intro only. */ .pg-hero__socket { position: absolute; left: 39%; width: 52%; top: 60%; height: 30%; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(3,7,18,.96) 0%, rgba(3,7,18,.9) 46%, rgba(3,7,18,0) 82%); } .pg-hero__air, .pg-hero__mist, .pg-hero__veil { position: absolute; pointer-events: none; overflow: hidden; } .pg-hero__air i, .pg-hero__mist i { position: absolute; top: 0; left: 0; display: block; width: 200%; height: 100%; background-repeat: repeat-x; will-change: transform; } /* the room's air: over the far wall and the flutes, from above the vial caps down to just short of the pedestal's top band, so the near stone and its gold band stay crisp (the far wall may be soft; the foreground may not) */ .pg-hero__air { left: 32%; width: 68%; top: 8%; height: 60%; z-index: 0; opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 88%, transparent 100%); animation: pg-air-breathe 31s ease-in-out infinite; } .pg-hero__air i { background-image: url("../images/hero/haze-billow.webp"); background-size: 50% 100%; animation: pg-air-drift 150s linear infinite; } /* floor fog: on the floor beside, behind and just in front of the pedestal. The second mask is a soft elliptical hole over the pedestal itself (plate x 45.8-84.2%, y 66-85%), so the fog gathers at its base and never lies across its top or its face; the vials stand above this layer in the stack, so it never crosses the glass either */ .pg-hero__mist { left: 28%; width: 72%; top: 60%; height: 38%; z-index: 0; opacity: .42; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%), radial-gradient(ellipse 30% 31% at 51.4% 34%, transparent 0%, transparent 60%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 90%, transparent 100%), radial-gradient(ellipse 30% 31% at 51.4% 34%, transparent 0%, transparent 60%, #000 100%); mask-composite: intersect; animation: pg-mist-breathe 23s ease-in-out infinite; } .pg-hero__mist i { background-image: url("../images/hero/haze-wisp.webp"); background-size: 40% 100%; animation: pg-mist-drift 110s linear infinite; } @keyframes pg-air-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes pg-mist-drift { from { transform: translate3d(-40%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes pg-air-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .37; } } @keyframes pg-mist-breathe { 0%, 100% { opacity: .42; } 50% { opacity: .52; } } /* the veil: dim smoke IN FRONT of the vials, centred on the group and feathered out to nothing on every side. Strands over a softer mass, at under half strength, so at its densest it is a moody blue-grey and never a white cloud; it goes on thinning and drifting across the glass after the vials are lit. At rest the box is visibility: hidden: nothing is rendered. */ .pg-hero__veil { left: 36%; width: 60%; top: 2%; height: 94%; z-index: 4; visibility: hidden; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 54%, #000 30%, rgba(0,0,0,.55) 56%, transparent 78%); mask-image: radial-gradient(ellipse 50% 50% at 50% 54%, #000 30%, rgba(0,0,0,.55) 56%, transparent 78%); } .pg-hero__veil-smoke { position: absolute; display: block; inset: -6% -22%; opacity: 0; background: url("../images/hero/haze-billow.webp") 30% 60% / 66% 92% repeat-x, url("../images/hero/haze-wisp.webp") 76% 70% / 84% 60% repeat-x; } /* gold dust (6.7.3, owner: "a small amount of extremely fine gold dust particles floating slowly through the air... tiny metallic dust catching light, not flakes... mostly visible where they catch the light, behind and around the product, never streaks"). One seamless tile (tools/hero-plate/dust.py, 62 specks a pixel or two across on 2048x1024) in two layers inside the pedestal group, so the dust sits at the product's depth and rides with it: the far layer smaller and slower, drifting up and to the left; the near layer a little larger, drifting down and to the left. Each is a clipped box masked to the lit air around and behind the vials (the vials, above it in the stack, hide what is behind them), so specks brighten as they drift into the light and fade out of it. The child is three boxes wide and tall and slides by exactly one tile on a linear loop; the loops are minutes long. Transform and opacity only. */ /* The hero's own dust box: the shared three-plane component (components.css), but confined to the lit air around and behind the vials and feathered out of it, and inside the pedestal group so the field travels with the product as the camera moves. It is the one place that runs the third, nearest plane. */ .pg-hero__dust { inset: 2% 6% 26% 36%; z-index: 0; --pg-dust-max: 1; --pg-dust-scale: 1.05; -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 58%, #000 0%, #000 30%, rgba(0,0,0,.6) 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 52% at 50% 58%, #000 0%, #000 30%, rgba(0,0,0,.6) 62%, transparent 100%); } /* the dolly layers: the plate's box, clipped and feathered exactly like the plate (so the composite over the blurred backdrop is the same at every edge), holding the far, near and floor pictures at their canvas boxes (generated). The pedestal's layer lives in the group. All of it is display: none unless the intro is on, and its images are lazy: no request on other views. */ .pg-hero__dolly { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 87%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 87%, transparent 100%); mask-composite: intersect; } .pg-hero__dolly img, .pg-hero__dolly-pedestal { position: absolute; display: block; max-width: none; will-change: transform; } html:not(.pg-intro) :is(.pg-hero__dolly, .pg-hero__dolly-pedestal) { display: none; } @supports not (width: 1cqh) { .pg-hero__dolly-floor, .pg-hero__dolly-runup { display: none; } } /* an old engine shows the far layer's own floor instead */ /* the dark hall: a vignette over the plate (clear around the pedestal, the corners in the dark) and the same navy over the hero's backdrop; both lift as the camera arrives. FLIGHT: three sheets of smoke between the camera and the pedestal, each swelling from the pedestal outward past the lens. The pivot custom properties are the pedestal's place in the STAGE at each breakpoint. */ .pg-hero__dark, .pg-hero__iris, .pg-hero__flight { position: absolute; pointer-events: none; visibility: hidden; } .pg-hero__dark { inset: 0; background: var(--pg-navy-950); opacity: 0; } .pg-hero__iris { inset: 0; z-index: 5; opacity: 0; background: radial-gradient(ellipse 44% 54% at 64.99% 56%, rgba(4,9,26,0) 0%, rgba(4,9,26,0) 26%, rgba(4,9,26,.5) 58%, rgba(4,9,26,.86) 100%); } .pg-hero__stage { --pg-pivot-x: 50%; --pg-pivot-y: 66%; } @media (min-width: 1024px) { .pg-hero__stage { --pg-pivot-x: 50%; --pg-pivot-y: 69.4%; } } @media (min-width: 1280px) { .pg-hero__stage { --pg-pivot-x: 44%; --pg-pivot-y: 72.1%; } } @media (max-width: 599px) { .pg-hero__stage { --pg-pivot-x: 50%; --pg-pivot-y: calc(89.4vw - 10px); } } .pg-hero__flight { inset: 0; z-index: 1; } .pg-hero__flight i { position: absolute; display: block; left: var(--pg-pivot-x); top: var(--pg-pivot-y); width: 150%; aspect-ratio: 2 / 1; margin: -37.5% 0 0 -75%; opacity: 0; background: url("../images/hero/haze-billow.webp") 20% 50% / 100% 100% no-repeat; /* a ring, thin at its centre: the way to the pedestal stays open while the smoke swells outward past the frame */ -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.3) 14%, #000 40%, transparent 72%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.3) 14%, #000 40%, transparent 72%); } .pg-hero__flight i:nth-child(2) { background-image: url("../images/hero/haze-wisp.webp"); background-position: 70% 50%; rotate: 180deg; } .pg-hero__flight i:nth-child(3) { background-position: 85% 50%; rotate: -6deg; } @media (max-width: 599px) { /* phones: the stage shows only the plate's 45-85% band, so the layers are cut to that band (smaller textures to composite), and they fade into the page where the plate does */ .pg-hero__air { left: 42%; width: 46%; } .pg-hero__mist { left: 42%; width: 46%; opacity: .36; } .pg-hero__air { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } .pg-hero__mist { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, #000 40%, transparent 92%), radial-gradient(ellipse 46% 31% at 50% 34%, transparent 0%, transparent 60%, #000 100%); -webkit-mask-composite: source-in, source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, #000 40%, transparent 92%), radial-gradient(ellipse 46% 31% at 50% 34%, transparent 0%, transparent 60%, #000 100%); mask-composite: intersect, intersect; } .pg-hero__air i { background-size: 50% 100%; animation-name: pg-air-drift-s; animation-duration: 120s; } .pg-hero__mist i { background-size: 50% 100%; animation-name: pg-mist-drift-s; animation-duration: 90s; } @keyframes pg-mist-breathe { 0%, 100% { opacity: .36; } 50% { opacity: .46; } } } @keyframes pg-air-drift-s { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes pg-mist-drift-s { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* the intro. HOLD (html.pg-intro): the opening frame, waiting for the artwork (the camera positions are generated, below). PLAY (html.pg-intro-play): --pg-intro-t, once. Percentages of 3 s: the dolly runs the whole time (eased in the samples); smoke sheets pass the lens 0-84%; the dark lifts 10-70%; the veil in front of the vials thickens to 46% and is gone by 100%; the vials are lit 44-94%; the copy arrives 60-100%; the real plate cross-fades in 92-100%. */ html.pg-intro { --pg-intro-t: 3s; } html.pg-intro .pg-hero__vial { filter: brightness(.025) saturate(.5); } html.pg-intro .pg-hero__socket { opacity: 1; } html.pg-intro :is(.pg-hero__veil, .pg-hero__dark, .pg-hero__iris, .pg-hero__flight) { visibility: visible; } html.pg-intro .pg-hero__dark { opacity: .8; } html.pg-intro .pg-hero__iris { opacity: 1; } html.pg-intro .pg-hero__veil-smoke { opacity: .36; } html.pg-intro .pg-hero__air { opacity: .5; animation: none; } html.pg-intro .pg-hero__mist { opacity: .66; animation: none; } html.pg-intro .pg-hero__rim { opacity: .1; animation: none; } html.pg-intro :is(.pg-hero__haze, .pg-hero__spot, .pg-hero__dust) { opacity: 0; animation: none; } html.pg-intro :is(.pg-hero__copy, .pg-hero__proof) { opacity: 0; } html.pg-intro-play .pg-hero__group { animation: pg-dolly-ped var(--pg-intro-t) linear both; } html.pg-intro-play .pg-hero__dolly-near { animation: pg-dolly-near var(--pg-intro-t) linear both; } html.pg-intro-play .pg-hero__dolly-far { animation: pg-dolly-far var(--pg-intro-t) linear both; } html.pg-intro-play :is(.pg-hero__dolly-floor, .pg-hero__dolly-runup) { animation: pg-dolly-floor var(--pg-intro-t) linear both; } html.pg-intro-play .pg-hero__plate--scene img { animation: pg-dolly-bg var(--pg-intro-t) linear both; } @media (max-width: 599px) { html.pg-intro-play .pg-hero__group { animation-name: pg-dolly-ped-p; } html.pg-intro-play .pg-hero__dolly-near { animation-name: pg-dolly-near-p; } html.pg-intro-play .pg-hero__dolly-far { animation-name: pg-dolly-far-p; } html.pg-intro-play :is(.pg-hero__dolly-floor, .pg-hero__dolly-runup) { animation-name: pg-dolly-floor-p; } html.pg-intro-play .pg-hero__plate--scene img { animation-name: pg-dolly-bg-p; } } html.pg-intro-play :is(.pg-hero__dolly, .pg-hero__dolly-pedestal) { animation: pg-intro-cut var(--pg-intro-t) linear both; } html.pg-intro-play .pg-hero__dark { animation: pg-intro-dark var(--pg-intro-t) cubic-bezier(.4, 0, .5, 1) both; } html.pg-intro-play .pg-hero__iris { animation: pg-intro-iris var(--pg-intro-t) cubic-bezier(.4, 0, .5, 1) both; } html.pg-intro-play .pg-hero__flight i { animation: pg-intro-fly calc(var(--pg-intro-t) * .56) cubic-bezier(.45, .05, .75, .6) both; will-change: transform, opacity; } html.pg-intro-play .pg-hero__flight i:nth-child(2) { animation-delay: calc(var(--pg-intro-t) * .17); } html.pg-intro-play .pg-hero__flight i:nth-child(3) { animation-delay: calc(var(--pg-intro-t) * .34); } html.pg-intro-play .pg-hero__socket { animation: pg-intro-socket var(--pg-intro-t) cubic-bezier(.4, 0, .5, 1) both; } html.pg-intro-play .pg-hero__vial { animation: pg-intro-light-back var(--pg-intro-t) cubic-bezier(.45, 0, .3, 1) both; } html.pg-intro-play .pg-hero__vial--lead { animation-name: pg-intro-light; } html.pg-intro-play .pg-hero__veil-smoke { animation: pg-intro-smoke var(--pg-intro-t) linear both, pg-intro-smoke-drift var(--pg-intro-t) cubic-bezier(.3, .1, .4, 1) both; will-change: transform, opacity; } html.pg-intro-play .pg-hero__air { animation: pg-intro-air var(--pg-intro-t) cubic-bezier(.4, 0, .3, 1) both; } html.pg-intro-play .pg-hero__mist { animation: pg-intro-mist var(--pg-intro-t) cubic-bezier(.4, 0, .3, 1) both; } html.pg-intro-play .pg-hero__rim { animation: pg-intro-rim var(--pg-intro-t) cubic-bezier(.4, 0, .3, 1) both; } html.pg-intro-play .pg-hero__haze { animation: pg-intro-haze var(--pg-intro-t) cubic-bezier(.4, 0, .4, 1) both; } html.pg-intro-play .pg-hero__spot { animation: pg-intro-spot var(--pg-intro-t) cubic-bezier(.4, 0, .4, 1) both; } html.pg-intro-play .pg-hero__dust { animation: pg-intro-dust var(--pg-intro-t) cubic-bezier(.4, 0, .4, 1) both; } html.pg-intro-play :is(.pg-hero__copy, .pg-hero__proof) { animation: pg-intro-copy var(--pg-intro-t) cubic-bezier(.4, 0, .2, 1) both; } @keyframes pg-intro-cut { 0%, 94% { opacity: 1; } 100% { opacity: 0; } } @keyframes pg-intro-socket { 0%, 30% { opacity: 1; } 88%, 100% { opacity: 0; } } @keyframes pg-intro-dark { 0%, 10% { opacity: .8; } 70%, 100% { opacity: 0; } } @keyframes pg-intro-iris { 0%, 8% { opacity: 1; } 66%, 100% { opacity: 0; } } @keyframes pg-intro-fly { 0% { opacity: 0; transform: scale(.66); } 30% { opacity: .26; } 66% { opacity: .2; } 100% { opacity: 0; transform: scale(2.9); } } @keyframes pg-intro-light { 0%, 44% { filter: brightness(.025) saturate(.5); } 94%, 100% { filter: brightness(1) saturate(1); } } @keyframes pg-intro-light-back { 0%, 47% { filter: brightness(.025) saturate(.5); } 96%, 100% { filter: brightness(.93) saturate(.98); } } @keyframes pg-intro-smoke { 0% { opacity: .36; } 46% { opacity: .62; } 100% { opacity: 0; } } @keyframes pg-intro-smoke-drift { from { transform: translate3d(6%, 2%, 0) scale(1); } to { transform: translate3d(-8%, -3%, 0) scale(1.14); } } @keyframes pg-intro-air { 0%, 30% { opacity: .5; } 100% { opacity: .3; } } @keyframes pg-intro-mist { 0%, 30% { opacity: .66; } 100% { opacity: .42; } } @keyframes pg-intro-rim { 0%, 44% { opacity: .1; } 100% { opacity: .78; } } @keyframes pg-intro-haze { 0%, 50% { opacity: 0; transform: translate(-1.5%, 1%) scale(1); } 100% { opacity: .45; transform: translate(-1.5%, 1%) scale(1); } } /* ends on pg-haze's first keyframe */ @keyframes pg-intro-spot { 0%, 50% { opacity: 0; } 100% { opacity: .8; } } /* ends on pg-breathe's first keyframe */ @keyframes pg-intro-copy { 0%, 60% { opacity: 0; } 100% { opacity: 1; } } @keyframes pg-intro-dust { 0%, 62% { opacity: 0; } 100% { opacity: 1; } } /* the box fades in; the planes inside keep their own weights */ @media (max-width: 599px) { @keyframes pg-intro-mist { 0%, 30% { opacity: .66; } 100% { opacity: .36; } } } /* at rest the cool key light holds still: what is left moving is haze and champagne light */ .pg-hero--scene-campaign .pg-hero__light--blue { animation: none; } /* off screen: every loop waits (the intro is never paused) */ html:not(.pg-intro-play) .pg-hero.is-offscreen :is(.pg-hero__air, .pg-hero__mist, .pg-hero__air i, .pg-hero__mist i, .pg-hero__haze, .pg-hero__rim, .pg-hero__spot, .pg-hero__light) { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pg-hero__air, .pg-hero__mist, .pg-hero__air i, .pg-hero__mist i { animation: none; } } /* @dolly-begin GENERATED by tools/hero-plate/dolly.py from one camera model: do not edit by hand, rerun the script. */ /* layer boxes: each image covers its canvas (plate fractions of the set); every transform pivots on the focus of expansion */ .pg-hero__dolly-far { left: -22%; top: -18%; width: 136%; height: 118%; transform-origin: 63.9654% 62.7119%; } .pg-hero__dolly-near { left: -22%; top: -18%; width: 136%; height: 118%; transform-origin: 63.9654% 62.7119%; } .pg-hero__dolly-floor { left: -45%; top: 72%; width: 170%; height: 28%; transform-origin: 64.7018% -57.1429%; } .pg-hero__dolly-runup { left: -145%; top: 100%; width: 330%; height: 100%; transform-origin: 63.6342% -44%; } .pg-hero__dolly-pedestal { left: 42%; top: 63%; width: 46.5%; height: 25.5%; } .pg-hero__group, .pg-hero__iris { transform-origin: 64.993% 56%; } /* desktop: the camera starts 43% farther from the pedestal than it ends (pedestal at scale 0.70, near walls 0.773, niche 0.791, backdrop 0.848) */ @keyframes pg-dolly-ped { 0.0% { transform: scale(0.7); } 4.0% { transform: scale(0.70069); } 8.0% { transform: scale(0.70308); } 12.0% { transform: scale(0.70779); } 16.0% { transform: scale(0.71586); } 20.0% { transform: scale(0.72895); } 24.0% { transform: scale(0.74931); } 28.0% { transform: scale(0.77799); } 32.0% { transform: scale(0.81122); } 36.0% { transform: scale(0.84297); } 40.0% { transform: scale(0.87055); } 44.0% { transform: scale(0.89384); } 48.0% { transform: scale(0.91344); } 52.0% { transform: scale(0.92996); } 56.0% { transform: scale(0.94392); } 60.0% { transform: scale(0.95571); } 64.0% { transform: scale(0.96563); } 68.0% { transform: scale(0.97392); } 72.0% { transform: scale(0.9808); } 76.0% { transform: scale(0.98641); } 80.0% { transform: scale(0.99089); } 84.0% { transform: scale(0.99437); } 88.0% { transform: scale(0.99694); } 92.0% { transform: scale(0.99868); } 96.0% { transform: scale(0.99968); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-near { 0.0% { transform: scale(0.77307); } 4.0% { transform: scale(0.77365); } 8.0% { transform: scale(0.77564); } 12.0% { transform: scale(0.77956); } 16.0% { transform: scale(0.78625); } 20.0% { transform: scale(0.79702); } 24.0% { transform: scale(0.81357); } 28.0% { transform: scale(0.8365); } 32.0% { transform: scale(0.86252); } 36.0% { transform: scale(0.88685); } 40.0% { transform: scale(0.90756); } 44.0% { transform: scale(0.92477); } 48.0% { transform: scale(0.93905); } 52.0% { transform: scale(0.95095); } 56.0% { transform: scale(0.9609); } 60.0% { transform: scale(0.96923); } 64.0% { transform: scale(0.9762); } 68.0% { transform: scale(0.98199); } 72.0% { transform: scale(0.98677); } 76.0% { transform: scale(0.99065); } 80.0% { transform: scale(0.99375); } 84.0% { transform: scale(0.99614); } 88.0% { transform: scale(0.9979); } 92.0% { transform: scale(0.9991); } 96.0% { transform: scale(0.99978); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-far { 0.0% { transform: scale(0.79079); } 4.0% { transform: scale(0.79134); } 8.0% { transform: scale(0.79322); } 12.0% { transform: scale(0.79691); } 16.0% { transform: scale(0.80321); } 20.0% { transform: scale(0.81332); } 24.0% { transform: scale(0.82883); } 28.0% { transform: scale(0.85023); } 32.0% { transform: scale(0.87439); } 36.0% { transform: scale(0.89687); } 40.0% { transform: scale(0.91593); } 44.0% { transform: scale(0.93169); } 48.0% { transform: scale(0.94474); } 52.0% { transform: scale(0.95558); } 56.0% { transform: scale(0.96463); } 60.0% { transform: scale(0.97219); } 64.0% { transform: scale(0.9785); } 68.0% { transform: scale(0.98374); } 72.0% { transform: scale(0.98806); } 76.0% { transform: scale(0.99157); } 80.0% { transform: scale(0.99436); } 84.0% { transform: scale(0.99652); } 88.0% { transform: scale(0.99811); } 92.0% { transform: scale(0.99919); } 96.0% { transform: scale(0.9998); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-bg { 0.0% { transform: scale(0.91636); } 4.0% { transform: scale(0.91682); } 8.0% { transform: scale(0.91839); } 12.0% { transform: scale(0.92149); } 16.0% { transform: scale(0.92673); } 20.0% { transform: scale(0.93512); } 24.0% { transform: scale(0.94787); } 28.0% { transform: scale(0.96523); } 32.0% { transform: scale(0.98453); } 36.0% { transform: scale(1.00221); } 40.0% { transform: scale(1.01699); } 44.0% { transform: scale(1.02907); } 48.0% { transform: scale(1.03898); } 52.0% { transform: scale(1.04714); } 56.0% { transform: scale(1.05391); } 60.0% { transform: scale(1.05954); } 64.0% { transform: scale(1.06422); } 68.0% { transform: scale(1.06808); } 72.0% { transform: scale(1.07126); } 76.0% { transform: scale(1.07384); } 80.0% { transform: scale(1.07588); } 84.0% { transform: scale(1.07746); } 88.0% { transform: scale(1.07862); } 92.0% { transform: scale(1.07941); } 96.0% { transform: scale(1.07986); } 100.0% { transform: scale(1.08); } } @keyframes pg-dolly-floor { 0.0% { transform: perspective(100cqh) rotateX(-56.56189deg) scaleY(1.81476); } 4.0% { transform: perspective(100cqh) rotateX(-56.47461deg) scaleY(1.81059); } 8.0% { transform: perspective(100cqh) rotateX(-56.17342deg) scaleY(1.79636); } 12.0% { transform: perspective(100cqh) rotateX(-55.57009deg) scaleY(1.76867); } 16.0% { transform: perspective(100cqh) rotateX(-54.51137deg) scaleY(1.72253); } 20.0% { transform: perspective(100cqh) rotateX(-52.72552deg) scaleY(1.65116); } 24.0% { transform: perspective(100cqh) rotateX(-49.7724deg) scaleY(1.54841); } 28.0% { transform: perspective(100cqh) rotateX(-45.23837deg) scaleY(1.42013); } 32.0% { transform: perspective(100cqh) rotateX(-39.43134deg) scaleY(1.29469); } 36.0% { transform: perspective(100cqh) rotateX(-33.35381deg) scaleY(1.19719); } 40.0% { transform: perspective(100cqh) rotateX(-27.71938deg) scaleY(1.12964); } 44.0% { transform: perspective(100cqh) rotateX(-22.76714deg) scaleY(1.0845); } 48.0% { transform: perspective(100cqh) rotateX(-18.51374deg) scaleY(1.05458); } 52.0% { transform: perspective(100cqh) rotateX(-14.90173deg) scaleY(1.0348); } 56.0% { transform: perspective(100cqh) rotateX(-11.85536deg) scaleY(1.0218); } 60.0% { transform: perspective(100cqh) rotateX(-9.30008deg) scaleY(1.01332); } 64.0% { transform: perspective(100cqh) rotateX(-7.16899deg) scaleY(1.00788); } 68.0% { transform: perspective(100cqh) rotateX(-5.40442deg) scaleY(1.00447); } 72.0% { transform: perspective(100cqh) rotateX(-3.95754deg) scaleY(1.00239); } 76.0% { transform: perspective(100cqh) rotateX(-2.78738deg) scaleY(1.00118); } 80.0% { transform: perspective(100cqh) rotateX(-1.85969deg) scaleY(1.00053); } 84.0% { transform: perspective(100cqh) rotateX(-1.14578deg) scaleY(1.0002); } 88.0% { transform: perspective(100cqh) rotateX(-0.6216deg) scaleY(1.00006); } 92.0% { transform: perspective(100cqh) rotateX(-0.26691deg) scaleY(1.00001); } 96.0% { transform: perspective(100cqh) rotateX(-0.06457deg) scaleY(1); } 100.0% { transform: perspective(100cqh) rotateX(-0deg) scaleY(1); } } html.pg-intro .pg-hero__group { transform: scale(0.7); } html.pg-intro .pg-hero__dolly-near { transform: scale(0.77307); } html.pg-intro .pg-hero__dolly-far { transform: scale(0.79079); } html.pg-intro .pg-hero__plate--scene img { transform: scale(0.91636); } html.pg-intro :is(.pg-hero__dolly-floor, .pg-hero__dolly-runup) { transform: perspective(100cqh) rotateX(-56.56189deg) scaleY(1.81476); } /* phone: the camera starts 32% farther from the pedestal than it ends (pedestal at scale 0.76, near walls 0.822, niche 0.837, backdrop 0.884) */ @keyframes pg-dolly-ped-p { 0.0% { transform: scale(0.76); } 4.0% { transform: scale(0.7606); } 8.0% { transform: scale(0.76267); } 12.0% { transform: scale(0.76675); } 16.0% { transform: scale(0.77371); } 20.0% { transform: scale(0.78494); } 24.0% { transform: scale(0.80224); } 28.0% { transform: scale(0.82626); } 32.0% { transform: scale(0.85362); } 36.0% { transform: scale(0.87931); } 40.0% { transform: scale(0.90125); } 44.0% { transform: scale(0.91953); } 48.0% { transform: scale(0.93473); } 52.0% { transform: scale(0.94743); } 56.0% { transform: scale(0.95806); } 60.0% { transform: scale(0.96698); } 64.0% { transform: scale(0.97444); } 68.0% { transform: scale(0.98065); } 72.0% { transform: scale(0.98578); } 76.0% { transform: scale(0.98995); } 80.0% { transform: scale(0.99327); } 84.0% { transform: scale(0.99585); } 88.0% { transform: scale(0.99774); } 92.0% { transform: scale(0.99903); } 96.0% { transform: scale(0.99977); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-near-p { 0.0% { transform: scale(0.82217); } 4.0% { transform: scale(0.82265); } 8.0% { transform: scale(0.82431); } 12.0% { transform: scale(0.82757); } 16.0% { transform: scale(0.83311); } 20.0% { transform: scale(0.84199); } 24.0% { transform: scale(0.85554); } 28.0% { transform: scale(0.87411); } 32.0% { transform: scale(0.89489); } 36.0% { transform: scale(0.91407); } 40.0% { transform: scale(0.93019); } 44.0% { transform: scale(0.94345); } 48.0% { transform: scale(0.95436); } 52.0% { transform: scale(0.96338); } 56.0% { transform: scale(0.97089); } 60.0% { transform: scale(0.97715); } 64.0% { transform: scale(0.98235); } 68.0% { transform: scale(0.98667); } 72.0% { transform: scale(0.99022); } 76.0% { transform: scale(0.99309); } 80.0% { transform: scale(0.99538); } 84.0% { transform: scale(0.99715); } 88.0% { transform: scale(0.99845); } 92.0% { transform: scale(0.99934); } 96.0% { transform: scale(0.99984); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-far-p { 0.0% { transform: scale(0.83687); } 4.0% { transform: scale(0.83732); } 8.0% { transform: scale(0.83887); } 12.0% { transform: scale(0.84191); } 16.0% { transform: scale(0.84707); } 20.0% { transform: scale(0.85534); } 24.0% { transform: scale(0.86793); } 28.0% { transform: scale(0.88512); } 32.0% { transform: scale(0.90428); } 36.0% { transform: scale(0.92189); } 40.0% { transform: scale(0.93665); } 44.0% { transform: scale(0.94875); } 48.0% { transform: scale(0.95868); } 52.0% { transform: scale(0.96688); } 56.0% { transform: scale(0.97369); } 60.0% { transform: scale(0.97936); } 64.0% { transform: scale(0.98407); } 68.0% { transform: scale(0.98797); } 72.0% { transform: scale(0.99117); } 76.0% { transform: scale(0.99377); } 80.0% { transform: scale(0.99584); } 84.0% { transform: scale(0.99743); } 88.0% { transform: scale(0.99861); } 92.0% { transform: scale(0.9994); } 96.0% { transform: scale(0.99985); } 100.0% { transform: scale(1); } } @keyframes pg-dolly-bg-p { 0.0% { transform: scale(0.95442); } 4.0% { transform: scale(0.95479); } 8.0% { transform: scale(0.95604); } 12.0% { transform: scale(0.95851); } 16.0% { transform: scale(0.96269); } 20.0% { transform: scale(0.96934); } 24.0% { transform: scale(0.9794); } 28.0% { transform: scale(0.993); } 32.0% { transform: scale(1.00798); } 36.0% { transform: scale(1.02158); } 40.0% { transform: scale(1.03285); } 44.0% { transform: scale(1.042); } 48.0% { transform: scale(1.04947); } 52.0% { transform: scale(1.05559); } 56.0% { transform: scale(1.06065); } 60.0% { transform: scale(1.06485); } 64.0% { transform: scale(1.06832); } 68.0% { transform: scale(1.07119); } 72.0% { transform: scale(1.07355); } 76.0% { transform: scale(1.07545); } 80.0% { transform: scale(1.07696); } 84.0% { transform: scale(1.07813); } 88.0% { transform: scale(1.07898); } 92.0% { transform: scale(1.07956); } 96.0% { transform: scale(1.07989); } 100.0% { transform: scale(1.08); } } @keyframes pg-dolly-floor-p { 0.0% { transform: perspective(100cqh) rotateX(-48.13436deg) scaleY(1.49838); } 4.0% { transform: perspective(100cqh) rotateX(-48.04008deg) scaleY(1.49564); } 8.0% { transform: perspective(100cqh) rotateX(-47.71537deg) scaleY(1.48629); } 12.0% { transform: perspective(100cqh) rotateX(-47.06808deg) scaleY(1.46815); } 16.0% { transform: perspective(100cqh) rotateX(-45.94238deg) scaleY(1.43806); } 20.0% { transform: perspective(100cqh) rotateX(-44.07252deg) scaleY(1.39187); } 24.0% { transform: perspective(100cqh) rotateX(-41.05858deg) scaleY(1.32619); } 28.0% { transform: perspective(100cqh) rotateX(-36.6123deg) scaleY(1.24581); } 32.0% { transform: perspective(100cqh) rotateX(-31.21268deg) scaleY(1.16925); } 36.0% { transform: perspective(100cqh) rotateX(-25.87366deg) scaleY(1.11141); } 40.0% { transform: perspective(100cqh) rotateX(-21.16484deg) scaleY(1.07233); } 44.0% { transform: perspective(100cqh) rotateX(-17.18385deg) scaleY(1.04672); } 48.0% { transform: perspective(100cqh) rotateX(-13.86033deg) scaleY(1.02999); } 52.0% { transform: perspective(100cqh) rotateX(-11.09394deg) scaleY(1.01904); } 56.0% { transform: perspective(100cqh) rotateX(-8.79269deg) scaleY(1.01189); } 60.0% { transform: perspective(100cqh) rotateX(-6.88025deg) scaleY(1.00725); } 64.0% { transform: perspective(100cqh) rotateX(-5.29503deg) scaleY(1.00429); } 68.0% { transform: perspective(100cqh) rotateX(-3.9876deg) scaleY(1.00243); } 72.0% { transform: perspective(100cqh) rotateX(-2.9182deg) scaleY(1.0013); } 76.0% { transform: perspective(100cqh) rotateX(-2.0546deg) scaleY(1.00064); } 80.0% { transform: perspective(100cqh) rotateX(-1.37052deg) scaleY(1.00029); } 84.0% { transform: perspective(100cqh) rotateX(-0.84431deg) scaleY(1.00011); } 88.0% { transform: perspective(100cqh) rotateX(-0.45803deg) scaleY(1.00003); } 92.0% { transform: perspective(100cqh) rotateX(-0.19667deg) scaleY(1.00001); } 96.0% { transform: perspective(100cqh) rotateX(-0.04758deg) scaleY(1); } 100.0% { transform: perspective(100cqh) rotateX(-0deg) scaleY(1); } } @media (max-width: 599px) { html.pg-intro .pg-hero__group { transform: scale(0.76); } html.pg-intro .pg-hero__dolly-near { transform: scale(0.82217); } html.pg-intro .pg-hero__dolly-far { transform: scale(0.83687); } html.pg-intro .pg-hero__plate--scene img { transform: scale(0.95442); } html.pg-intro :is(.pg-hero__dolly-floor, .pg-hero__dolly-runup) { transform: perspective(100cqh) rotateX(-48.13436deg) scaleY(1.49838); } } /* @dolly-end */ /* ================================================================= trust marquee */ /* a slim band of store promises under the hero: deep navy, hairlines, mono caps, champagne separators; the list is printed twice and the track moves by exactly one list width, so the loop is seamless. Slow: one full pass in 72 s. Pauses under the pointer; under reduced motion the single list wraps and nothing moves. */ .pg-marquee { position: relative; z-index: 2; overflow: hidden; background: var(--pg-navy-950); border-top: 1px solid var(--pg-line-dark); border-bottom: 1px solid var(--pg-line-dark); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .pg-marquee__track { display: flex; width: max-content; will-change: transform; animation: pg-marquee 72s linear infinite; } .pg-marquee:hover .pg-marquee__track { animation-play-state: paused; } .pg-marquee__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .pg-marquee__item { display: flex; align-items: center; height: 50px; padding-left: var(--pg-s-6); font-family: var(--pg-font-mono); font-size: var(--pg-fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--pg-text-mid); } .pg-marquee__item::after { content: ""; display: block; width: 5px; height: 5px; margin-left: var(--pg-s-6); background: var(--pg-gold-400); opacity: .75; transform: rotate(45deg); flex: none; } @keyframes pg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 781px) { .pg-marquee__item { height: 44px; font-size: var(--pg-fs-nano); letter-spacing: .18em; padding-left: var(--pg-s-5); } .pg-marquee__item::after { margin-left: var(--pg-s-5); } } @media (prefers-reduced-motion: reduce) { .pg-marquee__track { animation: none; width: auto; } .pg-marquee__list { flex-wrap: wrap; justify-content: center; padding: var(--pg-s-2) var(--pg-gutter); } .pg-marquee__list[aria-hidden="true"] { display: none; } .pg-marquee__item { height: 32px; } .pg-marquee { -webkit-mask-image: none; mask-image: none; } } /* proof strip */ .pg-hero__proof { position: relative; z-index: 2; max-width: calc(var(--pg-container-wide) + var(--pg-gutter) * 2); margin: 0 auto; padding: 0 var(--pg-gutter) var(--pg-s-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pg-s-3); } @media (min-width: 782px) { .pg-hero__proof { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pg-line-dark); padding-top: var(--pg-s-6); margin-top: var(--pg-s-4); } } .pg-hero__proof-item { display: flex; gap: var(--pg-s-3); align-items: flex-start; color: var(--pg-gold-400); } .pg-hero__proof-item span { display: flex; flex-direction: column; gap: 1px; font-size: var(--pg-fs-micro); color: var(--pg-text-low); line-height: 1.35; } .pg-hero__proof-item strong { font-size: var(--pg-fs-xs); color: var(--pg-text-hi); font-weight: var(--pg-fw-semibold); } /* mobile: stage first, then eyebrow, headline, primary CTA, lead, categories */ @media (max-width: 1023px) { .pg-hero__inner { padding-top: var(--pg-s-4); gap: var(--pg-s-5); } .pg-hero__stage { order: -1; } .pg-hero__copy { display: flex; flex-direction: column; } .pg-hero__copy > .pg-eyebrow { order: 0; } .pg-hero__title { order: 1; } .pg-hero__cta { order: 2; } .pg-hero__lead { order: 3; } .pg-hero__quick { order: 4; } .pg-hero__title { font-size: 2.375rem; max-width: 16ch; margin-bottom: var(--pg-s-4); } .pg-hero__cta { margin-bottom: var(--pg-s-4); align-items: center; } .pg-hero__cta .pg-btn { flex: 1 1 100%; } .pg-hero__cta .pg-btn--secondary { flex: 0 0 auto; background: transparent; border-color: transparent; padding-inline: .5rem; min-height: 44px; } .pg-hero__lead { margin-bottom: var(--pg-s-5); font-size: var(--pg-fs-md); } .pg-hero__quick { flex-wrap: wrap; } } /* phones: the first screen must show the scene AND the headline with the primary CTA. The stage becomes square and clips the plate (which keeps its size: 125% of the stage, shifted up so rows 16-96% of the plate show: vial caps keep 40 px of air, the pedestal keeps its floor), the eyebrow stays on one line, the headline is a step smaller and fluid, gaps tighten. */ @media (max-width: 599px) { /* immersive phone hero (2026-09-19): the scene fills the first screen edge to edge and the copy sits on its lower half over a navy fade; the vials, the environment and the desktop hero are untouched — only the crop and the layering change */ .pg-hero--scene-campaign .pg-hero__inner { display: block; position: relative; padding: 0 var(--pg-gutter) var(--pg-s-6); min-height: calc(100svh - var(--pg-header-h-mobile)); gap: 0; } .pg-hero--scene-campaign .pg-hero__stage { position: absolute; left: 0; right: 0; top: 0; height: min(76svh, 132vw); aspect-ratio: auto; overflow: hidden; z-index: 0; } .pg-hero--scene-campaign .pg-hero__set { top: -10px; height: auto; width: 258vw; left: 50%; transform: translateX(-64.99%); } .pg-hero--scene-campaign .pg-hero__scene, .pg-hero--scene-campaign .pg-hero__haze, .pg-hero--scene-campaign .pg-hero__dolly { -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 97%); mask-image: linear-gradient(180deg, #000 66%, transparent 97%); } /* the plate fades into the page; the vials, rim light and their shadows are not masked */ .pg-hero--scene-campaign .pg-hero__copy { position: relative; z-index: 2; padding-top: 100vw; } /* the vials end at ~99vw of the screen width whatever the height, so the copy always starts below them */ .pg-hero--scene-campaign .pg-hero__copy::before { content: ""; position: absolute; left: calc(var(--pg-gutter) * -1); right: calc(var(--pg-gutter) * -1); top: calc(100vw - 6px); bottom: -40px; z-index: -1; background: linear-gradient(180deg, transparent 0, rgba(4,9,26,.72) 34px, var(--pg-navy-950) 64px); pointer-events: none; } /* the scrim begins under the vials, never over them */ .pg-hero--scene-campaign .pg-hero__copy > .pg-eyebrow { margin-top: 24px; } .pg-hero__quick { display: none; } /* category pills: the shop bar, the menu and the collection tiles carry the category navigation on phones */ .pg-hero .pg-eyebrow { font-size: var(--pg-fs-nano); letter-spacing: .1em; } .pg-hero__title { font-size: clamp(1.7rem, 8vw, 2.25rem); margin-bottom: var(--pg-s-3); } .pg-hero__cta { margin-bottom: var(--pg-s-3); } } @media (max-width: 389px) { .pg-hero .pg-eyebrow { letter-spacing: .08em; } } @media (prefers-reduced-motion: reduce) { .pg-hero__light, .pg-hero__float, .pg-hero__plate img, .pg-hero__scene img, .pg-hero__spot { animation: none; } } /* =========================================================== categories */ .pg-cats { background: var(--pg-navy-900); position: relative; } .pg-cats__head, .pg-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pg-s-6); margin-bottom: var(--pg-s-6); padding-bottom: var(--pg-s-4); border-bottom: 1px solid var(--pg-line); } .pg-featured__head .pg-lead, .pg-cats__head .pg-lead { max-width: 52ch; } .pg-cats__head .pg-section-head, .pg-featured__head .pg-section-head { margin-bottom: 0; } .pg-cats__all { flex: none; } .pg-cats__grid { display: grid; gap: var(--pg-s-4); grid-template-columns: 1fr; } @media (min-width: 782px) { .pg-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-s-5); } } .pg-cat-tile { display: grid; grid-template-columns: 38% 1fr; min-height: 0; border-radius: var(--pg-r-lg); border: 1px solid var(--pg-line-dark); background: var(--pg-navy-850); overflow: hidden; text-decoration: none; color: var(--pg-white); position: relative; transition: transform var(--pg-d-base) var(--pg-ease-out), border-color var(--pg-d-base), box-shadow var(--pg-d-base); } .pg-cat-tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--pg-gold-metal); transform: scaleX(0); transform-origin: left; transition: transform var(--pg-d-slow) var(--pg-ease-out); } @media (hover: hover) { .pg-cat-tile:hover { transform: translateY(-4px); border-color: var(--pg-gold-line); box-shadow: var(--pg-shadow-dark-2); color: var(--pg-white); } } @media (hover: hover) { .pg-cat-tile:hover::after { transform: scaleX(1); } } /* media: the studio stage (tokens: --pg-studio) with the vial standing on it and a natural contact shadow; nothing else. */ .pg-cat-tile__media { position: relative; overflow: hidden; background: var(--pg-studio-white); } /* the white counter, same grounding as the cards (owner, 2026-09-19); geometry in per cent of the media height */ .pg-cat-tile__media::before { content: ""; position: absolute; left: 50%; bottom: calc(13.84% - 2.2%); height: 4.4%; aspect-ratio: 10 / 1; translate: -50% 0; border-radius: 50%; background: var(--pg-studio-white-ambient); filter: blur(4px); z-index: 1; pointer-events: none; } .pg-cat-tile__media::after { content: ""; position: absolute; left: 50%; bottom: calc(13.84% - 1%); height: 2%; aspect-ratio: 14 / 1; translate: -50% 0; border-radius: 50%; background: var(--pg-studio-white-contact); filter: blur(1.4px); z-index: 1; pointer-events: none; } .pg-cat-tile__img { position: absolute; left: 50%; bottom: 12%; height: 70%; width: auto; translate: -50% 0; z-index: 2; filter: drop-shadow(0 1px 1px rgba(20, 26, 43, 0.12)); transition: transform var(--pg-d-slow) var(--pg-ease-out); } /* base line = 12% + 2.63% × 70% = 13.84% */ .pg-cat-tile__reflection img, .pg-cat-tile__reflect-img { position: absolute; left: 50%; bottom: 12%; height: 70%; width: auto; z-index: 0; transform-origin: 50% 100%; translate: -50% -5.26%; transform: scaleY(-1); opacity: .4; filter: blur(.8px) saturate(.9); -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 12%, rgba(0,0,0,0) 34%); mask-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 12%, rgba(0,0,0,0) 34%); pointer-events: none; } @media (hover: hover) { .pg-cat-tile:hover .pg-cat-tile__img { transform: scale(1.02); } .pg-cat-tile:hover .pg-cat-tile__reflect-img { transform: scaleY(-1) scale(1.02); } } @media (min-width: 782px) { .pg-cat-tile { grid-template-columns: 1fr; min-height: 0; } .pg-cat-tile__media { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--pg-line-dark-strong); } .pg-cat-tile__body { padding: var(--pg-s-5) var(--pg-s-6) var(--pg-s-6); } .pg-cat-tile__body::before { position: absolute; top: 0; left: var(--pg-s-6); width: 40px; margin: 0; } } /* body: a short champagne rule above the name (the eyebrow line, as in the hero), mono count, tight hierarchy */ .pg-cat-tile__body { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: var(--pg-s-5) var(--pg-s-6) var(--pg-s-5) var(--pg-s-4); position: relative; } .pg-cat-tile__body::before { content: ""; display: block; width: 24px; height: 1px; margin-bottom: var(--pg-s-3); background: var(--pg-gold-400); opacity: .8; } .pg-cat-tile__count { order: -1; font-family: var(--pg-font-mono); font-size: var(--pg-fs-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--pg-gold-400); margin-bottom: 2px; } .pg-cat-tile__name { font-family: var(--pg-font-display); font-weight: var(--pg-fw-extrabold); font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.12; } .pg-cat-tile__desc { font-size: var(--pg-fs-sm); color: var(--pg-text-low); line-height: 1.45; } .pg-cat-tile__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--pg-s-2); font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-semibold); color: var(--pg-text-mid); transition: color var(--pg-d-fast), gap var(--pg-d-fast); } .pg-cat-tile:hover .pg-cat-tile__cta { color: var(--pg-gold-400); gap: 10px; } /* phones: the side-by-side tile stays, tighter, so three categories fit in about a screen and a half */ @media (max-width: 781px) { .pg-cat-tile { grid-template-columns: 34% 1fr; } .pg-cat-tile__body { padding: var(--pg-s-4) var(--pg-s-4) var(--pg-s-4) var(--pg-s-3); gap: 2px; } .pg-cat-tile__body::before { width: 20px; margin-bottom: var(--pg-s-2); } .pg-cat-tile__name { font-size: 1.05rem; } .pg-cat-tile__desc { font-size: var(--pg-fs-xs); } .pg-cat-tile__cta { margin-top: 4px; } .pg-cat-tile__img, .pg-cat-tile__reflect-img { height: 66%; } .pg-cat-tile__media::before { bottom: calc(13.74% - 2.2%); } .pg-cat-tile__media::after { bottom: calc(13.74% - 1%); } } /* ============================================================ featured */ .pg-featured { background: var(--pg-offwhite); } .pg-featured__head { flex-wrap: wrap; } @media (max-width: 599px) { .pg-cats__head, .pg-featured__head { flex-direction: column; align-items: flex-start; gap: var(--pg-s-3); } } /* ======================================================== documentation */ .pg-docs-band { background: linear-gradient(180deg, var(--pg-navy-950) 0%, var(--pg-navy-900) 100%); position: relative; overflow: hidden; } .pg-docs-band__grid { display: grid; gap: var(--pg-s-10); align-items: center; } @media (min-width: 1024px) { .pg-docs-band__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pg-s-16); } } .pg-docs-band__copy h2 { margin-bottom: var(--pg-s-4); } .pg-docs-band__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-s-4); margin: var(--pg-s-8) 0 0; padding-top: var(--pg-s-6); border-top: 1px solid var(--pg-line-dark); position: relative; } .pg-docs-band__stats::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--pg-gold-400); } .pg-docs-band__stats dd { margin: 0; } .pg-docs-band__cards { display: grid; gap: var(--pg-s-4); } @media (min-width: 640px) { .pg-docs-band__cards { grid-template-columns: 1fr 1fr; gap: var(--pg-s-5); } } .pg-doc-card { display: flex; flex-direction: column; border-radius: var(--pg-r-lg); border: 1px solid var(--pg-line-dark); background: var(--pg-navy-800); overflow: hidden; text-decoration: none; color: var(--pg-white); transition: transform var(--pg-d-base) var(--pg-ease-out), border-color var(--pg-d-base), box-shadow var(--pg-d-base); } @media (hover: hover) { .pg-doc-card:hover { transform: translateY(-4px); border-color: var(--pg-gold-line); box-shadow: var(--pg-shadow-dark-2); color: var(--pg-white); } } .pg-doc-card__art { display: grid; place-items: center; height: 200px; padding: var(--pg-s-5) var(--pg-s-6); background: radial-gradient(80% 70% at 50% 100%, rgba(212,175,55,.14) 0%, transparent 70%); container-type: inline-size; } .pg-doc-card__art--sds { background: radial-gradient(80% 70% at 50% 100%, rgba(79,123,217,.2) 0%, transparent 70%); } /* the document is always shown whole: no edge crops it, and the illustration scales with its own box (container units) so nothing is clipped at any width */ .pg-doc-card__sheet { position: relative; width: 78%; max-width: 230px; padding: 16px 18px 14px; background: var(--pg-ivory); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 10px; transition: transform var(--pg-d-slow) var(--pg-ease-out); } @media (hover: hover) { .pg-doc-card:hover .pg-doc-card__sheet { transform: translateY(-3px); } } .pg-doc-card__sheet-head { display: flex; align-items: center; gap: 8px; color: var(--pg-navy-900); } .pg-doc-card__sheet-head svg { width: 20px; height: auto; flex: none; overflow: visible; } .pg-doc-card__sheet-head .pg-logo__mark { width: 26px; aspect-ratio: 57 / 49; } /* the whole PG monogram at its own proportions (viewBox 57×49) */ .pg-doc-card__sheet-head .pg-logo__mark path:last-child { fill: var(--pg-navy-900); } /* the G is white for dark grounds; on the ivory sheet it turns navy so both letters read */ .pg-doc-card__sheet-head i { display: block; height: 4px; border-radius: 2px; background: var(--pg-gray-300); } .pg-doc-card__sheet-head i:first-of-type { width: 46px; } .pg-doc-card__sheet-head i:last-of-type { width: 24px; } .pg-doc-card__sheet-title { font-family: var(--pg-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-gold-700); } .pg-doc-card__sheet-rows { display: grid; gap: 6px; } .pg-doc-card__sheet-rows i { display: block; height: 4px; border-radius: 2px; background: var(--pg-gray-200); } .pg-doc-card__sheet-rows i:nth-child(2) { width: 82%; } .pg-doc-card__sheet-rows i:nth-child(4) { width: 64%; } .pg-doc-card__sheet-rows i:nth-child(5) { width: 90%; } .pg-doc-card__sheet-seal { position: absolute; right: 14px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--pg-gold-500); background: radial-gradient(circle, rgba(212,175,55,.35), rgba(212,175,55,.05)); } .pg-doc-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--pg-s-5) var(--pg-s-6) var(--pg-s-6); border-top: 1px solid var(--pg-line-dark); } .pg-doc-card__title { font-family: var(--pg-font-display); font-weight: var(--pg-fw-extrabold); font-size: 1.2rem; } .pg-doc-card__sub { font-size: var(--pg-fs-sm); color: var(--pg-text-low); line-height: 1.5; } .pg-doc-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--pg-s-2); font-size: var(--pg-fs-xs); font-weight: var(--pg-fw-semibold); color: var(--pg-gold-400); } /* standards: shared with the About page, lives in pages.css */ /* ============================================================ home faq */ .pg-home-faq { background: var(--pg-white); } .pg-home-faq .pg-acc { border-top-color: var(--pg-line-light-strong); } .pg-home-faq__grid { display: grid; gap: var(--pg-s-10); } @media (min-width: 1024px) { .pg-home-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--pg-s-16); align-items: start; } } .pg-home-faq__intro h2 { margin-bottom: var(--pg-s-3); } .pg-home-faq__intro .pg-lead { margin-bottom: var(--pg-s-4); } /* ================================================================= cta */ /* deep navy with one soft directional light from the upper left and depth toward the lower right; a champagne rule with a small mark above the eyebrow and two fine vertical hairlines framing the composition; no glow, no scene */ .pg-cta { background: linear-gradient(160deg, var(--pg-navy-850) 0%, var(--pg-navy-900) 42%, var(--pg-navy-950) 100%); position: relative; overflow: hidden; text-align: center; padding-block: calc(var(--pg-section) * .9); } .pg-cta__light { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(198,210,238,.075) 0%, rgba(198,210,238,.02) 32%, transparent 55%), radial-gradient(70% 60% at 100% 100%, rgba(4,9,26,.55) 0%, transparent 70%); } .pg-cta__inner { position: relative; max-width: 640px; padding-block: var(--pg-s-2); } .pg-cta__inner::before, .pg-cta__inner::after { content: ""; position: absolute; top: -8%; bottom: -8%; width: 1px; background: linear-gradient(180deg, transparent, var(--pg-gold-line) 25%, var(--pg-gold-line) 75%, transparent); pointer-events: none; } .pg-cta__inner::before { left: calc(50% - 400px); } .pg-cta__inner::after { right: calc(50% - 400px); } .pg-cta__mark { display: block; width: 7px; height: 7px; margin: 0 auto var(--pg-s-5); background: var(--pg-gold-400); transform: rotate(45deg); position: relative; } .pg-cta__mark::before, .pg-cta__mark::after { content: ""; position: absolute; top: 3px; width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--pg-gold-line-strong)); transform: rotate(-45deg); transform-origin: right center; right: 12px; } .pg-cta__mark::after { left: 12px; right: auto; transform-origin: left center; background: linear-gradient(90deg, var(--pg-gold-line-strong), transparent); transform: rotate(-45deg); } .pg-cta__inner .pg-eyebrow { justify-content: center; margin-bottom: var(--pg-s-3); } .pg-cta__inner h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); letter-spacing: -0.025em; margin-bottom: var(--pg-s-3); } .pg-cta__inner .pg-lead { margin-inline: auto; margin-bottom: var(--pg-s-6); max-width: 46ch; font-size: var(--pg-fs-body); color: var(--pg-text-mid); } .pg-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pg-s-3); } .pg-cta__note { margin-top: var(--pg-s-6); font-family: var(--pg-font-mono); font-size: var(--pg-fs-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--pg-text-low); } @media (max-width: 1023px) { .pg-cta__inner::before, .pg-cta__inner::after { display: none; } } /* ---- front-page rhythm (scoped to body.home until the treatment rolls out site-wide): shorter section padding, tighter heads, smaller phone headings, compact featured cards, documentation cards as rows on phones, tighter standards/FAQ/footer ---- */ body.home { --pg-section: clamp(3rem, 2.1rem + 3.4vw, 5.5rem); } body.home .pg-section-head { margin-bottom: var(--pg-s-6); } body.home .pg-docs-band__stats { margin-top: var(--pg-s-6); padding-top: var(--pg-s-5); } body.home .pg-docs-band__copy .pg-lead, body.home .pg-standards__intro .pg-lead, body.home .pg-home-faq__intro .pg-lead { font-size: var(--pg-fs-body); } body.home .pg-standards__item { padding: var(--pg-s-5) 0; } body.home .pg-standards__intro .pg-lead { margin-bottom: var(--pg-s-5); } body.home .pg-acc__btn, body.home .pg-acc summary { padding-block: var(--pg-s-4); } body.home .pg-acc__panel { padding-bottom: var(--pg-s-4); } body.home .pg-product-card__media { aspect-ratio: 1 / 1; padding: var(--pg-s-4) var(--pg-s-4) 0; } body.home .pg-product-card__status { padding-top: var(--pg-s-3); } body.home .pg-product-card__price { margin-top: var(--pg-s-2); } body.home .pg-product-card__actions { padding: var(--pg-s-3) var(--pg-s-5) var(--pg-s-4); } body.home .pg-footer__inner { padding-block: var(--pg-s-12) var(--pg-s-8); gap: var(--pg-s-8) var(--pg-s-8); } body.home .pg-footer__base-inner { padding-block: var(--pg-s-5) calc(var(--pg-s-6) + env(safe-area-inset-bottom)); } @media (max-width: 781px) { body.home main .pg-section h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.75rem); } /* section headings only; footer headings keep their mono size */ body.home .pg-hero__title { font-size: clamp(1.7rem, 8vw, 2.25rem); } body.home .pg-cats__head, body.home .pg-featured__head { margin-bottom: var(--pg-s-5); padding-bottom: var(--pg-s-3); } body.home .pg-docs-band__grid, body.home .pg-standards__grid, body.home .pg-home-faq__grid { gap: var(--pg-s-6); } /* documentation cards become rows: the document illustration on the left, title and line on the right */ body.home .pg-docs-band__cards { gap: var(--pg-s-3); } body.home .pg-doc-card { flex-direction: row; align-items: stretch; } body.home .pg-doc-card__art { flex: 0 0 42%; height: auto; min-height: 0; padding: var(--pg-s-3); place-items: center; } /* the sheet is sized in container units of the art column, so the whole document — mark, title, rows, seal — scales as one and is never cropped */ body.home .pg-doc-card__sheet { width: 100%; max-width: 150px; padding: 7cqw 8cqw 6cqw; gap: 4.5cqw; border-radius: 5cqw; box-shadow: 0 6px 18px rgba(0,0,0,.35); } body.home .pg-doc-card__sheet-head { gap: 5cqw; } body.home .pg-doc-card__sheet-head svg { width: 12cqw; } body.home .pg-doc-card__sheet-head .pg-logo__mark { width: 16cqw; } body.home .pg-doc-card__sheet-head i { height: 2.4cqw; } body.home .pg-doc-card__sheet-head i:first-of-type { width: 30cqw; } body.home .pg-doc-card__sheet-head i:last-of-type { width: 15cqw; } body.home .pg-doc-card__sheet-title { font-size: clamp(5.5px, 5.2cqw, 8px); letter-spacing: .04em; white-space: nowrap; } body.home .pg-doc-card__sheet-rows { gap: 3cqw; } body.home .pg-doc-card__sheet-rows i { height: 2.4cqw; } body.home .pg-doc-card__sheet-seal { width: 16cqw; height: 16cqw; right: 7cqw; bottom: 6cqw; border-width: 1.5px; } body.home .pg-doc-card__body { flex: 1 1 auto; padding: var(--pg-s-4); border-top: 0; border-left: 1px solid var(--pg-line-dark); gap: 4px; justify-content: center; } body.home .pg-doc-card__title { font-size: 1.05rem; } body.home .pg-doc-card__sub { font-size: var(--pg-fs-xs); } body.home .pg-docs-band__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pg-s-3); } body.home .pg-standards__item { grid-template-columns: 40px 1fr; gap: var(--pg-s-3); padding: var(--pg-s-4) 0; } body.home .pg-standards__title { font-size: 1.05rem; margin-bottom: 4px; } body.home .pg-standards__text { font-size: var(--pg-fs-xs); } body.home .pg-footer__inner { padding-block: var(--pg-s-10) var(--pg-s-6); gap: var(--pg-s-6) var(--pg-s-6); } body.home .pg-footer__links { gap: 6px; } body.home .pg-footer__heading { margin-bottom: var(--pg-s-3); padding-bottom: var(--pg-s-2); } body.home .pg-footer__base-inner { padding-block: var(--pg-s-4) calc(var(--pg-s-5) + env(safe-area-inset-bottom)); gap: var(--pg-s-3); } } /* ---- 320–339 px phones (2026-09-20): the hero eyebrow keeps to one line ---- */ @media (max-width: 339px) { .pg-hero .pg-eyebrow__sep, .pg-hero .pg-eyebrow__sep + .pg-eyebrow__item { display: none; } } /* ---- category tiles on 320–359 px phones (owner, 2026-09-20): count, name and Browse beside a larger vial; the description waits for wider screens ---- */ @media (max-width: 359px) { .pg-cat-tile { grid-template-columns: 40% 1fr; } .pg-cat-tile__body { padding: 14px 14px 14px 12px; gap: 2px; } .pg-cat-tile__body::before { margin-bottom: 6px; } .pg-cat-tile__name { font-size: 1.1rem; overflow-wrap: anywhere; } .pg-cat-tile__desc { display: none; } .pg-cat-tile__cta { margin-top: 6px; } } /* ---- the dark homepage sections carry the hero's dust (6.7.4) ----------------------------------------------------------- Each dark section gets one .pg-dust layer as its first child and lifts its own children above it. Lighter and slower than the hero's: these are rooms you scroll past, not the stage. The light sections (featured, standards, FAQ) get none. */ .pg-cats, .pg-docs-band, .pg-cta { isolation: isolate; } .pg-cats > :not(.pg-dust), .pg-docs-band > :not(.pg-dust), .pg-cta > :not(.pg-dust) { position: relative; z-index: 1; } .pg-cats .pg-dust { --pg-dust-max: 1; --pg-dust-scale: 1.05; } .pg-docs-band .pg-dust { --pg-dust-max: .94; --pg-dust-scale: 1.05; } .pg-cta .pg-dust { --pg-dust-max: 1; --pg-dust-scale: 1.15; } /* the dark cards on these bands stop being solid blocks, so a speck drifts faintly behind them */ .pg-cats .pg-cat-tile { background: var(--pg-veil-alt, var(--pg-navy-850)); --pg-dust-card: .26; } .pg-docs-band .pg-doc-card { background: var(--pg-veil-raised, var(--pg-navy-800)); --pg-dust-card: .24; } /* ---- phones and tablets: the hero is a room, not a picture in a box (6.7.4, owner: "make the mobile hero feel immersive rather than square/boxed-in") ------------------------------------------------------------------------------------------ 600-1023 px was the boxed case: a 16:11 panel sitting inside the page gutter with the copy underneath. The scene now runs edge to edge and taller, and fades into the page instead of ending on a line; only the copy keeps the gutter. Phones were already full-bleed: there the fade simply reaches further down, so the floor dissolves into the copy rather than stopping. */ @media (min-width: 600px) and (max-width: 1023px) { .pg-hero--scene-campaign .pg-hero__inner { padding-inline: 0; gap: var(--pg-s-4); } .pg-hero--scene-campaign .pg-hero__copy { padding-inline: var(--pg-gutter); } .pg-hero--scene-campaign .pg-hero__stage { aspect-ratio: 16 / 10; } .pg-hero--scene-campaign .pg-hero__scene, .pg-hero--scene-campaign .pg-hero__haze, .pg-hero--scene-campaign .pg-hero__dolly { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } } @media (max-width: 599px) { .pg-hero--scene-campaign .pg-hero__stage { height: min(82svh, 140vw); } .pg-hero--scene-campaign .pg-hero__scene, .pg-hero--scene-campaign .pg-hero__haze, .pg-hero--scene-campaign .pg-hero__dolly { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } }