` paints white (chrome.css `body.ap-sandbox-page .ap-sandbox`, 0,2,1), so the template adds `ap-utma-page` to and this (0,3,1) repaints it. Header keeps its own --navigation-background. */ body.ap-sandbox-page.ap-utma-page .ap-sandbox { background: var(--basic-black, #000); } /* ── Product page split ────────────────────────────────────────────── Gallery + summary hardcode `background: #fff` in ago.css (the only two non-token paints on the page); repaint them on the ground. `.ap-pp`'s 192px bottom margin is handed to the story band below, which now owns the rhythm from the gallery's end to the collection title (frame: 4225 → 7366). Only when the band is actually rendered (sandbox) — the live PDP (modern-v1/content.php) carries the same modifier without the band, and there `.ap-pp` must keep its own gap to the collection. */ .ap-pp--utma:has(+ .ap-utma__story) { margin-bottom: 0; } .ap-pp--utma .ap-pp__gallery, .ap-pp--utma .ap-pp__summary { background: var(--basic-black, #000); } /* Primary CTA label — the accent fill needs the dark label (Figma: text-primary #191919 on #D1FF0A). ago.css locks the hover/focus/ active colour to --text-white at (0,3,0); this pins it at (0,4,0). */ .ap-pp--utma .ap-pp__add-to-cart, .ap-sandbox .ap-pp--utma .ap-pp__add-to-cart:hover, .ap-sandbox .ap-pp--utma .ap-pp__add-to-cart:focus, .ap-sandbox .ap-pp--utma .ap-pp__add-to-cart:focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__add-to-cart:active { color: var(--gray-950, #191919); } /* ── Personalizacija card ──────────────────────────────────────────── Figma AGO-Design 1952:4929 (544×193). Same markup + rhythm as the light card (ago.css `.ap-pp__personalize`, chrome.css input primitive); only the paint changes, every value a frame binding: card Gray/900, radius 15, padding 16, 16px between rows title Heading/SM/Medium, Text/white (text-primary remap) description Body/SM/Regular, Text/tertiary price chip Gray/0 pill, Text/primary label divider Gray/700 field label Text/white · counter Input/helper-default (tertiary) input no fill, Gray/700 stroke, placeholder Input/text-placeholder checkbox Checkbox/inverse-background-checked (white) + Checkbox/inverse-check (#191919) — checkbox-checked-inverse.svg Frame drift: the first input's stroke is left at the component's light default (#E4E4E4) while the second is Gray/700 — Gray/700 is the deliberate one and both fields use it here. Unchecked checkbox isn't drawn; it takes the same no-fill + Gray/700 ring as the inputs. */ .ap-pp--utma .ap-pp__personalize { background: var(--gray-900, #262626); } .ap-pp--utma .ap-pp__personalize__description { color: var(--text-tertiary, #787878); } /* Row → divider is 16px in the frame (ago.css opens the panel at 19.5px). */ .ap-pp--utma .ap-pp__personalize:has(.ap-pp__personalize__opt-in .ap-pp__personalize__checkbox:checked) .ap-pp__personalize__expanded { margin-top: var(--space-16, 16px); } .ap-pp--utma .ap-pp__personalize .ap-pp__divider { background: var(--gray-700, #454545); } /* Price chip. ago.css locks the button's hover/focus/active at (0,3,0); this pins both the button and the opt-out row's span at (0,4,0). */ .ap-pp--utma .ap-pp__personalize__cta, .ap-pp--utma .ap-pp__personalize__option-price, .ap-sandbox .ap-pp--utma .ap-pp__personalize__cta:hover, .ap-sandbox .ap-pp--utma .ap-pp__personalize__cta:focus, .ap-sandbox .ap-pp--utma .ap-pp__personalize__cta:focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__personalize__cta:active { background-color: var(--gray-0, #FFF); color: var(--gray-950, #191919); /* Text/primary — the token itself is remapped to white on this wrapper */ } /* Checkbox. The checked icon is set inline per input via `--ap-pp-checkbox-icon` (an inline custom property beats any sheet), so the inverse glyph is applied as `background-image` directly. (0,4,1) beats ago.css's (0,3,1) rest and ties its (0,4,1) states, which this sheet wins on cascade order. */ .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:not(:checked), .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:not(:checked):hover, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:not(:checked):focus, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:not(:checked):focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:not(:checked):active { background-color: transparent; border-color: var(--gray-700, #454545); } .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:checked, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:checked:hover, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:checked:focus, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:checked:focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__personalize__checkbox:checked:active { background-image: url("../img/sandbox/checkbox-checked-inverse.svg"); } /* Text inputs. chrome.css paints the primitive at (0,2,1) rest / (0,3,1) states; (0,3,1) / (0,4,1) here. The error border keeps its own rule at (0,5,1) so `.is-invalid` still shows. */ .ap-sandbox .ap-pp--utma .ap-pp__personalize__field-input, .ap-sandbox .ap-pp--utma .ap-pp__personalize__field-input:hover, .ap-sandbox .ap-pp--utma .ap-pp__personalize__field-input:focus, .ap-sandbox .ap-pp--utma .ap-pp__personalize__field-input:focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__personalize__field-input:active { background: transparent; border-color: var(--gray-700, #454545); color: var(--text-white, #FFF); } .ap-sandbox .ap-pp--utma .ap-pp__personalize__field.is-invalid .ap-pp__personalize__field-input { border-color: var(--input-border-error, #FF0014); } /* Selected size chip — Figma fills the pressed chip white with the dark label (the live chip is outline-only). Shape (2px ring, radius, bold) stays the live primitive's; only the paint changes. Lock at (0,5,0) over the chrome primitive's (0,3,0) hover/focus/active pins. */ .ap-pp--utma .ap-pp__size-option[aria-pressed="true"], .ap-sandbox .ap-pp--utma .ap-pp__size-option[aria-pressed="true"]:hover, .ap-sandbox .ap-pp--utma .ap-pp__size-option[aria-pressed="true"]:focus, .ap-sandbox .ap-pp--utma .ap-pp__size-option[aria-pressed="true"]:focus-visible, .ap-sandbox .ap-pp--utma .ap-pp__size-option[aria-pressed="true"]:active { background-color: var(--text-white, #FFF); color: var(--gray-950, #191919); } /* Sale price row — current price + struck original, baseline-aligned, 16px apart (frame: 183px price → strike at 198px). The live PDP has no sale-price element yet (empty data → empty UI), so the pattern is introduced here; it mirrors `.ap-pp__combo-item__price--strike` (tertiary + line-through). Frame type is Outfit 18/1.3 — off the type scale, rounded to `.type-heading-sm-regular` (20/1.1). Not `--utma`-scoped on purpose: nothing here is collab-specific, so the same markup can be promoted to ago.css when the modern PDP renders WC sale prices. */ .ap-pp__price-row { display: flex; align-items: baseline; gap: var(--space-16, 16px); } .ap-pp__price--strike { margin: 0; color: var(--text-tertiary, #787878); text-decoration: line-through; text-transform: none; } /* Icons — the shared SVG glyphs are #262626 strokes (one asset set for the light chrome). Rather than fork white copies of ruler / truck / calendar / chevrons, invert them where they sit on the ground (#262626 → #D9D9D9 ≈ Figma's white icons). NOT applied to the back / zoom pills (their white-50% fill wants the dark glyph, as on the live page) nor to the bag glyph (the template picks the dark `bag-04.svg` for the lime CTA). */ .ap-pp--utma .ap-pp__sizes-table__icon img, .ap-pp--utma .ap-pp__delivery-item__icon img, .ap-pp--utma .ap-pp__section-head__icon img, .ap-pp__collection--utma .ap-pp__collection__nav-button__icon img { filter: invert(1); } /* ── Collection slider ─────────────────────────────────────────────── Card title is neutral-300 in the frame (price stays white via the --text-primary remap); the empty-media placeholder joins the dark ramp so a missing image doesn't flash light grey. */ .ap-pp__collection--utma .ap-pp__collection__item__title { color: var(--gray-300, #D4D4D4); } .ap-pp__collection--utma .ap-pp__collection__item__media { background-color: var(--gray-900, #262626); } /* ── Story band — "TOGETHER we are stronger" ───────────────────────── New section between the product split and the collection; exists only in the UTMA frame so its measures come straight from 5:645 / 5:594 / 5:519 / 5:560 / 5:523 (1920 frame). Full-bleed, on the ground. Scroll choreography (prototype 5:441 → layer 5:645 is `sticky top-0` from y=4225 to the page end): the mark + copy PIN to the viewport top while the lookbook scrolls past them. The pin carries a 200px black band at its top; two photos (big right 5:519, mid-left 5:560) sit UNDER the pin — they slide behind the text and vanish into that band — while the other two (small top-left 5:594, bottom-right 5:523) sit OVER it. The black block from y=7166 (5:646, the collection area) sits over everything and simply covers the pinned text as it scrolls up. Stacking here: under-photos 0 → pin 1 → over-photos 2 → collection/footer 3 (all far below the 1101 header). Vertical rhythm (frame y, band starts at 4225 where the gallery ends): black band 4225–4425 → mark bbox 4433–4835 → copy 4886–4982 → collage 5182–7166 → collection title 7366. The pin's box is 757px (copy bottom); the collage follows 200px later. The mark's layout box is the UN-rotated 1059×311 SVG; rotating −5° grows its visual bbox by ~45px top and bottom, so the pin's paddings are the frame gaps corrected by that 45px (208+45 / 52+45). */ .ap-utma__story { position: relative; background: var(--basic-black, #000); color: var(--text-primary, #FFF); /* Keep the pin pinned while the collection slides over it (frame: the sticky range runs to the page end): the ::after spacer extends the sticky container one viewport past the collage and the negative margin pulls the following sections back up by the same amount. By the time the pin unsticks it is fully hidden under the opaque collection. A spacer, not padding — sticky is constrained by the containing block's CONTENT box, so padding wouldn't extend it. */ margin-bottom: -100vh; } .ap-utma__story::after { content: ''; display: block; height: 100vh; } /* Pinned layer — band + mark + copy. Only the top 200px is painted black; the rest is transparent so the under-photos show behind the lettering while they scroll past. */ .ap-utma__story__pin { position: sticky; top: 0; z-index: 1; box-sizing: border-box; height: 757px; padding-top: 253px; background: linear-gradient(to bottom, var(--basic-black, #000) 200px, transparent 200px); } /* Wordmark — 1059/1920 of the frame width, centred, tilted −5° like the frame's Union layer (its 23px horizontal nudge is dropped so the mark stays centred at every viewport). `max-width: none` opts out of Astra's global img cap (memory: astra-img-max-width-override). */ .ap-utma__story__mark { display: block; width: min(1059px, 55.17vw); height: auto; max-width: none; margin: 0 auto; transform: rotate(-5deg); } /* Copy — centred, four grid columns wide (frame: 524px = the summary rail width; on our grid 4 cols = 554.6px at 1920 — see the grid margin caveat in docs/howto/figma-design-to-code.md), neutral-400 with the closing sentence white semibold. Type via `.type-body-md- regular` on the element. */ .ap-utma__story__copy { max-width: calc(4 * var(--grid-col-w, 114.66px) + 3 * var(--grid-gutter, 32px)); margin: 96px auto 0; padding: 0; text-align: center; color: var(--text-secondary, #A3A3A3); } .ap-utma__story__copy strong { font-weight: var(--font-weight-semibold, 600); color: var(--text-white, #FFF); } /* Lookbook collage — the four frames' boxes expressed as % of the 1920×1984 composition so the arrangement scales as one picture. The wrapper's aspect-ratio reserves the height; each cover-crops its slot. No z-index on the wrapper so the photos stack against the pin in the section's own context (`--over` lifts two of them above it). Order in markup = order below. */ .ap-utma__story__collage { position: relative; width: 100%; aspect-ratio: 1920 / 1984; margin-top: 200px; } .ap-utma__story__collage img { position: absolute; display: block; max-width: none; object-fit: cover; object-position: 50% 50%; z-index: 0; } .ap-utma__story__collage img.ap-utma__story__photo--over { z-index: 2; } /* 5:594 — 280×390 at (396, 5281) — over the pin */ .ap-utma__story__collage img:nth-child(1) { left: 20.625%; top: 4.99%; width: 14.583%; height: 19.657%; } /* 5:519 — 750×1110 at (1044, 5182) — under the pin */ .ap-utma__story__collage img:nth-child(2) { left: 54.375%; top: 0; width: 39.063%; height: 55.948%; } /* 5:560 — 584×731 at (284, 5875) — under the pin */ .ap-utma__story__collage img:nth-child(3) { left: 14.792%; top: 34.93%; width: 30.417%; height: 36.845%; } /* 5:523 — 475×710 at (1130, 6456) — over the pin */ .ap-utma__story__collage img:nth-child(4) { left: 58.854%; top: 64.214%; width: 24.74%; height: 35.786%; } /* What follows the band covers the pinned text (frame 5:646): opaque ground, lifted above the pin and the over-photos. Footer already paints --footer-background and is `position: relative`. */ .ap-pp__collection--utma { position: relative; z-index: 3; background: var(--basic-black, #000); } body.ap-utma-page .ap-pp__footer { z-index: 3; } /* ── Tenant products list (hero variant) ───────────────────────────── Same slot geometry as the live hero variant (`.ap-tpl--rytas` in product-page-list.css: 400px full-bleed hero, overlay pinned 121px below the header, 24px hero→filter-row) — duplicated under the UTMA modifier because those rules are brand-named. Follow-up: promote them to a neutral `.ap-tpl--hero` and let both brands share them. Differences: the hero holds a still image (no UTMA video exists) and the title keeps the brandbook display face — the frame's Transducer is an unlicensed FONTSPRING DEMO cut and must not ship. Figma 1887:4919 ("Rectangle 111") is the header's only drawn layer: a 1920×400 black rect at 20% opacity sitting on the photo — i.e. a scrim over the whole band. The band's 400px height and its y=72 anchor match the live hero slot exactly. */ .ap-tpl--utma { position: relative; } .ap-tpl--utma .ap-tpl__hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 400px; overflow: hidden; background: var(--gray-1000, #0A0A0A); } /* Artwork — the collab's grunge texture (2048×1152, no focal subject) cover-cropped to the 400px band from the centre. */ .ap-tpl--utma .ap-tpl__hero__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; } /* Scrim — frame: black @ 20%. No 20% token exists; the nearest is the 30% veil (`--backdrop-background-light` → gray-1000-a30), used here rather than a literal. Under the overlay (z 1) so breadcrumb + title sit on the dimmed photo. */ .ap-tpl--utma .ap-tpl__hero::after { content: ''; position: absolute; inset: 0; background: var(--backdrop-background-light, rgba(10, 10, 10, 0.3)); } .ap-tpl--utma .ap-tpl__hero-overlay { position: absolute; top: 121px; left: 0; right: 0; z-index: 1; } .ap-tpl--utma .ap-tpl__hero-overlay .ap-breadcrumbs { margin-top: 0; color: var(--text-white, #FFF); } .ap-tpl--utma .ap-tpl__filter-row { margin-top: 24px; } .ap-tpl--utma .ap-tpl__title { color: var(--text-white, #FFF); } /* Filter row controls — on the dark ground both keep the LIGHT brandbook treatment (Figma 1885:4748 / 1885:4750), i.e. they are exempt from the wrapper's token remap: • view toggle = IconButton/tertiary: 48px round pill, white @ 50% (`--icon-button-tertiary-background-enabled`), #262626 glyph — the neutral list draws these as bare transparent squares, so the pill is the collab-specific part; • filter button = Button/secondary: #F0F0F0 fill, text-primary #191919 label, dark glyph. Re-pinning the two remapped tokens ON the button covers every state, since list.css's brand-wash locks read the same var()s. Glyphs stay the shipped dark SVGs (no invert). */ .ap-tpl--utma .ap-tpl__view-button { border-radius: var(--radius-999, 999px); background: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.5)); } .ap-sandbox .ap-tpl--utma .ap-tpl__view-button:hover, .ap-sandbox .ap-tpl--utma .ap-tpl__view-button:focus, .ap-sandbox .ap-tpl--utma .ap-tpl__view-button:focus-visible, .ap-sandbox .ap-tpl--utma .ap-tpl__view-button:active { background-color: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.5)); } .ap-tpl--utma .ap-tpl__filter-button { --button-secondary-background-enabled: var(--gray-100, #F0F0F0); --text-primary: var(--gray-950, #191919); } /* List cards reuse the mega-menu product card (chrome.css); same dark treatment as the collection cards above. */ .ap-tpl--utma .ap-pp__header__mega__product__title { color: var(--gray-300, #D4D4D4); } .ap-tpl--utma .ap-pp__header__mega__product__media { background-color: var(--gray-900, #262626); } /* The filter drawer is a light panel and lives INSIDE `.ap-tpl`, so the wrapper's token remap would inherit into it. Restore the brandbook defaults on the drawer (values mirror ago-tokens.css). */ .ap-tpl--utma .ap-tpl__filter-modal { --text-primary: var(--gray-950, #191919); --text-secondary: var(--gray-600, #5C5C5C); --text-muted: var(--gray-300, #D4D4D4); --divider-background-light: var(--gray-200, #E4E4E4); --size-selector-outline-enabled: var(--gray-200, #E4E4E4); --size-selector-outline-selected: var(--gray-950, #191919); --button-primary-background-enabled: var(--gray-950, #191919); --button-secondary-background-enabled: var(--gray-100, #F0F0F0); --icon-button-secondary-background-enabled: var(--gray-100, #F0F0F0); --icon-button-secondary-outline-enabled: var(--gray-100, #F0F0F0); --icon-button-secondary-outline-hover: var(--gray-100, #F0F0F0); --icon-button-primary-onlight: var(--gray-900, #262626); } /* ── Mobile (< 768px) ──────────────────────────────────────────────── The frame has NO mobile artboard. Shared components inherit the live mobile rules untouched; only the custom story band needs a fallback so it doesn't break the column — a plain stack, to be replaced when the design team supplies the mobile frame. */ @media (max-width: 768px) { .ap-utma__story { padding: 96px 0 64px; margin-bottom: 0; } .ap-utma__story::after { display: none; } /* No mobile frame → no pin choreography: the band flows as a plain stack (mark, copy, photos). */ .ap-utma__story__pin { position: static; height: auto; padding-top: 0; background: none; } .ap-utma__story__mark { width: calc(100% - 2 * var(--grid-margin, 24px)); } .ap-utma__story__copy { max-width: none; margin-top: 48px; padding: 0 var(--grid-margin, 24px); } .ap-utma__story__collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter, 16px); aspect-ratio: auto; margin-top: 64px; padding: 0 var(--grid-margin, 24px); } .ap-utma__story__collage img, .ap-utma__story__collage img:nth-child(n) { position: static; width: 100%; height: auto; aspect-ratio: 3 / 4; } }