, which is * what makes paragraph alignment work at all — TinyMCE sets `text-align` on a * block, so without one the align buttons have nothing to act on. The cost is * that the saved value now arrives wrapped, and an unqualified
re-inherits
* the base theme's paragraph sizing and margins, silently shrinking the copy it
* is supposed to be carrying. (The same trap has bitten the hero headline and
* the Link Up lead.)
*
* `font: inherit` rather than a restated size, so this can never drift from the
* card typography above it. Edge margins are flattened so a block never adds
* outer spacing the plain-text field did not have, and the gap between blocks is
* restored deliberately. `text-align` is NOT reset — it is the whole point, and
* wp_kses_post() already passes it through safecss_filter_attr.
*
* Mirrors the treatment .dp-syshl__title already carries in
* dedicated-product-system.css, which is where the Highlights title's own
* (higher-specificity) block rules live — deliberately not restated here. */
#dedicated-product .dp-showcase__desc > :first-child { margin-top: 0; }
#dedicated-product .dp-showcase__desc > :last-child { margin-bottom: 0; }
#dedicated-product .dp-showcase__desc p {
margin: 0 0 .6em;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
#dedicated-product .dp-showcase__desc h1,
#dedicated-product .dp-showcase__desc h2,
#dedicated-product .dp-showcase__desc h3,
#dedicated-product .dp-showcase__desc h4,
#dedicated-product .dp-showcase__desc h5,
#dedicated-product .dp-showcase__desc h6 {
margin: 0 0 .3em;
color: inherit;
font-family: inherit;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
#dedicated-product .dp-showcase__desc h1 { font-size: 1.5em; }
#dedicated-product .dp-showcase__desc h2 { font-size: 1.32em; }
#dedicated-product .dp-showcase__desc h3 { font-size: 1.16em; }
#dedicated-product .dp-showcase__desc h4 { font-size: 1em; }
#dedicated-product .dp-showcase__desc h5 { font-size: 0.88em; }
#dedicated-product .dp-showcase__desc h6 { font-size: 0.8em; }
/* Lists are reachable from the toolbar; keep their markers inside the card. */
#dedicated-product .dp-showcase__desc ul,
#dedicated-product .dp-showcase__desc ol {
margin: 0 0 .5em;
padding-left: 1.2em;
}
#dedicated-product .dp-showcase__desc li {
font: inherit;
color: inherit;
}
/* Resting cards read semibold by default (the description body stays regular;
its own bold lead-in is supplied by .dp-showcase__desc-title). */
#dedicated-product .dp-showcase__label {
/* Apple-style high-contrast title: solid bold + tightened tracking so
the title reads distinctly punchier than its regular-weight description. */
font-weight: 700;
letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
/* Desktop card sizing overrides. Placed AFTER the base .dp-showcase__item /
__label rules above so they win on source order (equal specificity) — the
early @media block up top only carries width/max-width, which don't clash. */
#dedicated-product .dp-showcase__item {
padding: 10px 30px 10px 10px;
}
#dedicated-product .dp-showcase__item.is-active {
/* Taller bounding box when opened. */
padding: 24px 28px;
}
#dedicated-product .dp-showcase__label,
#dedicated-product .dp-showcase__desc {
font-size: 17px;
line-height: 1.6;
letter-spacing: -0.01em;
}
}
/* Active-card title: the restated label owns a dedicated row immediately
above the description.
It is marked up as , which the site-wide `strong { font-family:
"Montserrat-Bold" }` rule in style.css would otherwise swap to a separate
heavy Montserrat-Bold typeface — making the active title look like a totally
different, extra-bold font from the resting pill label. `font-family: inherit`
pulls it back onto the exact same Montserrat body face the resting label uses,
and weight 600 / normal style match it, so the transplanted title is
typographically identical to the default card title (full parity). */
#dedicated-product .dp-showcase__desc-title {
display: block;
margin-bottom: .22em;
font-family: inherit;
/* Bold + tightened tracking, matching the resting label so the active
card's restated title stays punchy against its regular-weight description. */
font-weight: 700;
letter-spacing: -0.02em;
font-style: normal;
color: #fff;
}
/* The controller measures the resting and expanded card rectangles and FLIPs
the outer box between those exact dimensions. The body only owns visibility;
avoiding max-height and auto-width interpolation removes the late expansion
correction that previously made the card balloon near the end. */
/* Card copy animates OPACITY AND NOTHING ELSE.
*
* Two transforms used to live here: a 4px lift on activate and, at rest,
* `transform: translate3d(0, 0, 0)`. The lift was a second piece of movement
* layered on top of the container's own animation. The identity transform was
* worse — it is not a no-op, it promotes the body to its own compositing layer
* permanently, so when the reveal finished and the element flipped from
* `transform: none` back to this rule the layer was recreated and the glyphs
* re-rasterized. That is the shift at the very end of the expansion: not a
* reflow, a re-raster. (The same trap is documented on .dp-reveal above.)
*
* With no transform in any state the body is never promoted on geometry, the
* type is rasterized once at its resting position, and the only thing that
* changes is alpha. */
#dedicated-product .dp-showcase__body {
max-height: 0;
width: 0;
opacity: 0;
overflow: hidden;
padding-bottom: 0;
/* NO compositing hint of its own — deliberately.
*
* A permanent translateZ(0) here gave the copy its own hardware layer nested
* inside a card that animates clip-path. When the card's clipping layer is
* torn down at the end of the expansion, a separately-composited child has to
* re-align its sub-pixel coordinates against the screen, and that realignment
* was the last snap. The text is now plain content inside the card and is
* rasterized in the card's own layer, so there is nothing to re-align.
* Acceleration belongs to the container alone (see .is-revealing).
*
* Font smoothing is set once on the page root rather than here, so the
* rasterizer's strategy is identical in every state and cannot change with
* the element's layer status. */
transform: none;
transition: opacity .2s ease;
}
#dedicated-product .dp-showcase__item.is-active .dp-showcase__body {
max-height: none;
width: auto;
min-width: 200px;
opacity: 1;
/* Matches the resting rule exactly. Any difference here would reintroduce a
layer change at the moment .is-active is applied or removed. */
transform: none;
padding-bottom: 2px;
transition: opacity .22s ease .04s;
}
/* Apple "Take a closer look" cross-fade.
*
* The outgoing card used to lose .is-active in the same frame as the incoming
* card gained it, so its description was yanked to opacity:0 / max-height:0 with
* no transition — the old copy vanished while the new copy faded in. .is-fading-out
* is held on the outgoing card for one beat so its text can dissolve first; the
* controller only then swaps the active state. max-height/width stay at their
* open values for that beat, so the box does not collapse under the fading text
* and the FLIP still measures a stable rectangle. */
/* Holds ONLY opacity. It used to pin max-height/width open so the copy could
fade before the state swapped, but the swap is no longer deferred — the card
collapses and its copy dissolves at the same time, and the FLIP needs to see
the real collapsed rectangle in the frame it measures. */
#dedicated-product .dp-showcase__item.is-fading-out .dp-showcase__body {
opacity: 0;
/* Straight dissolve — no drift, and no transform, matching the other two
states so the element's layer status never changes across the cross-fade. */
transform: none;
transition: opacity .28s ease-out;
}
/* The description no longer moves on its own at all. It used to drift -6px
while fading out, which is a second animation on text that is already being
dissolved by its parent — and any transform on a text node is another chance
for it to be rasterized at a fractional offset. The body's alpha carries it. */
#dedicated-product .dp-showcase__media {
position: relative;
z-index: 2; /* above the intro backdrop (z-index 1) */
min-height: 320px;
border-radius: 28px;
overflow: hidden;
/* No fill: the right pane is a transparent window so the looping intro
backdrop (and the panel beneath) show through when no card is selected.
Selected-item media still fills the host on top. */
background: transparent;
}
@media (min-width: 1024px) {
/* Context-aware pane behind the floating card list. Custom consumes the
editor's percentage; Full expands across the complete panel. */
#dedicated-product .dp-showcase__media {
position: absolute;
top: 0; right: 0; bottom: 0;
left: auto;
grid-column: 1 / -1;
grid-row: 1;
width: var(--dp-showcase-media-width, 50%);
min-height: 0;
z-index: 2;
transition: width .7s cubic-bezier(.4,0,.2,1), right .7s cubic-bezier(.4,0,.2,1);
will-change: width;
}
#dedicated-product .dp-showcase__media.is-custom { right: 0; }
#dedicated-product .dp-showcase__media.is-full {
width: 100%;
left: 0;
right: 0;
}
}
#dedicated-product .dp-showcase__media-host {
position: absolute;
inset: 0;
}
#dedicated-product .dp-showcase__media-host > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transform: scale(1.05) translate3d(0, 12px, 0);
transform-origin: center center;
pointer-events: none;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1);
will-change: transform, opacity;
}
#dedicated-product .dp-showcase__media-host > .is-active {
opacity: 1;
transform: scale(1) translate3d(0, 0, 0);
pointer-events: auto;
}
#dedicated-product .dp-showcase__media.allows-vertical-overflow { overflow: visible; }
#dedicated-product .dp-showcase__media.allows-vertical-overflow .dp-showcase__media-host {
top: -7%;
bottom: -7%;
}
/* Same compact ring as the "+" wrapper, but the "×" glyph is scaled UP inside
it for contrast and easier dismiss-target visibility. */
#dedicated-product .dp-showcase__close {
position: absolute;
top: 16px;
right: 16px;
/* Compact dismiss target — small circle, but a bold, slightly enlarged "×". */
width: 34px;
height: 34px;
border-radius: 50%;
box-sizing: border-box;
aspect-ratio: 1 / 1;
overflow: hidden;
border: 0;
background: #29292c;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
appearance: none;
-webkit-appearance: none;
font-size: 28px;
font-weight: 700;
line-height: 1;
cursor: pointer;
z-index: 5;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: background .2s ease, opacity .3s ease, visibility .3s ease;
}
/* The close control only appears once a card is opened. */
#dedicated-product .dp-showcase.is-engaged .dp-showcase__close,
#dedicated-product .dp-showcase__panel.is-engaged .dp-showcase__close {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#dedicated-product .dp-showcase__close:hover { background: #34343a; }
/* ---- Variant switches (color swatch / icon / text) ---- */
#dedicated-product .dp-showcase__variants {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
#dedicated-product .dp-showcase__variant {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255,255,255,0.08);
border: 1px solid transparent;
border-radius: 999px;
color: var(--dp-text-soft);
/* matched to the showcase description ramp (15px base / 17px desktop).
Font-size only — colours, padding and layout are intentionally unchanged. */
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
@media (min-width: 1024px) {
#dedicated-product .dp-showcase__variant { font-size: 17px; }
}
#dedicated-product .dp-showcase__variant:hover { background: rgba(255,255,255,0.14); }
#dedicated-product .dp-showcase__variant.is-active {
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.3);
color: #fff;
}
#dedicated-product .dp-showcase__variant--swatch { padding: 6px; }
#dedicated-product .dp-showcase__swatch {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--swatch, #555);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
display: block;
transition: box-shadow .3s ease;
}
#dedicated-product .dp-showcase__variant--swatch.is-active {
box-shadow: 0 0 0 2px var(--dp-bg), 0 0 0 4px #fff;
}
#dedicated-product .dp-showcase__variant-icon {
width: 20px; height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#dedicated-product .dp-showcase__variant-icon svg { width: 100%; height: 100%; }
/* ---- Cinematic intro backdrop + staggered card slide-in ----
* The intro media (looping muted video, or a static image) is a persistent
* full-panel BACKDROP at the bottom of the stack. The right media pane is
* transparent, so this shows through whenever no card is selected — i.e. it is
* the default state and re-appears when the visitor closes a card. The cards
* float above it. For a video, cards are click-locked for the first 1.0s (.is-
* locked) then slide in and become interactive while the video keeps looping. */
/* Resting right-pane media (all viewports). Fills the media pane while idle and
* fades out the instant a card opens (.is-engaged), restoring when all close. */
#dedicated-product .dp-showcase__default {
position: absolute;
inset: 0;
z-index: 2; /* sits above the pane edges so an enlarged image overspills on top */
overflow: visible; /* let a zoomed default media extend past the frame */
border-radius: inherit;
opacity: 1;
visibility: visible;
pointer-events: none;
transform: scale(1) translate3d(0, 0, 0);
transition: opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1),
visibility 0s linear 0s;
will-change: transform, opacity;
display: none;
}
#dedicated-product .dp-showcase__default.is-current { display: block; }
#dedicated-product .dp-showcase__default-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transform: none;
transform-origin: center center;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__default {
opacity: 0;
visibility: hidden;
transform: scale(1.05) translate3d(0, 12px, 0);
transition: opacity .7s cubic-bezier(.16,1,.3,1),
transform .7s cubic-bezier(.16,1,.3,1),
visibility 0s linear .7s;
}
#dedicated-product .dp-showcase__intro {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
background: var(--dp-bg);
pointer-events: none;
}
#dedicated-product .dp-showcase__intro-video,
#dedicated-product .dp-showcase__intro-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Interaction lockout while the intro video runs its opening second. */
#dedicated-product .dp-showcase__layout.is-locked .dp-showcase__list {
pointer-events: none;
}
/* ================================================================== *
* Showcase entrance — reference style guide
*
* Replaces the former `.is-intro` / `.is-cards-in` slide-in (cards drifted in
* from translateX(-40px) on one shared curve, right pane static).
*
* The cards now arrive as compressed circles at icon width and expand to their
* OWN width; the middle card lands first on a spring, then the rest cascade.
* Per-card widths cannot be expressed in CSS: every label is admin copy of a
* different length, and `width` will not animate from or to `fit-content`. The
* controller measures each resting card once and writes --dp-card-w / --dp-card-h,
* which is also why the collapsed circle is --dp-card-h rather than a magic
* number — it has to equal the card's own height to actually read as a circle
* across the desktop/compact padding change.
*
* Every animated property here is compositor-friendly (width is the one
* exception and is deliberately confined to the entrance, never to the
* interactive open/close path, which stays on the FLIP transform).
* ================================================================== */
#dedicated-product .dp-showcase__layout {
/* The reference guide's two curves. The spring overshoots past 1 — that
overshoot is the whole character of the expansion, so it must not be
swapped for the page's standard --dp-carousel-ease. */
--dp-showcase-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dp-showcase-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Cascade pacing. --dp-card-step (the card's index in VISIBLE order) is
written by the controller; these two turn it into the pair of delays each
card needs. --dp-label-lead is the beat between a card starting to grow
and its label fading up, measured from THAT card's own start — so it has
to be added to the card's delay rather than authored as a second series.
CASCADE_STEP in dedicated-product.js must stay equal to the step value. */
--dp-cascade-step: .06s;
--dp-label-lead: .2s;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
/* Armed: hidden from the moment the page loads, before the section can be
scrolled to. Opacity only — the cards keep their natural layout so the
controller can still measure their target widths. Without this the stack
painted normally and was then yanked out of view the instant the panel
crossed the observer, which read as a flash-then-hide. */
#dedicated-product .dp-showcase__layout.is-entrance-armed .dp-showcase__item {
opacity: 0;
}
/* Parked state: an icon-width circle, scaled out and nudged left.
The locked HEIGHT is not decoration — it is what makes the whole effect
possible. Squeezing the box to icon width with the height left to `auto`
reflows the label to one character per line, so each card grows to
hundreds of pixels tall, the list balloons (measured: 3314px), and the
absolutely-positioned media pane is dragged far below the fold — the
panel renders as an empty void for the length of the entrance. Pinning
the height to the measured resting height, and holding the label on one
line, is the same guard the reference guide gets from its fixed 48px
pill and `white-space: nowrap` label. */
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__item {
width: var(--dp-card-h, 45px);
height: var(--dp-card-h, 45px);
opacity: 0;
transform: translateX(-20px) scale(0);
will-change: width, transform, opacity;
transition:
width .5s var(--dp-showcase-spring),
transform .38s ease-out,
opacity .28s ease-out;
}
/* Content must not re-lay-out while the box is narrow: the row keeps its
single line, the icon keeps its full size, and the label runs off into
the card's own overflow:hidden instead of wrapping. */
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__row-head {
flex-wrap: nowrap;
height: 100%;
}
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__icon {
flex: 0 0 auto;
}
/* The label is held at 0 until the box has most of its width, so the
width run happens behind an invisible element rather than as visible
text jitter. The icon stays lit throughout.
The lead here is measured from the moment THAT CARD starts expanding, so
the per-card stagger below has to be added on top of it. With a flat lead
the last card's label reached full opacity while its box was still a
0-19px circle, printing the text straight through the clipped edge and
only looking correct once the cascade caught up. */
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__label {
white-space: nowrap;
opacity: 0;
transition: opacity .22s ease var(--dp-label-lead);
}
/* Stage 1 — the anchor card arrives alone as a bouncing dot. */
@keyframes dp-showcase-anchor-arrival {
0% { opacity: 0; transform: translateX(-30px) scale(0.2); }
50% { opacity: 1; transform: translateX(10px) scale(1.35); }
75% { opacity: 1; transform: translateX(-3px) scale(0.92); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__item.is-anchor-arriving {
animation: dp-showcase-anchor-arrival .5s var(--dp-showcase-bounce) forwards;
}
/* Stage 2 — the anchor expands to its own measured width. */
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__item.is-anchor-expanded {
width: var(--dp-card-w);
opacity: 1;
/* Beats the arrival keyframe's forwards fill, which still holds the
element at its final transform. */
transform: translateX(0) scale(1) !important;
transition: width .5s var(--dp-showcase-spring);
}
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__item.is-anchor-expanded .dp-showcase__label {
opacity: 1;
}
/* Stage 3 — the remaining cards cascade out to their own widths. */
#dedicated-product .dp-showcase__layout.is-entrance.is-cards-cascading .dp-showcase__item:not(.is-anchor) {
width: var(--dp-card-w);
opacity: 1;
transform: translateX(0) scale(1);
}
#dedicated-product .dp-showcase__layout.is-entrance.is-cards-cascading .dp-showcase__label {
opacity: 1;
}
/* Stagger. Each card's width/transform/opacity share one delay, and its
label carries the SAME delay plus --dp-label-lead, so every card reveals
its text at the same point in its OWN expansion rather than at a point in
the cascade's. Without the paired label delay the later cards print their
labels through a box that has not started growing yet.
Keyed on --dp-card-step, the card's index in visible order, which the
controller writes during its measure pass. This replaced ten authored
:nth-child(2..6) rules, which were wrong on two counts: :nth-child counts
DOM position, so a view-tab filter (hidden items keep their positions) or
a drag-reorder in the editor handed the visible cards a scattered subset
of the series; and there were only five slots, so a sixth-and-later
visible card matched nothing and fired at delay 0 — ahead of the cards it
was supposed to follow. Computing from the index removes both the
ordering assumption and the ceiling. */
#dedicated-product .dp-showcase__layout.is-entrance.is-cards-cascading .dp-showcase__item:not(.is-anchor) {
transition-delay: calc(var(--dp-card-step, 0) * var(--dp-cascade-step));
}
#dedicated-product .dp-showcase__layout.is-entrance.is-cards-cascading .dp-showcase__item:not(.is-anchor) .dp-showcase__label {
transition-delay: calc(var(--dp-card-step, 0) * var(--dp-cascade-step) + var(--dp-label-lead));
}
/* The anchor runs its own two-stage arrival, so its label must not inherit
a cascade delay — it reveals against .is-anchor-expanded instead.
.3s, not the .2s lead the cascading cards get: the original pair was
.5s against a .85s width run, because at the plain lead the box measured
228.7px against a 229px content requirement and the final character landed
exactly on the clipped edge. What matters is the FRACTION of the run, not
the wall-clock value, so shortening the run to .5s carries the anchor's
lead to .3s — still past the spring's overshoot peak, where there is room
to spare. */
#dedicated-product .dp-showcase__layout.is-entrance .dp-showcase__item.is-anchor .dp-showcase__label { transition-delay: .3s; }
/* Right pane: blur-to-focus. The resting media is the reference's product
shot; it resolves from blur behind the progress line.
`transition: none` while parking is the point — with a transition here the
media would animate INTO the blur over 0.8s on scroll-into-view, which
reads as the image degrading. It has to start blurred and only the
resolve is animated. */
#dedicated-product .dp-showcase__media.is-entrance .dp-showcase__default-media {
/* 16px, not 25px. The resolve is now gated on the real decode and runs in
0.35s rather than 0.8s, and a 25px radius cannot cross that distance
without reading as a jump — it also costs materially more to composite
across a full-height pane. */
filter: blur(16px);
transform: scale(1.05);
transition: none;
/* Promoted only for the duration of the entrance; the controller drops
.is-entrance on settle, which takes the layer back with it. */
will-change: filter, transform;
}
#dedicated-product .dp-showcase__media.is-entrance.is-media-loaded .dp-showcase__default-media {
filter: blur(0);
transform: scale(1);
transition: filter .35s ease-out, transform .35s ease-out;
}
}
/* Progress line under the resting media. Present only while the entrance runs;
the controller removes it from the flow afterwards. Kept outside the
reduced-motion guard so the bar itself is never left half-drawn — it is
simply never shown when the entrance is skipped. */
#dedicated-product .dp-showcase__loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 120px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
overflow: hidden;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
#dedicated-product .dp-showcase__media.is-entrance .dp-showcase__loader {
opacity: 1;
}
#dedicated-product .dp-showcase__media.is-entrance.is-media-loaded .dp-showcase__loader {
opacity: 0;
}
#dedicated-product .dp-showcase__loader-fill {
display: block;
width: 0;
height: 100%;
background: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
/* The bar is a progress indication, not a fixed animation: it has to be able
to complete inside the shortest resolve the entrance now allows (the 260ms
floor), or it would still be visibly filling when the image is already
sharp. */
transition: width .5s cubic-bezier(0.22, 1, 0.36, 1);
}
#dedicated-product .dp-showcase__media.is-loader-filling .dp-showcase__loader-fill {
width: 100%;
}
/* ------------------------------------------------------------------ *
* 5. FAQ
* ------------------------------------------------------------------ */
#dedicated-product .dp-faq {
position: relative;
background: var(--dp-bg);
padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-faq__fade {
position: absolute;
top: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(to bottom, var(--dp-surface), var(--dp-bg));
pointer-events: none;
}
#dedicated-product .dp-faq__title {
position: relative;
margin: 0 0 clamp(32px, 5vw, 56px);
font-size: clamp(28px, 4vw, 48px);
font-weight: 700;
letter-spacing: -0.01em;
text-align: center;
}
#dedicated-product .dp-faq__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
#dedicated-product .dp-faq__item details {
background: rgba(255,255,255,0.04);
border: 1px solid var(--dp-border);
border-radius: 16px;
padding: 20px 24px;
transition: background .2s ease;
}
#dedicated-product .dp-faq__item details[open] {
background: rgba(255,255,255,0.07);
border-color: var(--dp-accent);
}
#dedicated-product .dp-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 600;
color: #fff;
cursor: pointer;
list-style: none;
}
#dedicated-product .dp-faq__question::-webkit-details-marker { display: none; }
#dedicated-product .dp-faq__q-icon {
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
#dedicated-product .dp-faq__item details[open] .dp-faq__q-icon {
transform: rotate(45deg);
border-color: var(--dp-accent);
color: var(--dp-accent);
}
#dedicated-product .dp-faq__answer {
margin-top: 16px;
color: var(--dp-text-soft);
font-size: 16px;
line-height: 1.6;
}
#dedicated-product .dp-faq__answer p { margin: 0 0 12px; }
#dedicated-product .dp-faq__answer p:last-child { margin-bottom: 0; }
#dedicated-product .dp-faq__answer a { color: var(--dp-accent); text-decoration: underline; }
/* ------------------------------------------------------------------ *
* 6. Request Support CTA (replaces FAQ in the page flow — )
* ------------------------------------------------------------------ */
#dedicated-product .dp-cta {
position: relative;
background: var(--dp-bg);
padding: var(--dp-section-gap) 0;
}
#dedicated-product .dp-cta__fade {
position: absolute;
top: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(to bottom, var(--dp-surface), var(--dp-bg));
pointer-events: none;
}
#dedicated-product .dp-cta__inner {
position: relative;
text-align: center;
border-top: 1px solid var(--dp-border);
padding-top: clamp(40px, 6vw, 72px);
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
#dedicated-product .dp-cta__title {
margin: 0;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.01em;
}
#dedicated-product .dp-cta__desc {
margin: 0;
max-width: 46rem;
color: var(--dp-text-soft);
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.5;
}
/* 1:1 clone of the game hero "Shop Now" button below "Available Now" —
.button-red-shadowed plus its hero-stack overrides (css/style.css:506 & 917).
Effective: Montserrat-Bold 500, 1.05rem, 0.85rem×1.6rem padding, 8px radius,
soft drop shadow, 15–22rem width, invert-on-hover. Centred in the band
rather than floated like the original. */
#dedicated-product .dp-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 8px;
width: auto;
min-width: 15rem;
max-width: min(100%, 22rem);
padding: 0.85rem 1.6rem;
background-color: #D90500;
color: #fff;
font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
border-radius: 8px;
/* Shared red CTA outline (full size — this is a 15rem-wide primary CTA, same
footprint as .button-red-shadowed). Reserved transparent over the red fill
at rest, red once the button inverts to white. box-sizing is border-box for
everything under .dp-page, so the footprint is unchanged. */
border: var(--renewal-cta-border-width, 2px) solid transparent;
box-shadow: 0 8px 18px rgba(3, 3, 3, 0.18);
white-space: normal;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#dedicated-product .dp-cta__btn:hover {
background-color: #fff;
color: #D90500;
border-color: var(--renewal-cta-border-color, #D90500);
}
/* ------------------------------------------------------------------ *
* 7. Bottom Hero
* ------------------------------------------------------------------ */
#dedicated-product .dp-bottom-hero {
position: relative;
width: 100%;
max-width: none;
min-height: clamp(300px, 40vh, 400px);
margin: 0;
padding: 0;
overflow: hidden;
/* Match the neighbouring surface while media loads or is unavailable. */
background: var(--dp-surface);
}
#dedicated-product .dp-bottom-hero::after {
content: '';
position: absolute;
inset-inline: 0;
width: 100%;
bottom: 0;
height: 1px;
background: rgba(255, 255, 255, 0.2);
pointer-events: none;
z-index: 3;
}
/* Media bleeds across the section; the copy remains bounded independently. */
#dedicated-product .dp-bottom-hero__media {
position: absolute;
inset: 0;
width: 100%;
z-index: 0;
overflow: hidden;
}
/* Framing parity with the computed /en/about-products/ cascade: the image
keeps its natural aspect ratio at full width and the media band clips the
surplus from the top. The editor scale adds proportional zoom from the same
top-center anchor. */
#dedicated-product .dp-bottom-hero__img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
object-position: 50% 50%;
transform: scale(var(--dp-bottom-hero-image-scale, 1));
transform-origin: 50% 0;
}
/* Shade the complete media band, including ultrawide gutters. */
#dedicated-product .dp-bottom-hero__shade {
position: absolute;
inset: 0;
width: 100%;
z-index: 1;
background: linear-gradient(90deg, rgba(3, 3, 3, 0.86) 0%, rgba(3, 3, 3, 0.64) 52%, rgba(3, 3, 3, 0.48) 100%);
}
/* The photo behind this (.dp-bottom-hero__media) stays full-bleed by design;
only the headline/CTA block is pulled onto the shared column. */
#dedicated-product .dp-bottom-hero__inner {
position: relative;
z-index: 2;
max-width: var(--dp-content-max);
min-height: inherit;
margin: 0 auto;
padding: 3.25rem var(--dp-margin) 2.25rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
#dedicated-product .dp-bottom-hero__headline {
margin: 0 0 1rem;
max-width: 16ch;
font-size: clamp(2rem, 3vw + 0.7rem, 3.25rem);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.01em;
text-align: left;
text-wrap: balance;
}
#dedicated-product .dp-bottom-hero__headline--inline {
max-width: none;
width: max-content;
font-size: clamp(2rem, 3.6vw + 0.5rem, 3.65rem);
font-weight: 600;
white-space: nowrap;
}
#dedicated-product .dp-rotating-slot {
display: inline-grid;
/* Without this, every word (all sharing grid-area 1/1) stretches to the
slot's current width. The JS measure pass then reads that stretched box
back and latches each slot to its widest-ever value, leaving a gap after
the shorter words. Sizing items to their content keeps the measurement
honest. */
justify-items: start;
overflow: hidden;
vertical-align: baseline;
line-height: inherit;
text-align: left;
transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
#dedicated-product .dp-rotating-word {
grid-area: 1 / 1;
white-space: nowrap;
color: var(--dp-accent);
transform: translateY(110%);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
#dedicated-product .dp-rotating-word--active {
transform: translateY(0);
}
#dedicated-product .dp-rotating-word--exit-up {
transform: translateY(-110%);
}
#dedicated-product .dp-bottom-hero__ctas {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.65rem;
}
/* ---- Bottom Hero: Associations ----
1:1 port of .exa-footer-hero__assoc-* from assets/css/exa.css.
One rule from the source is intentionally NOT carried over: an
`img:nth-child(3)` invert filter, which is tuned to the specific third logo
on the reference page and would misfire on any other logo set or order. */
/* The overlay is a sibling of .dp-bottom-hero__inner, so offset it by the
content gutter while the media continues to bleed beneath it. */
#dedicated-product .dp-bottom-hero__assoc-overlay {
position: absolute;
right: calc(var(--dp-column-gutter) + clamp(1rem, 4vw, 4rem));
bottom: clamp(1rem, 5vh, 2.25rem);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
width: fit-content;
max-width: min(34rem, 48vw);
}
#dedicated-product .dp-bottom-hero__assoc-text {
margin: 0;
font-size: clamp(0.92rem, 0.85vw + 0.4rem, 1.05rem);
font-weight: 400;
line-height: 1.45;
letter-spacing: 0.01em;
color: rgba(186, 186, 186, 0.78);
text-align: center;
width: 100%;
max-width: 100%;
}
#dedicated-product .dp-bottom-hero__assoc-logos {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
#dedicated-product .dp-bottom-hero__assoc-logos img {
height: clamp(2.35rem, 3.8vw, 3.8rem);
width: auto;
max-width: 9.5rem;
object-fit: contain;
opacity: 0.72;
filter: grayscale(1) saturate(0) brightness(0.82) contrast(1.05);
transition: filter 0.28s ease, opacity 0.28s ease;
}
/* JAIA is rendered from an actual transparent white asset. Keep it out of the
generic opaque-logo filter so its transparent pixels stay transparent. */
#dedicated-product .dp-bottom-hero__assoc-logos img.is-jaia {
filter: none;
mix-blend-mode: normal;
}
/* ---- Showcase: mobile / reduced-motion fallbacks ---- */
@media (max-width: 1023px) {
#dedicated-product .dp-showcase__media,
#dedicated-product .dp-showcase__media.is-full { width: 100%; min-height: 320px; }
/* Keep the same responsive media band as /about-products/ so object-fit
computes the same crop at every viewport. */
#dedicated-product .dp-bottom-hero {
height: auto;
min-height: clamp(300px, 44vh, 380px);
}
#dedicated-product .dp-bottom-hero__shade {
background: linear-gradient(180deg, rgba(3, 3, 3, 0.84) 0%, rgba(3, 3, 3, 0.58) 50%, rgba(3, 3, 3, 0.78) 100%);
}
#dedicated-product .dp-bottom-hero__inner {
min-height: auto;
align-items: center;
text-align: center;
/* Bottom padding carries the CTA→associations separation, mirroring how
the reference page splits it (~48px inside the inner + a 12px margin
on the block itself) rather than one large margin. */
padding: 2.3rem var(--dp-margin) 3rem;
}
#dedicated-product .dp-bottom-hero__headline,
#dedicated-product .dp-bottom-hero__headline--inline {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: none;
}
#dedicated-product .dp-bottom-hero__ctas {
justify-content: center;
}
/* Associations un-pin from the corner and stack under the CTAs, matching
the reference page's <=1024px treatment. */
#dedicated-product .dp-bottom-hero__assoc-overlay {
position: relative;
right: auto;
bottom: auto;
margin: 0.75rem auto 1rem;
max-width: 90%;
}
#dedicated-product .dp-bottom-hero__assoc-logos {
flex-wrap: wrap;
}
}
/* ---- Bottom Hero headline: responsive ladder ----
Ported breakpoint-for-breakpoint from the reference page so the rotating
inline headline always fits the viewport. The base rule is nowrap +
max-content (a single unbroken line, which is what desktop wants); without
this ladder that line simply ran off-screen on phones. */
@media (max-width: 768px) {
#dedicated-product .dp-bottom-hero {
min-height: 320px;
}
#dedicated-product .dp-bottom-hero__headline {
font-size: clamp(1.65rem, 7.2vw, 2.4rem);
max-width: 14ch;
}
#dedicated-product .dp-bottom-hero__headline--inline {
font-size: clamp(1.6rem, 7.4vw, 2.45rem);
}
}
/* 40em is deliberate, not arbitrary: js/dedicated-product.js uses the very
same (max-width: 40em) query to stop pinning per-word slot widths. Wrapping
must switch on at exactly the point the JS lets go, or the two disagree. */
@media (max-width: 40em) {
#dedicated-product .dp-bottom-hero__headline--inline {
white-space: normal;
text-wrap: balance;
width: auto;
}
}
@media (max-width: 480px) {
#dedicated-product .dp-bottom-hero {
min-height: 340px;
}
#dedicated-product .dp-bottom-hero__headline {
width: 100%;
max-width: none;
font-size: clamp(1.6rem, 7vw, 2.2rem);
text-align: center;
margin-bottom: 1rem;
}
#dedicated-product .dp-bottom-hero__headline--inline {
width: fit-content;
max-width: 100%;
font-size: clamp(1.6rem, 7.2vw, 2.25rem);
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
/* Mobile-only: the rotating headline and CTA buttons share one column start. */
@media (max-width: 768px) {
#dedicated-product .dp-bottom-hero__headline--inline,
#dedicated-product .dp-bottom-hero__ctas {
width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
#dedicated-product .dp-bottom-hero__headline--inline {
text-align: left;
}
#dedicated-product .dp-bottom-hero__ctas {
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
#dedicated-product .dp-showcase__default {
transform: translate3d(0, 0, 0) !important;
will-change: auto;
}
#dedicated-product .dp-showcase__media-host > * {
transition: none;
will-change: auto;
}
#dedicated-product .dp-showcase__media,
#dedicated-product .dp-showcase__item,
#dedicated-product .dp-showcase__body,
#dedicated-product .dp-showcase__icon,
#dedicated-product .dp-rotating-slot,
#dedicated-product .dp-rotating-word { transition: none; }
}
/* Controls wrapper is an invisible box on desktop — its children (nav + list)
behave exactly as before. The mobile layout turns it into the label rail +
description deck beneath the media pane. */
#dedicated-product .dp-showcase__controls,
#dedicated-product .dp-showcase__deck { display: contents; }
#dedicated-product .dp-showcase__mobile-description[hidden] { display: none; }
/* =======================================================================
Showcase — mobile "closer look" rail (≤768px)
Media first, horizontally swipeable label rail second, and the active
description deck below. Chevrons stay hidden until a label is active, then
slide partially off-canvas to mimic Apple's clipped edge treatment.
======================================================================= */
@media (max-width: 768px) {
#dedicated-product .dp-showcase { padding: 0; background: #000; }
#dedicated-product.dp-page .dp-showcase .dp-container--showcase {
max-width: none;
padding: 0;
}
#dedicated-product.dp-page .dp-showcase__title,
#dedicated-product.dp-page .dp-showcase__title.dp-reveal {
display: block;
margin: 0;
padding: 16px var(--dp-margin) 10px;
/* Inherit the canonical section-title size from the base rule
(clamp(28px, 4vw, 48px), see ~L544) instead of the legacy
clamp(20px, 5vw, 26px) that shrank this heading below every other
landing section on mobile. line-height matches .dp-features__title. */
line-height: 1.2;
text-align: left;
opacity: 1;
transform: none;
}
#dedicated-product.dp-page .dp-showcase__panel,
#dedicated-product.dp-page .dp-showcase__panel.dp-reveal,
#dedicated-product.dp-page .dp-showcase__panel.dp-reveal.is-in-view {
background: #000;
border: 0;
border-radius: 0;
padding: 0 0 28px;
position: relative;
opacity: 1;
transform: none;
overflow: hidden;
}
#dedicated-product .dp-showcase__layout {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
}
#dedicated-product .dp-showcase__intro {
display: block;
z-index: 0;
transition: opacity .35s ease;
}
#dedicated-product .dp-showcase__panel.has-mobile-default .dp-showcase__intro {
display: none;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__intro { opacity: 0; }
#dedicated-product .dp-showcase__intro-video,
#dedicated-product .dp-showcase__intro-img { object-fit: contain; }
#dedicated-product .dp-showcase__media,
#dedicated-product .dp-showcase__media.is-custom,
#dedicated-product .dp-showcase__media.is-full {
order: 1;
position: relative;
width: 100%;
min-height: clamp(340px, 68vw, 520px);
aspect-ratio: 16 / 10;
flex: 0 0 auto;
border-radius: 0;
background: transparent;
z-index: 1;
}
#dedicated-product .dp-showcase__media-host {
position: absolute;
inset: 0 4px;
}
#dedicated-product .dp-showcase__media-host.is-idle {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
#dedicated-product .dp-showcase__media-host > * { object-fit: contain; }
#dedicated-product .dp-showcase__close {
top: 10px;
right: var(--dp-margin);
width: 42px;
height: 42px;
padding: 0;
box-sizing: border-box;
aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 0;
appearance: none;
-webkit-appearance: none;
font-size: 30px;
font-weight: 700;
line-height: 1;
background: #29292c;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 6;
}
#dedicated-product .dp-showcase.is-engaged .dp-showcase__close,
#dedicated-product .dp-showcase__panel.is-engaged .dp-showcase__close {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#dedicated-product .dp-showcase__nav {
display: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
height: 48px;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 5;
transition: opacity .2s ease;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav {
display: block;
opacity: 1;
visibility: visible;
pointer-events: none;
}
#dedicated-product .dp-showcase__nav-btn,
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav-btn {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 0;
margin: 0;
background: #29292c;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-50%);
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav-btn {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav-btn:disabled,
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__nav-btn[aria-disabled="true"] {
background: #151517;
color: #55555b;
opacity: .72;
pointer-events: none;
}
#dedicated-product .dp-showcase__nav-btn[data-dir="-1"] {
left: 0;
}
#dedicated-product .dp-showcase__nav-btn[data-dir="1"] {
right: 0;
}
/* Mobile prev/next is horizontal: hide the vertical SVG chevrons and fall
back to the ‹ › guillemet control drawn via ::before below. */
#dedicated-product .dp-showcase__chevron {
display: none;
}
#dedicated-product .dp-showcase__nav-btn::before {
display: block;
font-size: 30px;
font-weight: 400;
line-height: 1;
position: relative;
top: -1px;
}
#dedicated-product .dp-showcase__nav-btn[data-dir="-1"]::before {
content: "\2039";
transform: translateX(-1px);
}
#dedicated-product .dp-showcase__nav-btn[data-dir="1"]::before {
content: "\203A";
transform: translateX(1px);
}
#dedicated-product .dp-showcase__controls {
order: 2;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 var(--dp-margin);
position: relative;
z-index: 3;
overflow: visible;
}
#dedicated-product .dp-showcase__deck {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
width: 100%;
overflow: visible;
}
#dedicated-product .dp-showcase__list {
margin: 0;
padding: 0 0 2px;
max-width: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
touch-action: pan-x;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--dp-margin);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
white-space: normal;
width: 100%;
}
#dedicated-product .dp-showcase__list::-webkit-scrollbar { display: none; }
#dedicated-product .dp-showcase__item,
#dedicated-product .dp-showcase__item:hover,
#dedicated-product .dp-showcase__item:focus-visible {
display: block;
flex: 0 0 auto;
width: min(78vw, 320px);
max-width: min(78vw, 320px);
background: transparent;
border: 0;
padding: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
#dedicated-product .dp-showcase__row-head {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 10px 18px;
background: #29292c;
border-radius: 24px;
white-space: normal;
overflow: visible;
}
#dedicated-product .dp-showcase__label {
font-size: 13px;
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
#dedicated-product .dp-showcase__item.is-active,
#dedicated-product .dp-showcase__item.is-active:hover {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
#dedicated-product .dp-showcase__item.is-active .dp-showcase__row-head {
display: inline-flex;
}
#dedicated-product .dp-showcase__item.is-active .dp-showcase__row-head {
background: #29292c;
}
#dedicated-product .dp-showcase__body { display: none; }
#dedicated-product .dp-showcase__mobile-description {
display: none !important;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__list {
overflow: hidden;
scroll-snap-type: none;
width: 100%;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__controls {
padding-left: 56px;
padding-right: 56px;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item {
display: none;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active,
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active:hover,
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active:focus-visible {
display: block;
flex: 0 1 auto;
width: 100%;
max-width: 100%;
margin-inline: auto;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__row-head {
display: none;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__body {
display: block;
max-height: none;
width: 100%;
min-width: 0;
height: auto !important;
opacity: 1;
overflow: visible;
box-sizing: border-box;
margin-inline: 0;
padding: 14px 18px;
background: #29292c;
border-radius: 24px;
text-align: left;
touch-action: pan-x;
word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
animation: dp-showcase-mobile-card-in .5s cubic-bezier(.16, 1, .3, 1);
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__desc {
margin: 0;
font-size: 14px;
line-height: 1.5;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__variants {
justify-content: flex-start;
margin-top: 12px;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__variants--three {
flex-wrap: nowrap;
gap: clamp(4px, 1.5vw, 8px);
width: 100%;
}
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__variants--three > .dp-showcase__variant {
flex: 1 1 0;
justify-content: center;
min-width: 0;
padding: 8px clamp(5px, 2vw, 10px);
gap: 4px;
font-size: clamp(11px, 3.2vw, 14px);
white-space: nowrap;
}
}
@keyframes dp-showcase-mobile-card-in {
from { opacity: 0; transform: translate3d(0, 6px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
#dedicated-product .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__body {
animation: none;
}
}
@media (min-width: 48.0625rem) {
#dedicated-product .dp-subnav__brand {
display: inline-flex !important;
}
#dedicated-product .dp-subnav__brand-text {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
#dedicated-product .dp-subnav__mobile-label {
display: none !important;
}
}
/* ==========================================================================
Injected info-card sections — Location Consideration / Choosing Games /
Accessories. Rendered below the Showcase. Glass icon cards (Location +
Games) and Apple-style image cards (Accessories), all on the page grey
surface with the brand crimson accent.
========================================================================== */
#dedicated-product .dp-infocards {
background: var(--dp-surface);
padding: clamp(56px, 8vw, 112px) 0;
}
#dedicated-product .dp-infocards--locations .dp-container {
max-width: var(--dp-baseline-max);
}
#dedicated-product .dp-infocards__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: clamp(28px, 4vw, 56px);
}
#dedicated-product .dp-infocards__intro { max-width: 48rem; }
#dedicated-product .dp-infocards__eyebrow {
display: block;
margin-bottom: 12px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #D90500;
}
#dedicated-product .dp-infocards__title {
margin: 0;
font-size: clamp(28px, 4vw, 48px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
/* `a.` + `.dp-page` raises specificity above `#dedicated-product.dp-page a
{ color: inherit }`, which would otherwise force these links white. */
#dedicated-product.dp-page a.dp-infocards__headlink {
display: inline-flex;
align-items: center;
gap: 4px;
color: #D90500;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
#dedicated-product.dp-page a.dp-infocards__headlink:hover { text-decoration: underline; }
#dedicated-product .dp-infocards__chevron { font-size: 1.1em; line-height: 1; }
#dedicated-product .dp-infocards__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--dp-gutter);
}
#dedicated-product .dp-infocard {
display: flex;
flex-direction: column;
height: 100%;
transition: transform .4s ease;
}
#dedicated-product .dp-infocard:hover { transform: translateY(-4px); }
/* Glass icon card (Location / Games) */
#dedicated-product .dp-infocard--icon {
padding: clamp(28px, 3vw, 48px);
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid var(--dp-border);
border-radius: 28px;
backdrop-filter: blur(40px);
}
#dedicated-product .dp-infocard__icon {
width: 42px;
height: 42px;
margin-bottom: 24px;
color: var(--dp-text);
}
#dedicated-product .dp-infocard__icon svg { width: 100%; height: 100%; }
/* Apple-style image card (Accessories) */
#dedicated-product .dp-infocard__media {
aspect-ratio: 0.73;
overflow: hidden;
border-radius: 24px;
background: #0e0e0e;
margin-bottom: 20px;
}
#dedicated-product .dp-infocard__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
#dedicated-product .dp-infocard--image:hover .dp-infocard__media img { transform: scale(1.04); }
#dedicated-product .dp-infocard--image .dp-infocard__body { padding: 0 4px; }
#dedicated-product .dp-infocard__title {
margin: 0 0 12px;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 600;
line-height: 1.3;
}
#dedicated-product .dp-infocard__text {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--dp-text-soft);
}
#dedicated-product.dp-page a.dp-infocard__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 24px;
color: #D90500;
font-weight: 600;
text-decoration: none;
}
#dedicated-product.dp-page a.dp-infocard__link:hover { text-decoration: underline; }
#dedicated-product .dp-infocards__carousel-shell { display: block; }
#dedicated-product .dp-infocards--accessories .dp-infocard {
border-radius: 24px;
}
#dedicated-product .dp-infocards--accessories .dp-infocard:hover {
transform: none;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__media {
margin-bottom: 16px;
border-radius: 24px;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__media img {
transition: none;
}
#dedicated-product .dp-infocards--accessories .dp-infocard--image:hover .dp-infocard__media img {
transform: none;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__title,
#dedicated-product .dp-infocards--accessories .dp-infocard__text {
font-size: 16px;
line-height: 1.55;
text-align: left;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__title {
margin: 0;
color: #FFFFFF;
font-weight: 600;
}
#dedicated-product .dp-infocards--accessories .dp-infocard__text {
margin: 0;
color: var(--dp-text-soft);
}
#dedicated-product .dp-infocards--accessories .dp-infocard__link {
margin-top: 8px;
align-self: flex-start;
font-weight: 400;
}
@media (max-width: 600px) {
#dedicated-product .dp-infocards__header { flex-direction: column; align-items: flex-start; }
}
/* ---- Info-card carousel (shown only when > 3 cards) ---------------------- */
#dedicated-product .dp-infocards--carousel .dp-infocards__grid {
display: flex;
grid-template-columns: none;
gap: var(--dp-gutter);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
/* room so card hover-lift + focus ring aren't clipped by overflow */
padding-bottom: 4px;
}
#dedicated-product .dp-infocards--carousel .dp-infocards__grid::-webkit-scrollbar { display: none; }
#dedicated-product .dp-infocards--carousel .dp-infocards__grid:focus-visible { outline: 2px solid var(--dp-text); outline-offset: 4px; }
#dedicated-product .dp-infocards--carousel .dp-infocard {
flex: 0 0 calc((100% - 2 * var(--dp-gutter)) / 3); /* 3 per view on desktop */
scroll-snap-align: start;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__carousel-shell {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--dp-gutter);
align-items: start;
overflow: hidden;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__grid {
grid-column: 1 / -1;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__grid.is-looping {
overflow: visible;
scroll-behavior: auto;
scroll-snap-type: none;
padding-bottom: 0;
touch-action: pan-y;
will-change: transform;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__grid.is-looping:focus-visible {
outline: none;
}
@media (max-width: 900px) {
#dedicated-product .dp-infocards--carousel .dp-infocard { flex-basis: calc((100% - var(--dp-gutter)) / 2); }
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__carousel-shell {
display: block;
}
}
@media (max-width: 600px) {
#dedicated-product .dp-infocards--carousel .dp-infocard { flex-basis: 82%; }
}
#dedicated-product .dp-infocards__nav {
display: flex;
gap: 12px;
margin-top: 28px; /* below the carousel, lower-left */
justify-content: flex-start;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__nav {
grid-column: 3;
margin-top: 6px;
justify-content: flex-end;
}
#dedicated-product .dp-infocards__navbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,0.10);
color: #fff;
cursor: pointer;
transition: background .2s ease, opacity .2s ease;
}
#dedicated-product .dp-infocards--accessories .dp-infocards__navbtn {
width: 54px;
height: 54px;
}
#dedicated-product .dp-infocards--accessories .dp-infocards__navbtn svg {
width: 34px;
height: 34px;
}
#dedicated-product .dp-infocards__navbtn:hover { background: rgba(255,255,255,0.20); }
#dedicated-product .dp-infocards__navbtn:disabled { opacity: 0.35; cursor: default; }
#dedicated-product .dp-infocards__navbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* If the track isn't actually overflowing (few cards on a wide screen), JS
adds this to hide the controls — mirrors Apple's responsive behaviour. */
#dedicated-product .dp-infocards__nav.is-hidden { display: none; }
/* One boundary-state contract for every product carousel. State remains owned
by each controller; this rule only standardizes its visible affordance. */
#dedicated-product :is(
.exa-slider__inline-nav,
.exa-slider__nav-btn,
.dp-showcase__nav-btn,
.dp-infocards__navbtn,
.dp-location__nav,
.dp-stage__nav
):is(:disabled, [aria-disabled="true"], .is-disabled) {
opacity: 0.35 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
@media (max-width: 768px) {
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__grid {
gap: 14px;
margin-inline: calc(var(--dp-margin) * -1);
padding-inline: calc(var(--dp-margin) + 7vw);
scroll-padding-inline: calc(var(--dp-margin) + 7vw);
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__grid.is-looping {
margin-inline: 0;
padding-inline: 0;
scroll-padding-inline: 0;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocard {
flex-basis: min(76vw, 320px);
scroll-snap-align: center;
}
#dedicated-product .dp-infocards--accessories .dp-infocard,
#dedicated-product .dp-infocards--accessories .dp-infocard__media {
border-radius: 18px;
}
#dedicated-product .dp-infocards--accessories.dp-infocards--carousel .dp-infocards__nav {
justify-content: flex-end;
margin-top: 14px;
}
}
/* ==========================================================================
Dedicated Product EXA carousel transplant
--------------------------------------------------------------------------
EXA's section-8 slider CSS ships from assets/css/exa.css. These bridge rules
restore the few page-level styles EXA normally scopes under `.exa-page` and
align the block with the dedicated-product spacing system.
========================================================================== */
#dedicated-product .dp-exa-carousel {
background: var(--dp-surface);
padding: clamp(56px, 8vw, 112px) 0;
}
#dedicated-product .dp-exa-carousel .exa-carousel__heading {
margin-bottom: 1rem;
}
#dedicated-product p.exa-carousel__subtitle {
display: block;
text-align: center;
font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.125rem);
color: rgba(255,255,255,0.7);
line-height: 1.6;
max-width: 40rem;
margin: 0 auto 1.25rem;
padding: 0 1.25rem;
}
#dedicated-product .dp-exa-carousel .exa-slider {
max-width: min(80rem, calc(100vw - (var(--dp-margin) * 2)));
}
#dedicated-product .dp-exa-carousel .exa-slider__caption {
font-size: clamp(0.8rem, 0.45vw + 0.7rem, 0.95rem);
}
/* =======================================================================
Sticky sub-navigation
Docks flush beneath the fixed masthead once the visitor scrolls past the
hero. The page root is z-index:0 / isolate (see top of file), so this fixed
bar can never paint over the masthead no matter how high its z-index — that
z-index only orders it *within* the page.
Depth is the shared secondary-nav token, one step under the site header, so
an expanded nav dropdown overlays this bar. It used to be 1400 to out-stack a
z-index:1300 that the old bare `header {…}` selector leaked onto every
section's semantic